Stylesheets For Printing

Posted by Bree on Mar 18, 2009 in CSS | 0 comments

Using a special stylesheet to help with your printable content can save you a ton of headache. You may have read that tailoring your content to print properly is a lot of work or can be a frustrating experience, setting you at odds with printers and clients alike. When executed properly, it’s a very simple process that requires only one file (print.css) and yields a few tangible benefits.

Quantify What Needs To Be Print Friendly

Have you ever experienced the sublime joy of a boss or client who suddenly realized that a page or portion of your site doesn’t print well? You might be asked to make pages printable as-is, rather than via some print-friendly intermediary. Even worse, you might be asked to make traditionally unprintable content print correctly; home pages, flash content, animations or even application interfaces. Explaining the vagaries of printable backgrounds and margin-friendly markup is a complete waste of time. They don’t care about the details, they just want it how they want it. Your frustrations rise as you try to complete an awkward task for an increasingly disappointed client.

Before we get into the details of those gnarly and undesirable tasks, let’s take a lesson from my Sabumnim and try to avoid these perils completely. What was the first error in the hypothetical situation above? Was it coding the site improperly or not using a certain methodology? Nope. Was it not knowing what the client would ask for until it was too late? Again, no. The problem was that the client’s expectations (in regards to printable content0) were not managed early on, leaving them opportunity to invent potentially difficult goals imposed at unfortuitous times.

Do yourself a favor; review all the content of a site you’re building and make note of what looks like a good candidate for being properly printable. Discuss that with other project members such as the project manager and the project stakeholders (the people with veto power). By defining your set of print pages you have:

• Quantified this task into a finite, deliverable goal
• Sold it as a feature to project stakeholders
• Exempted irrelevant and potentially problematic content from the scope of the task.

Typically you should plan to provide print-friendly versions of most legalese pages, informative articles, help content & FAQ’s, product listings and detail sheets, as well as directions a user might need to complete a task. Often times you can exempt several types of pages from the print-friendly objective: most home pages, application interfaces, animated pages & images, advertising content and data entry forms.

The basics of a print media CSS

• Change the page’s colors to black and white; colors and median shades of gray might not print well.
• Use a font with serifs, it’s easier to read in print.
• Left-align your text and columns.
• Choose a font size that is easy on the eyes and affords paragraphs of a desirable length.
• Underline all links so the reader can still identify them.
• Remove non-essential images, especially advertising.
• Remove the navigation and site-frame images, as they are prone to lose context.
• Remove all JavaScript, Flash, and animated images.
• Formally cite references and contributors.

I’ve created an example print stylesheet that does what I’ve described above. You may use it as a starting point when designing your own. It’s full of notes, feel free to delete those as you see fit.

How to invoke your print-friendly stylesheet

In the HEAD of your document, you’ll add in the print CSS file just like you would a normal one, with a few tweaks.

<LINK rel="stylesheet" type"text/css" href="print.css" media="print">

You’ll notice that the media is specified as print, and that’s the important part. That instructs your browser to apply the styles within only when the page is printed. The other media type that applies when printing is “all” … you can read more about the various media types if you like, but that’s out of this article’s scope.

So that’s it, you define a second (smaller) set of CSS rules to handle printable content, link the stylesheet only in the pages which users may need to print, and bam – your browser does the rest. You don’t have to maintain a second site template, it only requires one extra file and your boss is happy.

Yay!

Reference materials:

• http://www.netmechanic.com/news/vol4/design_no8.htm
• http://www.maratz.com/blog/archives/2004/09/21/10-minutes-to-printer-friendly-page/
• http://www.alistapart.com/articles/goingtoprint/
• http://meyerweb.com/eric/articles/webrev/200001.html