Make Your Website Look Good On Paper with Print Stylesheets

printerDid you know you can make your pages automatically printer-friendly by creating a simple print-specific style sheet?

Most websites out there only use one stylesheet and either specify them for all media or just the screen. Many times when visitors print out pages, the formatting goes awry and lots of useless information ends up wasting people’s ink and paper.

Yesterday I went to print out Darren’s fireworks photo tutorial. Since the stylesheet is specified only for the screen, the printer defaults to a barely-styled 16 pages of text and photos, with the site’s navigational elements taking up the entire first sheet of paper.

Since I have the web developer toolbar installed I was able to quickly create my own stylesheet and get the meat of the article down to 3 printed pages. But assuming 99% of your audience won’t be doing this, you should help them out by specifying a print stylesheet that excludes extraneous elements (like page navigation) and makes the best use of printed space.

1. If you’re designing a new site or don’t mind tweaking your current templates, create a new class and call it “noprint”. Then add this new class to all the elements you don’t want printed. For example

<div id="header" class="noprint">

The nice thing about Cascading Style Sheets is the “cascading” part which lets you stick this to the end of any existing class specification in your template. For example

<ul class="boxy wider noprint">

I would recommend excluding navigation, footers, ad units, (maybe even comments) and anything else not central to the “meat” of the post. Once you add that class to all the elements you don’t want printed, create a new stylesheet called print.css and add this to it:

.noprint {display:none;}

You can also add any other styling options, such as a smaller font size, to maximize the use of printed space.

body {background: white;font-size: 12pt;font-family:"Times New Roman", Times, serif}

Then in your head tag, specify your existing stylesheet for the screen

<link href="/style.css" rel="stylesheet" type="text/css" media="screen" />

and add the new stylesheet for printing right below

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

Voila! Now your visitors will be happier and you can save the earth one printed sheet of paper at a time. For more on print stylesheets, check out A List Apart or this great print-css compilation from Smashing Magazine.