Creating a Page Break
The folks over at 37signals have a blog post today about print style sheets. Basically, just add everything you don't want to print into one statement and set it to display:none. I do the same thing here on Snook.ca.
I have an extra little tip that's also very applicable to those who run blogs: force a page break before the comments.
#comments {page-break-before:always;}I do this so that people have the option to print the article with or without the comments. If they print just the article then it can stand alone in a nice clean package.
Conversation
Hey Jonathan,
Sweet tip! I had never thought of using the "page-break-before" rule for something like this. And reducing people's paper/printing costs is a definite bonus!
Thanks for the heads-up.
Yep, thats a good one J. I use the page-break-after on one of our applications that prints out a bunch of invoices. Forcing the page break after each one.
Stinking brilliante. Thanks.
Yep freaking brilliant !!
*smacks forehead* Oooof.... that's certainyl a "wish-I-would've-thought-of-that" sort of thing.
Great tip! Thanks, Jonathan.
Yeah like the others, defiantly a good tip, thanks :)
Wonderful tip! Thanks :)
Wow that's a awesome tip. Thanks!
Awesome tip and awesome blog! I never knew it was possible to force a page break before.
I was just thinking yesterday .. "I wonder if I can put a page break on this page with CSS..." and found the 'page-break-before' ... what a coincidence. :)
Very cool. Thanks for sharing. I could definitely see uses for this in a 'print what you want' kind of way. Offering 'print article with or without comments' buttons for your visitors and users to actually select what they'd desire to be printed. Granted it'd take slightly more programming, but nice CSS tip.
A simple but so useful tip ! Thanks Jonathan.
Wow thanks for this. I am just about to start work on my print style sheet. I'll deffinitely be using this then!
Thanks! A great tip.
As always, some of the best solutions are simple, elegant and very effective. Thanks.
I've been using this for about two years now. I'm always surprised though when business put no effort into making their website look good for print.
Whoah! Haha, great rule! I've never heard of it, going to use it :) Thank you!
This is absolutely genius! Thanks!
Nice trick! Thumbs up :)
Very simple tip. Thanks Snook! I shared this same tip with Darren over at ProBlogger. Just thought I'd let you know also.
http://www.problogger.net/archives/2007/09/10/new-printing-css-at-problogger/#comment-1694871
I wish somebody actually had the desire to print one of my blog posts
One thing to mention here: this won't work (in FireFox, at least) if you're doing a page break inside of a table. This drove me nuts for a good hour this afternoon -- once I got rid of the table all was fine.