linear

[« New greymatter 1.3 template set: flyby] [Main Index] [CaseMod de Verdade »]

control printed pages (to a degree) with @media CSS rules

01/15/2004

Sometimes people print pages. I know I do. And when the designer has gone out his way to make an obnoxiously complex layout using the usual tables and graphics, it often spills off the page and becomes an unreadable mess. In short, what looks wicked on the screen often sucks on paper.

Wouldn't it be cool to have a way to adjust your layout a little bit to accomodate for the limitations imposed by print? After all, print users deserve some respect too. Well, CSS offers you a way to accomplish this, and it's actually pretty well supported, and hence a Good Idea.

Some trivia: screen resolution tends to be about 72dpi (dots per inch) for PCs and 96dpi for Macs and some newer PCs. Printers print from 300dpi on up. But a graphic gets scaled when you print to account for the difference. So if you have the usual table-based stuff, with a lot of images, you can get into trouble if the scaled width of those graphics exceeds what fits into the page margins. And I see it all the time.

Try clicking this and then printing it, and then measuring it. The upper black mark is 96px wide on screen, and today most peecee users will see that as about an inch (depends on your monitor). Print it, and you ought to get an inch. If you're at 72dpi, the lower mark is 72px and ought to look like an inch. When you print, the browser scales the image.

Okay, now a little math. I'm at 96dpi myself, so if I want to wedge my layout into an 8-1/2x11" page with 1/2" margins, I have to keep it under (7.5 * 96 = ) 720px wide. At 72dpi it gets even more pessimistic.

So, one way to go is to cram all the navigational stuff and content into the 720px width dictated by the print restrictions. And a lot of big sites adopt this approach. Another way to go is to turn off the navigation sidebar for printers. Since you can't click on a printed page, why even present the navigation links?

Alright, so since nav links on the left in a vertical stack makes a popular layout (cf. CNN), wouldn't it be cool to "hide" them in the printed version of the page? That's the basic idea behind this approach, although it can be used to hide any elements you choose, or reveal any elements you choose.

Please consider the following demo:

The trick here is to use the print preview function (in IE5.5+ and newer mozillas) to get a glimpse of what happens without wasting paper/toner. You'll see one of the two divs get hidden in the print preview, and that carries through to the actual printout too. How is this trick accomplished? with CSS @media rules.

A @media rule is a CSS rule like any other, but applies only to a specific type of media. CSS spec defines several types of media, but the two you are most likely interested in are print and screen. Do I need to explain the distinction? There are others, but they may not be especially relevant until such time as other user-agents arrive on the scene, or outside the context of certain specialized user-agents (such as screen readers or braille printers).

OK, on to the nuts and bolts. If you want to control the print layout separately from the on-screen layout, use a @media print rule to do it. The stylesheet for the demo is as follows:

<style type="text/css">
div {
border: 2px outset;
}
@media print {
.nonprintable {
display: none;
}
}
</style>

The nonprintable rule inside the @media print rule applies to all elements whose class attribute equals nonprintable. With this one rule, we now just need to modify any element on our page by setting class="nonprintable" for that element, and it won't show up, thanks to the display:none; declaration in our rule.

The demo was pared down to the essentials to keep you focused on the concept. But to see the case I was discussing (hiding the left navbar) in action, I invite you to print preview this page.

The @media print rule in my styleseet does a handful of things to tune up the layout for print:

Which I hope should show that you can tune the layout up for printers to whatever extent you deem appropriate using this mechanism. Happy printing!


text, scripts and images copyright © 2001-2011 . All rights reserved.