Easy printer friendly pages

You don’t need to muck around with JavaScript, page redirection or PDF integration just to make your XHTML web pages printer friendly.

By far the simplest way is to define a separate stylesheet for printing purposes:

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

In your stylesheet, define your colour scheme to be black on white, use a medium size “serif” font, underline all links and remove any navigation, comment forms, calendars, sidebars, footers and any other meaningless stuff:

body {
   font-family: georgia, "times new roman", times, serif;
   color: #000000;
   background: #ffffff;
   font-size: 11pt;
}

a {
   text-decoration: underline;
}

#navigation, #sidebar, #calendar, #commentform, #footer, #advertising {
   display: none;
}

That’s it. There’s no separate page for printing, no additional programming and no silly “print this” buttons to worry about, for you or your users. When the user wants a printed version of your page, they simply either press Ctrl+P or choose File > Print from their browser menu.

Posted in CSS, HTML, Tips, Usability by Ivan