Building a Printer-Friendly Version of any HTML Page

There are a 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 the article “Printer Friendly Version” when you click on that item. You just get the desired article escaping all unwanted things that do not make sense on the printed page.

Let’s see how is that achieved and how we make our document printer-friendly.

To get started you need to first write a CSS file. And include it on your page.
You might already know that we include CSS files on our page by using the link tag. Here is a small example of how a CSS file is included in an 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.

The link tag has an extra attribute media. Applying its 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 do not apply when viewing on the browser. This way you can show parts of the page that 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 it 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 clearly.
4. Links on print media don’t give much help. But you can show some distinction to them to tell that they were links on the screen.

Few other things that you should check out.

Browsers have settings for printing options. In the case of Internet Explorer if you go to Tools>Internet Options>Advanced>Printing. There is a check for print background colors and images. How your content will look on the 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 used images for a bulleted list on our Web Page. But while printing it disappeared because of the option selected.