I’ve seen printer stylesheets designed a variety of different ways. But any way you slice it, the most common element in a print stylesheet is usually the display: none; rule. Printer sheets are usually about printing less rather than printing more.
What I do is gang up all the things we don’t want to print in a single block at the top of the sheet. I always know where the “don’t print” stuff is, and removing another thing from the printout is as easy as adding the class or ID selector to the common display: none; rule.
Here’s the “don’t print” block from the Backpack printer stylesheet.
And here’s what it all means:
Screen version
Print version
No header, no sidebar, no utility links, etc. Just the content in the page. Clean and clear.
Matt
on 02 Aug 07Useful CSS trick? Or maybe just a teaser that Open Bar is coming to Backpack?!
Adam T.
on 02 Aug 07You can also work backwards, if that suits you better:
JF
on 02 Aug 07Matt, Open Bar is already part of Backpack.
Ed Knittel
on 02 Aug 07I have been doing this for all of the sites that I develop. I would also like to add that I change the font-family from a sans-serif to a 12pt serif (usually Times New Roman) which might make the information easier to read on paper. As there are no conclusive studies to confirm or deny this I suppose I do it more for personal reasons.
david gouch
on 02 Aug 07Very nice, but why would anyone ever need their Backpack info offline? ;-)
Matt
on 02 Aug 07Shoot… where have I been?!
Ed Knittel
on 02 Aug 07Additionally, I change all text color to #000 (unless it absolutely must be another color. This includes links which I also remove the text-decoration.
*{ color:#000; text-decoration:none; }
noname
on 02 Aug 07I do it the same way, plus black coloring, plus adding href into parents using :after (working in modern browsers), plus !important for display:none is it may be sometimes overwritten if sharing the stylesheet adamt T. Of course you can NOT, as plenty of elements are not block elements!
Vic
on 02 Aug 07Using different style sheets for different media is always a good idea. I’ve been using this method for some time, and i also suggest using a serif font (Times New Roman looks good on paper) with a high contrast color.
Dan Boland
on 02 Aug 07You’d be amazed (then again, maybe not) by the number of times I’m told “no, I want the print-out to look exactly like it does on screen.”
Mrad
on 02 Aug 07Yeah, I always mean to group the rules that way – but I get caught up in something else and just wind up with a bunch of rules with display: none.
Joshua Melvin
on 02 Aug 07You could also create a .noPrint class, and since elements can have multiple classes applied, just add the class to any element you want to hide. It significantly reduces your CSS file, and doesn’t really add any weight to your HTML.
Christian Romney
on 02 Aug 07I generally don’t like .noPrint for the same reason I don’t like .blue – changing colors becomes harder than it ought to be.
Charles Martin
on 02 Aug 07I also use a reverse of this to add text to a page only in the print version (class=”PrintOnly”). Thus, when I print out a report, I add the company logo and header to the page along with information identifying when the data was compiled on the report (datestamp). This helps when you look at a print out of the report to know when it was run. This method is also useful to identify the content in a way that would be easy for the user to remember where that information was located (other than a cryptic url printed at the bottom of the page).
Anonymosity
on 02 Aug 07Thanks for the tip, Captain Obvious.
Adam Burmister
on 02 Aug 07Charles: I actually do it the reverse way :)
I have a .noprint and .noscreen style set up, so I can control all elements on the page via class names… it’s perhaps a little bit intrusive, but its pragmatic.
Brad Fults
on 03 Aug 07It would be wise to separate each of those selectors out onto its own line, then alphabetize the list. This makes maintenance of CSS much less of a hunt-and-tweak endeavor.
Dennison Uy - Graphic Designer
on 03 Aug 07It’s so simple and easy to do. Bravo!
Darren
on 03 Aug 07Thanks. You’ve just reminded me to start work on print style sheet. I love the example. It shows what a large difference it can make.
Dave
on 03 Aug 07Can we expect the same for Highrise and improved print styles?
Jason
on 03 Aug 07“It significantly reduces your CSS file, and doesn’t really add any weight to your HTML .”
I think 15+ “noPrint”s on every page is going to be a heck of a lot bigger than a single cached big CSS selector.
I’d rather have a big CSS file than every HTML page bloated
John Topley
on 03 Aug 07IE6 only sees the last class when an element has multiple classes.
Stuart Steel
on 07 Aug 07Hi John topley,
That’s just not true – ie6 supports multiple classes on any element – you just can’t select an element via multiple classes
<div class=”class1 class2”></div> is fine
but you can’t select for it in yourr css file using div.class1.class2
I use multiple classes all the time, and they always work in IE6.
This discussion is closed.