CSS print stylesheet

You’ve seen them before: links that say “click here for printer-friendly version” or words to that effect. Every time you follow one of those links, you load a separate document that presents exactly the same information with a different layout, and probably different markup.

Article Continues Below

That means somebody (or a script) had to take the original document and convert it to a stripped-down version that’s more suitable for print output. Maybe that somebody was even you.

Print style sheets to the rescue

One of the wonderful things about CSS is that it allows authors to create media-specific styles for a single document. We’re pretty used to styling for the screen, but thinking about other media isn’t a habit yet. And as all the “printer-friendly” links attest, our thinking about the print medium has been limited to recreating a document in a different way.

Why bother, when the power to offer your readers a better view of your material in print is no further away than a well-structured document and a media-specific style sheet?

You can take any (X)HTML document and simply style it for print, without having to touch the markup. Worries about version skew between the web and print versions suddenly become a thing of the past. Best of all, it’s simple to do. (For more information on the basic principles involved in creating media-specific stylesheets in general and print styles in particular, see “Print Different” at meyerweb.com.)

Let’s look at how A List Apart got some new print styles that danced around a browser bug and, in the end, made the printed output look much better.

Fixing a float flub

As you can see by visiting Bugzilla entry #104040, Gecko-based browsers like Netscape 6.x or Mozilla have a problem with printing long floated elements. If a floated element runs past the bottom of a printed page, the rest of the float will effectively disappear, as it won’t be printed on the next page.

If you have a site styled like A List Apart, and the entire article content is contained in one big float, then that means readers will only get the first page of the article.