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.

Published August 02, 2007
Categorized as HTML and CSS
Short URL: https://snook.ca/s/838

Conversation

23 Comments · RSS feed
Frank Manno said on August 02, 2007

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.

Ben said on August 02, 2007

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.

Ben Otero said on August 02, 2007

Stinking brilliante. Thanks.

Daniel said on August 02, 2007

Yep freaking brilliant !!

Anton said on August 02, 2007

*smacks forehead* Oooof.... that's certainyl a "wish-I-would've-thought-of-that" sort of thing.

Brad Dielman said on August 02, 2007

Great tip! Thanks, Jonathan.

Jermayn Parker said on August 02, 2007

Yeah like the others, defiantly a good tip, thanks :)

Katie said on August 02, 2007

Wonderful tip! Thanks :)

Ben Henschel said on August 02, 2007

Wow that's a awesome tip. Thanks!

Dennison Uy said on August 02, 2007

Awesome tip and awesome blog! I never knew it was possible to force a page break before.

Brandon Martus said on August 03, 2007

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. :)

James Mitchell said on August 03, 2007

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.

Mr.Blue said on August 03, 2007

A simple but so useful tip ! Thanks Jonathan.

Darren said on August 04, 2007

Wow thanks for this. I am just about to start work on my print style sheet. I'll deffinitely be using this then!

Gaston said on August 06, 2007

Thanks! A great tip.

Matthew said on August 07, 2007

As always, some of the best solutions are simple, elegant and very effective. Thanks.

David W said on August 09, 2007

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.

Chris C said on August 11, 2007

Whoah! Haha, great rule! I've never heard of it, going to use it :) Thank you!

Ryan said on August 16, 2007

This is absolutely genius! Thanks!

Zeb said on August 17, 2007

Nice trick! Thumbs up :)

Kanwal said on September 09, 2007

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

William said on September 17, 2007

I wish somebody actually had the desire to print one of my blog posts

Brandon Martus said on September 26, 2007

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.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.