Hartija - Css Print Framework

I recently had a client who wanted to improve the printing layout for his web pages. I conducted a mini case study analysing various web printing techniques and how different web sites manage "printer friendly" pages.

The study and analysis of different CSS methods for web printing brought me to a discovery, many important web sites are not optimized for printing, even though it can be done with very little effort. To solve this problem I decided to create a global stylesheet for web printing by uniting all the best CSS print style practises into one.

After having downloaded the code, open the print.css file. You will notice that I used serif fonts that work better for printing purposes. The font-size is 12pt and line-height is set to 1.4pt. Points generaly works much better for printing purposes.

How to use this framework?

In the HEAD section of your page add:

<link rel="stylesheet" href="{path_to}/print.css" type="text/css" media="print">

It is key that the media type is set to print. With this rule the browser will use this stylesheet when rendering a page for printing and not for your screen. When creating a print specific style sheet you probably want to hide some parts of your page that is not essential, such as navigation menus,the header and footer. Basically, anything that does not convey information realted to the page.

So go ahead and remove any sections that does not need to form part of the document when printed. Open the print.css file, if you have nor already opened it, and inside specify all the parts that you want to hide, leave only the article for printing

Example:

#navigation, #rightSideBar, #leftSideBar {display:none;}

From your browsers file menu select: File > Print Preview to see the print stylesheet in action. For more see:
http://code.google.com/p/hartija/