Make a copy of every page or article - and manually remove all the non-printer-friendly stuff.
Use a (CGI, PHP, JavaScript, other) script to remove the non-printer friendly stuff on the fly.
Write a style sheet for print.
The drawback to option one should be fairly obvious to most people. It is very labor intensive and requires that for every page on your site, you create a second, duplicate page.
Option two is the most common choice right now, because it mitigates the problems of option one, and with a small change in how you write your Web pages, you can set it up for every page on your site. But if you don't have access to CGI or you just don't feel comfortable with programming, this method can be challenging, if not impossible.
Cascading Style Sheets to the Rescue
Luckily, CSS was not written with just Web pages in mind, and with just a few extra codes you can create a printer style sheet that removes all the non-friendly options on your page and even takes into account issues such as typography and readability. And you don't have to write two different copies of your page or do any programming to build it.
Defining a Style Sheet for Print
As with screen style sheets, you use the /link/ element to define the print style sheet your Web page should use:
link rel="stylesheet" type="text/css" href="print.css" media="print"
The only difference between this link element and the link to your screen style sheet is the attribute:
media="print"
Most style sheets are written for the screen, so the media can be left off, or written as:
media="screen"
Building the Style Sheet
When you build a print-friendly style sheet, you need to keep in mind all the rules that were defined in the previous article:
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 some or most of the advertising.
Remove all JavaScript, Flash, and animated images.
Change these rules into CSS:
Black on white with 12-point, serif fonts:
body { color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; }
Underline links:
a { text-decoration : underline; color : #0000ff; }
I also like to make the links blue, to stand out on color printers.
Remove Non-Essential Images, Ads, Navigation, and Scripting
The best way to do this is to put
elements around each section of your page. For example, you might have the following sections:
top, bottom, left, and right navigation
internal advertising
content
other elements
Define each of them with a
top, bottom, left, and right navigation
internal advertising
content
other elements
Define each of them with a
element:
