Printer Friendly Pages

CSS is a great new tool for web designers. Now it is more widely supported, and browser-makers are sticking to the
W3C standards, we can begin to explore the possibilities it has offered us since the 90s but that we could not make
use of.
CSS allows you to separate your design from your markup, making maintenance infinitely easier, and your site more
likely to work in different devices, both of which are definite pluses. It also, however, allows you to tell a page to
display a different way depending upon what device is being used to render it.
This is achieved using the "media" attribute of the "<link>" or "<style>" tags, like so:
There are several media types available to you - all, aural, braille, handheld, print, projection, screen, tty, tv - and a
list of available media types with more detail is available from W3C (where you can find out more about media
groups, as well).
With such a range of options, you can, if you like, create one HTML document that will display exactly as you like
depending entirely upon which device is being used to view it. You can hide large images from PDAs, you can specify
seperate font styling for overhead projectors - you can write your site so that it works well with the technology at the <link media="screen" href="style.css" type="text/css">
<style media="screen" type="text/css">
user's disposal. And one very useful side effect of this is that you can specify an entire print style without the need
for copies of every page of your content, like the following, that will use the "normal.css" style sheet for screens, and
the "printer.css" style sheet when printing.

 <link media="screen" href="normal.css" type="text/css"> 
 <link media="print" href="printer.css" type="text/css">

For print styling, there are a lot of factors to consider. Are many users going to want to print out your header? No.
But do you want your logo on the page? Yes. Is the navigation worth printing? No. Each item on a web page serves a
purpose, and on paper, that may not be worth much.
It is best, then, to start at the beginning. With an unstyled HTML document. Pick a page to start working on, and
remove all styles from it. With an unformatted page in front of you, it should be pretty easy to see what needs styling
and how, but don't rush in. There's a lot to think about.

FONTS
Fonts are very different on the web to print. Sans-serif fonts are, allegedly, the best to use on the web. Serif fonts
are, apparently, better on paper. So first things first, set your font to a serif font you like (personally, I like Georgia
for Windows). As with picking all fonts, make sure you provide alternatives for those without the first-choice font.
Font sizing is a bit different on paper too. It's usually best just to leave this to the default, but if you want to specify a
font, make sure you run plenty of tests to make sure it's easily legible.

* { 
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: 12pt; 
} 

LINKS
Links are not going to be a lot of use on paper, by their very nature. But that does not make them useless.

a { 
    color:#000000; 
    text-decoration: underline; 
} 
 
a:after { 
    content: " ( "attr(href)" )";
}

The above, if added to a printer style sheet, will make all links black and underlined, and add the address of the link
in brackets afterwards, meaning that if a user did want to visit any site linked to from that page at a later date, they
can.

SPACING
In print, margins and spacings are as important as with the web. There is no harm in adding in a little space
between words and lines, and a decent gap around the edges, if it will make a print-version easier to read.

HIDE USELESS STUFF
You can hide elements in this style sheet easily enough, using display none. This will save some space on the paper,
and reduce useless junk on the page, something the user will be very grateful for. Elements worth hiding are usually
form elements, some images, marquees, and flash content. If you are unsure, print the page and then work through
that page deciding what is useful and what is not.

body { 
    padding: 10%; 
    line-height: 1.2; 
    word-spacing: 1px; 
} 

COLORS
Print colors will show up very differently to screen colors, especially as a high proportion still have black and
white printers. Even those who don't will be grateful to you if you keep the proportion of color to a minimum,
simply because of the expense.
Highlight and emphasize things using italics, underlining, boldness and size in your print style sheet. Remove all references to colors where you can, save to set colors to black.

PAGE ADDRESS
You may want to add the address of the page itself to the page, and hide it, except when the page is printed, so that
the user can return to your page later if they wish.

TELL THE USER
A user may see a page without a "printer friendly" link and print anyway, but they may be put off. Try and add a note
to your page explaining that the page they are now viewing is printer friendly, and encouraging them to print it.