Skip navigation.
Zeldman.com HomeThe Daily ReportMy Glamorous LifeZeldman.com Classics, 1995-2002

essentials: printer-friendly

This site now sports a print style sheet. Try printing this page in your favorite browser (PDF). Where did the nav bar go? The print style sheet hid it. You don’t need nav bars in a printout. Where did the sidebar go? The print style sheet hid it. The print style sheet is Ted Turner in reverse. It de-colorizes the site for easier printing. The print style sheet turns off justification, changes the font and line-height. In Gecko-based browsers like Netscape6+, Chimera, and Mozilla, and in recent versions of Opera, it pecks out URLs.

Our print style sheet is a work in progress. The navigational elements it hides double as brand identifiers. An alternate brand ID is needed for printouts. A few additional tweaks and changes would not be amiss. Some rules could be consolidated to save bandwidth. Even so, this first draft print style sheet may help designers who are crafting their own printer-friendly styles.

Note the use of pts. We’re designing for paper, here, not for the screen:

body	{
	margin: 0;
	padding: 0;
	font-family: verdana, arial, sans-serif;
	
	font-size: 10pt;
	color: black;
	background-color: white; 
	}

Note the use of display: none to hide whole chunks of screen stuff from the printer:

#secondarynav	{
	
	display: none;
	}

Note that nearly all whitespace values given in px for screen styles have been converted to ems for print.

The screen version:

#tale h3	{
	
	margin-top: 25px;
	margin-bottom: 25px;
	}

The print version:

#tale h3	{
	
	margin-top: 2em;
	margin-bottom: 2em;
	}

Why the change from px to ems? The screen styles control numerous elements arranged on a grid. The grid requires the precision of pixels. The print styles show only the primary content. Hence no grid. Hence relative values (ems) are good enough. In fact, they’re better, because they avoid potential px-to-pt conversion errors.

Eric Meyer’s “Going to Print” (A List Apart No. 144) can help you learn to conceptualize and design print styles. A French translation is available at pompage.net.

Geeks Please Note

This style sheet uses CSS3 selectors to turn on URL display in printouts generated by Gecko-based browsers and Opera. As of this writing, the W3C CSS validator can only test for compliance with CSS1 and CSS2. Unable to understand CSS3 selectors, the validator will report “errors” in the print style sheet. Such are the limits of current software. Nonetheless, the print style sheet is 100% valid per W3C CSS recommendations.

Non-semantic junk permits cursor to reach anchor.


Default text style.Alternate text style.Georgia on our minds.Watch this space.
A List Apart
Happy Cog Studios
WThRemix