Black and white logo for your print stylesheet

[Robin_reala]

Hey all, thought I'd share this trick I used recently. The design called for a fairly designed print stylesheet for each of the pages, which I OKed. I didn't, however, notice that the logo had changed from colour to black+white for the printable version.

In print stylesheets we generally can't set background colours or images, as most browsers default those to off. We can set them in the screen stylesheet though (of course). I ended up taking a backwards approach to it which works surprisingly well. So, given your HTML:

<a href="#" id="logo"><img src="my_logo.png" alt="My company name" /></a>

let's make my_logo.png your black+white print version. We can then use some trickery in your screen.css to hide it and show your colour logo:

#logo {
width: x;
height: y;
display: block;
background: url(my_colour_logo.png);
}
#logo img {
display: none;
}

OK, so you get the upfront hit of loading two logos, but it can make your print versions look much cleaner. Nothing complex here, but it hadn't occurred to me before.

[swa66]

nice one, and I'd agree that getting *good* print version results needs upfront planning.

Browsers treat print very poorly, so anything you can do to help it a bit generally makes a big difference, still for critical to get printed info (e.g. directions to get to the business or so) it might be better to provide a pdf version in case the browser doesn't do the page justice.

I'd like browsers to listen a bit better to what we ask of them when they see a print media stylesheet.
Still designing with the lowest common denominator in mind is what leads to a standstill in browser support.