Print Stylesheets Return

by
This entry was published at least two years ago (originally posted on January 28, 2009). Since that time the information may have become outdated or my beliefs may have changed (in general, assume a more open and liberal current viewpoint). A fuller disclaimer is available.

One of my website pet peeves is the lack of attention to how a site behaves when printed. All too often, there’s either an assumption that we live in a truly online-only world, or simply a lack of thought about how any given page will look when printed. Consequently, there are a lot of websites that look like crud when printed: navigation links and ads all over the page taking up unnecessary space, content crammed into a narrow column, an extra half page of junk after the actual content ends, etc.

Some sites give a ‘print view’ link that produces a print-optimized version of the page, but I’d be willing to bet that a lot of people never see that — especially given the number of times I’ve had to actively hunt for such a link, and found it shoved off in some corner, not obviously tied to the content at all. Besides, having a specialized page seems like unnecessary overhead on the server when better solutions exist.

To that end — and this is a project that I’ve been meaning to do for a while (I never even got around to it with my last design) — I’ve resurrected the print stylesheet for my site. Admittedly, I have no idea how often people print something they find here (and I would guess that it’s not very often at all), but at least now I know that if they do, they’ll get something useful.

There’s an older, but still relevant, more detailed look at the techniques I use in this post from 2003, but here’s a rundown of the results:

  1. No navigation links below the website title.
  2. No sidebar at all.
  3. No comment entry form.
  4. No Google ads.
  5. The content fills the page, with a wider left-hand margin to allow room for binding.
  6. Rather than coloring links (useless on a printed page), the URLs display after the linked text, using Markdown style formatting.

The only issue I’m having is the same issue I had the first time I set up a print stylesheet: the code that inserts URLs after linked items borks up the clean display of inline images (for an example, try printing this post). I’m (still) stumped on how to exclude images from the link insertion code, though, so for now, I’m just going with what I’ve got.