Printing in style

Jeff Atwood provides a sensible approach to styling your blog for print and handheld: just hide the things that don’t apply by adding the “display: none;” style to the containing div sections. I’ve applied that principle to Q and T for printing. No more eight pages of sidebar when printing a post. From the number of complaints that I’ve had about that (0), I would infer that at least for most blog readers, the dead tree medium really is dead.

Has anyone else noticed that the print preview in Firefox renders images far more accurately than the one in Internet Explorer 7? The fonts look better, too. I bet IE7 generates an image of the entire page based on the printer’s device context and then uses StretchBlt (or an equivalent) to scale it to the screen DC (which ends up scaling the images twice), while Firefox works its scaling algorithms for each font and image, based on the size of the current DC for each rendering. Just my guess. End of Wingeek speculations.

I haven’t addressed handheld yet, because that may prove to be a bit more complicated for my theme. Some of the sidebar items (“Search”, for example) would be desirable to retain for mobile devices, but I don’t want the tag cloud, blogroll, etc. Since the sidebar is generated by the WordPress widget plugin, and I can’t add CSS classes to individual widgets, I might just have to duplicate the applicable widgets in a handheld-friendly fashion and suppress them in the other stylesheets.

Jeff only subtlely indicates (in the HTML example) how you go about applying different stylesheets for different devices: the “media” attribute on the “link” tag. The HTML 4.01 Specification describes several possible values for this attribute: “screen”, “tty” (really?), “tv”, “projection”, “handheld”, “print”, “braille”, “aural”, and “all”. And of course, it adds ominously: “Future versions of HTML may introduce new values and may allow parameterized values.”

The spec also alludes to the CSS @media rule, which allows you to style conditionally based on media type within a stylesheet. In that case, you would specify media=”all” in the “link” tag. That would actually be a better option in my case. How about yours?