How Print Style Sheets Differ
Depending on the complexity of your page, the print version might be very similar or indeed very different than the screen version.
Suggestions for print style sheets:
- Use appropriate fonts and font sizes, using points rather than pixels, since the former work best for printing. For more details, consult A Property's Value on page 124 as well as pages 152159.
- Hide sections like sidebars or ads that need not be printed (using the display property described on page 190).
- Remove background colors and images and use colors that print reasonably in black and white (see pages 160 and 172).
- Adjust margins, if necessary (see page 176).
- Control page breaks and other print-specific properties (see pages 212214).
- Explain to your visitors how and why the print version will be different from what they see on screen.
The page break and other print-specific CSS properties suffer from average to middling support. However, there are still many things that are worth changing that all browsers will understand.
As you test style sheets for printed output, be sure to take advantage of your browser or system's Print Preview option, if it has one. Print Preview (typically in the File menu and sometimes in the Print dialog box itself) lets you see how the page will be printed without having to waste paper.
Figure 14.3. In a screen version, you might have a table of contents sidebar, some ads, and sans-serif fonts (which tend to be easier to read on screen).
Figure 14.4. When the document is printed, you can get rid of the sidebar and the ads, and use a serif font for added legibility. Note that the exact same (X)HTML code was used in both cases. The browser automatically selects the appropriate style sheet.