Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

Pretty in Print

Filed in:Site News
Web Dev·CSS

Pretty in Print

August 30th, 2006  · stk

How do your printed pages look? When we saw that ours were horrid, Scott whipped the print.css file into shape. Read about the pros and cons of using CSS to make pretty print pages.

Using CSS to Format the Printed Page

Back in my office-working days, I knew a guy named Clint, who didn't like reading his email on the computer screen. He'd print each email, every morning, read through the print-outs, file the important messages and deep-six the others. I wonder if he still does that?

Who really reads online stuff, offline? Not me!

But who am I to criticize and judge others in their efforts at deforestation, eh? Isn't the Internet is supposed to be accessible to all - even folks who prefer reading online content, offline?

For accessibility reasons, innate curiosity and the shocking discovery that our printed pages looked horrible, I decided to spend some time and pretty them up. If you think visitors might want to print your blog articles (for reference or offline reading), then think about using Cascading Style Sheets to format the page.

Read on to see what a difference it made to our pages...

Stylesheets, Media="Print" and All That

Many people are not aware that CSS can be applied to a variety of "media", with "screen" being only one choice from a field of many. One of those other choices is "print", which means that the CSS is applied to the printed page, when a visitor selects "File -> Print".

The advantages for such a CSS construct are readily apparent to anyone who's tried to print a web page. Clicking "File -> Print preview" for a website will often times reveal a multi-page print job filled with extraneous and unwanted information. Do you really need a menu for a printed page? Not likely. A banner ad? No. Other navigational control? Hardly.

The solution employed at many web sites is a "printer friendly page" link. There, the page content is simply re-formatted in a copacetic way for a printer and reveals, by and large, what the page will look like, when it is printed.

Eric Meyer, a sort of CSS guru, wonders about the need for "printer-friendly pages" in his ALA article, "CSS Design: Going to Print".

... 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?

Accessibility, or the ability to convey a web page message across multiple media, is important for any web site. You want to ensure that you message reaches as many visitors as possible and not all are sitting in front of a monitor and keyboard.

I'm hip on wanting to provide readers with a decent printed page for an article (if they find anything I write worth committing to a printed page). So I spent some time designing a print.css file that offers readers what I think, is such a page.

G'won, give it a try. Select "File -> Print Preview". See how nice the page looks? (I hope).

Not everyone is enamored with the ability of CSS to control the printed page. The Man in Blue talks about CSS, printing and user expectation, suggesting that users, when selecting "File -> Print", expect to see a printed page that (basically) looks like a screen dump. Some people, he says, might actually WANT the banner ad or the menu. He thinks that having an explicit "printer friendly" link provides a better viewer experience than using CSS to style the output.

I see his point, but I lean toward Eric's point of view, especially because we use Photo-Caption Zoom with most of our images. (Because of the complexity of the Photo-zoom code, one doesn't get a WYSIWYG printed page. Instead, the made-for-screen-only CSS looks horrid, displaying the zoomed (too-large-for-print) image and a not-for-print, unstyled caption.) The print-only CSS is necessary, in this case, to tame the unexpected and undesireable results.

With regard to user expectation; that's the whole point of "Print Preview" - to provide the visitor with that expectation. If a visitor presumes an expectation, then they're just too lazy to actually hit "Print Preview". If what they want/expect is a screnn dump, then let them hit "Shift + PrtScn" and MAKE a screen dump. In my opinion, the reason the Man is in Blue, is because he's all wet, though he does raise an interesting argument.

It's beyond the purpose of this article to get into the nitty-gritty details about HOW to optimize a CSS file for print media. There are enough tutorials floating around that you can find one to help you or, do it like I did and just start making modifications and printing a page. It doesn't take long to figure out how to optimize the final result. In the end, you'll have made your pages accessible to people like Clint and done your part to support Weyerhauser, Georgia Pacific, Hewlett Packard, Lexmark and other printer/paper companies.

Your pages have now become more accessible! Yay.

(Just remember to revisit the "print" CSS from time-to-time, as you add directives to your "screen" CSS file, they may not translate so well to paper. ;)


Views: 14741 views
2 Comments · GuestBook
default pin-it button
Updated: 6-Aug-2008
Web View Count: 14741 viewsLast Web Update: 6-Aug-2008

Your Two Sense:

XHTML tags allowed. URLs & such will be converted to links.

Subscribe to Comments

Auto convert line breaks to <br />

1.flag Ian Lewis Comment
Well written. I always wondered what that silly print.css was for ;P

I'll probably visit my print.css soon since it doesn't handle the site well at all. Not that I think a lot of people are printing from my site.
2.flag stk Comment
Thanks for saying so.

Doing print.css is like checking that a site looks OKAY in Opera ... not many folks use Opera, but you never know who they might be.

Might as well look good to as many as possible. ;) (Cross those Tee's and dot those Eye's)