Mirificam Press

Web to Print: Restyling Pages on the Fly with CSS

April 28th, 2008 in Design Tips & Tutorials

by: Matthew Griffin

Whether we like it or not, people are still printing information from the web. For years now the big question for newsletters, newspapers, and magazines has been, how do we get our printed product on the web? But as these mediums have gradually adapted to become more webcentric, the opposite question is becoming more appropriate—how do we get our web product to the printed page? Fortunately, this is a much easier question to answer than the first one—and one worth addressing. Until recently, I didn't give this idea much thought. But writing for a blog has brought the issue to the top of the list and now I'd like to share the experience I've gained writing a print stylesheet for Bits O' NewMedia.

Setting Up Your Print Stylesheet

If you've never used a print stylesheet, you'll be surprise at how easy it is. Start by copying your web stylesheet into a new css file called, for example, print_style.css. Then, all you have to do is add a new link tag in the head of your page like this:

You'll notice that the only difference between this and a link to your primary stylesheet is that the media attribute is set to "print". If you have this link tag in your page and you select file>>print, the print_style.css stylesheet will be used in the printing instead of the primary stylesheet. When you do this, it's important to set the media attribute to "screen" on your web stylesheet link tag. If you don't, your web stylesheet will bleed over into your print stylesheet and result in some funky and frustrating problems. IE7 users won't experience this issue, but EI6 and Firefox users will.

Flushing the Body Out

We will start by focusing on the body selector. Most of the time, the body of a website will have a background color or image. Start by deleting the background property so the background will appear white in the printed version of the page. Most browsers do this automatically when a page is printed, but it's best to be safe. While you're there, make sure that the color property is set to #000 or "black". Colored text looks great on the web but it wastes expensive ink when it's printed. For now, the last body property you should consider is the margin property. I find that the default print margin is a little too small. Try adding 3em to the right and left like this: margin 0em 3em 0em 3em.

Div-Be-Gone: Reformatting the Layout

Naturally, there are parts of a web page that don't need to be printed. The navigational buttons, for example, have no place on the printed page. Go through your print stylesheet and add "display: none" to all of the selectors that shouldn't be printed. When you're done with that, change the float property on all the visible selectors so that your content appears stacked vertically, rather than side-by-side. You can do this by deleting the float property on each selector or by changing it to "none". Finally, change the width property to "auto" on all page-filling selectors. For example, you may have a div tag that wraps the main content of every page. Changing the width property will ensure that the content in that div will fill the entire printed page. Here's a sample comparison from my stylesheets:

PX is Out... Em and PT Are In

When we build stylesheets for the web, we typically use the pixel or em measurements for all our padding, width, height, margin, and font-size properties. This is primarily because a digital display measures itself in pixels and letter width. On the printer, though, pixels are out. You will need to convert all your padding, width, height, and margin properties to em values. And your font-size properties should all be converted to pt. Also, keep in mind that your nice big on-screen text will look horsey in print. Keep your body text between 9pt and 11pt. Here's some sample code from the Bits O' NewMedia print stylesheet.

Putting It All Together

A lot of this work is trial and error. As you make changes to your print stylesheet, test it out, make adjustments, and test again. It a lot of ways it's a new world for those of us who have focused exclusively on the web. But in the end, you'll learn something new and give your visitors something useful. Here's a screen-shot of a print preview from an article on Bits O' NewMedia. You can test it out yourself by printing this page.

Post Your Comment