[thelist] White Wordmarks and Printing

Noah St. Amand noah at tookish.net
Mon Apr 2 12:39:17 CDT 2007


I've done a number of sites lately where the wordmark is white text on a 
colour gradient, or over a photo (I don't design them). In the interest 
of keeping everything as semantic as possible, I generally separate the 
wordmark from the background, make the wordmark a PNG with 
alpha-transparency (with the necessary IE < 7 fixes incorporated), and 
implement the background as a background in the CSS.

This works great on the screen, but creates a problem when it comes time 
to do a print stylesheet. Because the logo is an image in the document, 
it is printed, but the background behind it is almost always not. As a 
result, the logo is completely invisible (because it's entirely white).

I realize that it's possible to have the browser print backgrounds, but 
since this is a browser setting, it's not something I can influence.

For lack of a better solution, I've taken to duplicating the header as 
text or a non-white image, then hiding that on screen, and hiding the 
white header on paper. This causes there to be two headers in the 
document, though, which is not ideal.

Does anyone have any better ideas for having the wordmark appear in 
print, or providing a different wordmark to the print style sheet 
without duplicating content?


More information about the thelist mailing list