Tuesday, August 30, 2011

Printer Friendly Version

There are number of content heavy sites that you might be visiting each day. Reading articles of your interest and at times print this article. At times you may find a small button at the top/bottom of article "Printer Friendly Version" when you click on that item. You just get the desired article escaping all unwanted things that does not make sense on the printed page.

Lets see how is that achieved and how do we make our document printer friendly.

To get started you need to first write a CSS file. And include it in your page.
You might already know that we include CSS files in our page by using link tag. Here is a small example of how a css file is included in a HTML page.

<LINK href="special.css" rel="stylesheet" type="text/css">

Here in the example a css named special.css is included in a html document. When you view the document the CSS get's applied to the document's element to give it the look you wanted.

Link tag has a extra attribute media. Applying it's value to media="print" makes the css available only when you are printing the document. So all the styles that you write in your print.css does not apply when viewing on the browser. This way you can show parts of the page which just makes sense for printing.

Things you can/should do while printing.

1. You should hide the Header Footer and site Navigation as getting it on the print page doesn't makes much sense. (Typically just show the content portion)
2. You will have to whitewash your Content Background. Since printers do not print white and there can be some leaked background-images. In my case it was a gray background prevalent and i had to set to none. And apply the white background color.
3. You might need to increase the font size a little because you may want to read it clear.
4. Links on print media doesn't gives much help. But you can show some distinction to them to tell that they were links on screen.

Few other things that you should check out.

Browsers have setting for printing options. Like in case of Internet Explorer if you go to Tools>Internet Options>Advanced>Printing. There is a check for print background colors and images. How you content will look on printed page will depend a lot on this. If your article is using a lot of background-colors and images you would need to find a trade-off for it. For example we had used images for bulleted list in our Web Page. But while printing it disapeared because of the option selected.

No comments:

Post a Comment