Be Good Not Bad by Brian Warren

21 October 2005

Print Styles

I developed some print style sheets for both this site and Be Good, Not Bad. Now, should you decide to print out any of pages on either site, you will get a lovely print version of it produced on the fly. This means you wont be wasting extra ink printing out a photograph of my desk each time you want to print out something.

Ink savings aside, there are some very handy things about creating a print stylesheet for a website. You can hide page elements, such as navigation and sidebars, from the print view, while leaving the content of your page intact. One of the coolest things about using a print stylesheet is that it is totally transparent to the user. There is no “click here for a printer-friendly version” or any nonsense like that. It’s assembled on the fly when the user clicks print from the browser.

The way print stylesheets work is fairly simple. First, I have the main content of my site that, unstyled, doesn’t look very pretty, but is highly readable. This is how Google “sees” the site. Also, this is how blind users read the site.

Then, to make it look pretty for the screen, I built a stylesheet that adds in all the whiz and bang. Once I have my stylesheet built, I link to it like this in the <head> area of the webpage:

<link rel="stylesheet" type="text/css" href="/bw/v2/style.css" title="default" media="screen" />

Next, and yes, it took me almost a year to get around to doing this very simple 20-minute task (it took me longer to write this post than it did to create the stylesheet), you create a separate print stylesheet.
In my print styles I hid the following using display:none;

  • background
  • navigation
  • link blog (aka: browsing…)
  • Flickr thumbnails
  • on tap…

I kept very few elements of the design. I also removed the fixed width of my main text area. This makes the text flow horizontally to fill the page, just like it would in a word processor.

What I did keep was the color scheme of the site with titles a golden brown and the coffee rings still separating the entries. I also kept a header with the title of the site.

When you add your print stylesheet to the code, just like with the regular stylseheet, put it in the <head> area of the webpage:

<link rel="stylesheet" type="text/css" href="/bw/v2/print.css" media="print" />

Testing the print styles is a little trickier. You can set up a page like I did, but it’s most realistic to just print them out. On the mac, when you click print, there’s a button (I think this is on Mac OS 10.3 and later) that says “Preview”. Click that and it just pops it open in Preview as a PDF and you can see what it looks like. On Windows, I believe you’ll have to create a PDF each time using Acrobat or something along those lines. I’m told Windows has some sort of print preview function built into the OS that works well enough.

The thing I love about doing this is how it really shows the power of using CSS for the design of your website. Leaving the design out of your HTML and putting it all in your CSS gives you the ultimate flexibility for your website.