Make your web content printer-friendly

Sat 3 Mar 07 04:03 | Tags: Blogging

Odds are at least once during your residence on the internet, you've tried to print a web page, only to have the resulting print-out look ugly and mangled compared to how the page appears on the screen. There's quite a difference between a computer screen and a paper printout; prints can have much sharper images, whereas screens are better with wide ranges of color. There's a wide variation in the possible sizes, ratios and orientations of computer screens and the content displayed therein thanks to scroll bars and other interface elements, whereas paper printouts will almost always be on 8.5-by-11-inch paper, vertically oriented, with no scroll bars, and no need for interface elements beyond the paper itself. So pages that look and work well on a screen often come out mangled when you try to print them, whereas pages that look well in print can look dull and flat on a screen. Fortunately, there's a way for the two to co-exist peacefully.

Have you ever tried printing an article at Wikipedia? If not, try it now. (You don't actually have to create a printout; just doing a Print Preview will suffice.) You'll notice that the article on paper looks quite different from an article on the page; the navigation links along the top and left side are removed, the text appears in a serif typeface, such as Times (which are generally accepted as being easier to read in print than sans-serif typefaces such as Helvetica).

I implemented the same feature with Ray Gun Robot a while back. If you try it now, you'll see that the bar on the left is gone, the text switches to a serif typeface, and blockquotes and code boxes that appear in a borderless gray box on the screen instead show in a box with a white background, but a black border. The resulting appearance works much better for print-outs than the standard screen appearance.

So what's the trick? How am I magically switching the appearance of the page when it's printed? The trick is that we can tell web browsers to use a different CSS stylesheet for print than for screen display. Check out the source code to this page, and in the <head> element, you'll see:

<link rel="stylesheet" type="text/css" href="http://raygunrobot.com/templates/AB/css.css" title="Stylesheet" media="all" />
<link rel="stylesheet" type="text/css" href="http://raygunrobot.com/templates/AB/print.css" media="print" />

So I've actually linked to two stylesheets here. The key is that media attribute. There are various stylesheet media types, including ones for handheld devices, Braille output devices and speech synthesizers for blind web surfers, and so on. That first stylesheet I'm specifying for "all" devices; truth be told, I'm not sure how well it would work for non-visual media devices, but I'm going to be lazy and ignore that for now.

The second stylesheet, though, is the one that does the magic. Its media attribute is set to "print", so web browsers will apply that stylesheet to pages when it prints them. (A caveat: Note how the first stylesheet has a title attribute, but the second doesn't? Apparently it's a quirk of HTML that only one stylesheet can have both a rel attribute with a value of "stylesheet" and a title attribute. For others, you either have to leave out the title attribute, or use rel="alternate stylesheet" instead. Huge thanks to "csarven" in the #CSS channel on EFNet for helping me figure that out.)

The print stylesheet itself is pretty simple. It just uses an @import command to import the standard stylesheet…

@import url("http://raygunrobot.com/templates/AB/css.css");

…then overwrites various rules in that stylesheet with ones that look better for print.

I encourage all folks who imagine that someone may want to print out something on their web site to consider adding a print stylesheet like this. It'll be just a few minutes more of extra work for you, but it will be a huge convenience to your readers.

Get more great Ray Gun Robot content sent directly to your feed reader or email inbox! Subscribe today!
Articles & Links — Via Email
Articles Only — Via Email