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

This entry was posted in Style Sheets. Bookmark the permalink.

Comments are closed.