Print css

Friday 20 February 2009

Alexander Artemenko starts a game he calls “Do you a have printer.css? I do!” in which you rat out your blog friends for not printing nicely. When I saw it, I was surprised at some of the blogs he mentions that don’t print well, because this is a well-established technique. I’ve had a print stylesheet for a while, so I smugly considered myself to be in the GOOD category.

When I tried my site though, I saw that my print stylesheet was a little neglected. Although I wasn’t offering up sidebar and comment forms for printing, some unneeded graphical elements had snuck in. And my recently overhauled home page was kind of a wreck on paper, since I not only had forgotten to accomodate it in my print stylesheet, I had forgotten to link to my print stylesheet from there at all! So I fixed everything and all is well again.

There are good resources for how to do print CSS, but it’s not difficult. If you have the CSS chops to have designed your pages in the first place, this will be a breeze.

First, create a new empty CSS file, call it printstyle.css. Link to it in the <head> section of your page:

<link rel='stylesheet' href='printstyle.css' type='text/css' media='print'>

Then visit your page, and select Print Preview in your browser. How does it look? There’s probably stuff you want to fix. Simply add style rules to printstyle.css to correct whatever is wrong.

For example, You’ll probably have entire sections of your page you don’t want to print at all. Give them a display:none rule. Narrow columns can be fixed with width:100%. Fancy positioning can be undone with float:none or position:static. Garish styling can be set back to black and white.

You may find you need to select sections of your pages differently than you had to for the screen. For instance, my home page has inline CSS since it’s unique on my site, but it shares the printstyle.css stylesheet, so I added an id to the body tag (<body id=”mainpage”>) so that I could write print CSS rules that applied only to the home page.

When you are done, you’ll have a printable page that looks like you meant for your stuff to be printed, not the usual web printing experience of mostly-blank pages and ads all over the place, complemented with taunting input forms that can’t be filled in.

Printing well is one of those nice touches web designers often overlook, but it’s not difficult at all, and will pleasantly surprise your printing readers when they put your content through their printer and end up with something they can actually use.

I’m not going to pick on ten blogs I read. My checklist looks like this:

In fact, I think a better game is to pick a blogger in the BAD category, and suggest fixes to get them going. For example, Simon Willison’s main problem is that his content is in a overflow:hidden div, which makes it both pop onto a page of its own, and be clipped to that page, giving you three pages out of your printer: two blank except for navigation, and one with only the start of the content. This would go a long way to making Simon printable:

    div#wrapper {
        overflow: visible;
        width: 100%;
    }
    div#searchbox {
        display: none;
    }
    p.bighead-toolbar {
        display: none;
    }

Comments

[gravatar]
Robert K 11:18 AM on 20 Feb 2009

Actually, I've found the following technique to be quite effective:

window.onbeforeprint = function()
  alert("You're printer is out of paper!");
}

[gravatar]
Jared 2:18 PM on 20 Feb 2009

I prefer to keep a single stylesheet by using:

@media print {
  // css print rules here
}

[gravatar]
all your base 7:16 AM on 1 Jun 2009

alert("You're printer is out of paper!");

You use the wrong "You're". You're is a contraction of "you are"

alert("You are printer is out of paper!"); ???


All your base are belong to us!!! Make your time!!

[gravatar]
Robert K 9:43 AM on 1 Jun 2009

Actually my printer is named, "You're". ;-)

(Actually your write, its supposed too be "your". I just didn't right it wright. I'll get it rite next time tho. Thanks for you're input.)

Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.