Examining Print Style Sheets

What is a print style sheet?
A print style sheet controls which parts of a web page print, with what formatting.
Why do I need one?
  • Most or all sidebar navigation is not needed to get the most out of a printed article. Anything that is best understood by clicking is probably superfluous.
  • Margins and floats may overlap or cut off the edges of content when a layout is used for a smaller space than indented.
  • The width of a printed page is narrower than a layout that displays comfortably in a widescreen monitor.
  • Stylishly small text that is readable in a monitor may be too small to read when printed. Try a comparison: print a page of your site, then hold a line of text next to the same line of text on the screen. If the print version is noticeably smaller, a significant number of readers will need to get up close and squinty to make use of the printout.
What’s the difference?
  • Take a look at three versions of What I’m doing Instead of Attending SES-NY. Image widths are the same in all three screen shots below. The width of the image represents the width of the text area of a printed page. Only the yellow portion is the actual article. The rest is blogroll, sidebar, and other parts that don’t need to go in a printed version.
  • The lefthand version, without a print style sheet, prints out at about 12 pages.
  • The right hand version, with a print style sheet, prints out at just under three pages.
  • The middle version uses a copy of the regular “screen” stylesheet, shrunk to fit the width of a printed page. The text is tiny.

No Print Style Sheet

No Print Style Sheet

Same as Screen CSS

Screen Shot

With Print Style Sheet

Print Stylesheet