Printer-friendly HTML pages

If you’ve got your content and style separated by good use of CSS then making webpages printer friendly shouldn’t take very long at all and should require NO changes to the HTML itself.

1. Create a copy of your main css file and rename it to (say) print.css.

2. Add the following line to all your web pages (or, better, your template):

<link rel=”stylesheet” type=”text/css” href=”/print.css” media=”print” />

3. Edit print.css to reflect how you want the hard copy to look like. Some things to consider are:

• Change colors to black on white
• Change the font to serif
• Watch the font size
• Underline all links
• Remove non-essential images
• Remove navigation
• Remove any advertising
• Remove all Javascript, Flash, and animated images

4. Print a few sample pages and smile smugly as they roll off the printer.

Mark up can be removed from the hard copy by using something like:

#button { display: none;}

A good way to set the fonts and font size for the text might be:

body {
color : #000000;
background : #ffffff;
font-family : “Times New Roman”, Times, serif;
font-size : 12pt;
}

(This is probably one of the few times that you can hardwire a font size to 12pt!)

Problems:

1. If you make changes to your stylesheet frequently you will have to make sure that those changes are reflected in the print stylesheet too.
2. Just commenting out unwanted CSS in the print.css isn’t good enough, you have to reset things. Eg,
   styles.css BACKGROUND: url(/images/shineb.jpg) #006699 repeat-y; MARGIN-RIGHT: 135px;
   should become:
   print.css BACKGROUND: none; MARGIN-RIGHT: 0px;
   if you want to lose the image and the margin from the paper copy.