Welcome to WebmasterWorld Guest from 54.204.165.156

Forum Moderators: not2easy

Black and white logo for your print stylesheet

   
9:02 am on Apr 24, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

1:55 am on Apr 26, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month