Friday 20 February 2009 — This is close to 16 years old. Be careful.
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 accommodate 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:
- Ned Batchelder: GOOD.
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
window.onbeforeprint = function() alert("You're printer is out of paper!"); }@media print { // css print rules here }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!!
(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: