Advanced CSS Printing — Using CSS Page Breaks

I like this tip, but I just can’t wrap my head around the fact that a client would print out webpages. I know there are some quirky clients out there, but this one shakes my head. :)

Cool. Didn’t know that. For added semantics, you could apply the class to a horizontal rule tag, thus:

Great info — thanks for posting.

As for why someone would print a webpage… reports, quotes, sale papers, etc.

The majority of the reports going out to our employees is via our intranet and sometimes you need to print them.

Excellent tip. I need to print out web pages all the time for referencing coursework in my A levels and so often it prints out crap.

Nice tip. Could someone please explain how to introduce page breaks in a web page containing Database generated rows? I’m having that problem now, as IE6 and FF2 do not render my report well. IE breaks a row in half, FF does not print the second page.

@Charles: I’ll appreciate if you share.

Hello All. I have added the following definition to my separate Print style sheet:

height: 80%;

This ensures that the database content is not broken at any row. Works well in IE6 but not FF2.

Ideas from here – http://davidwalsh.name/optimizing-your-website-structure-for-print-using-css/

Hey, I printed this article out for use in my webdev cheatsheet binder…printed great (once I removed background images).

Thanks!

Smells a bit like the gmail postal service…. people will use technology the way that best suits them – still hate to think of the paper and ink costs.

@ Kyle: I would’ve thought an ordinary line break (<br>) would be a good candidate for this sort of thing too.

@john
Yeah or a tag ? It can be used to split content in parts… so why not use it for print page breaks.

grom why is he filtering tags… and not just translating them to normal text !!

ok this is very anyoing!! HR TAG is should be! (HR/)

Right. But introducing a .pagebreak class is simply presentational markup. I think that should be avoided. In my print stylesheet i have this:

h1, h2, h3, h4,
h5, h6 {
page-break-after: avoid;
}
table tr, ul, ol {
page-break-inside: avoid;
}

This seems to work reasonable well without enforcing me to add anything what is only presentational markup. If i’d understand this better i could add the “orphans” and “widows” to the stylesheet, but for now it works just acceptable.

And, btw., print paper does not have the same size all over the world. The US “letter” format is different to the European “Din A4″. Fixing the paper size to US letter caused many problems in the past. Those problems should not be repeated nowadays.

I wonder where the flaws are. I was aware of the page-break attribute, but the last time I tested it, it didn’t work in any browsers. Well, time has passed, how is crossbrowser support today?

I tested it in IE7, FF2, Konqueror and Epiphany and it seems to work.

good idea

These are great ideas and I would advise actually printing out your sites when you use this just to make sure. It seems like an easy thing to skip and not test but it does matter

Can anyone please provide a simple sample HTML that can be copy and pasted in one block to try the page-break-inside CSS? I have tried several forms of this including the example web page at http://www.richinstyle.com/test/paged/pagebreakinside.html

None of them seem to work? I tried in IE 7 and Firefox 2.

Any help greatly appreciated guys! ;-)

Stupid! i forgot to mention that it is actually ‘page-break-inside: avoid’ i am having a problem with. Sorry guys.

thanks, great advice. I was having a hard time with this

Smells a bit like the gmail postal service…. people will use technology the way that best suits them – still hate to think of the paper and ink costs.very nice……..

I like this tip, but I just can’t wrap my head around the fact that a client would print out webpages.

I tested it in IE7, FF2, Konqueror and Epiphany and it seems to work.

This is very interesting as I often have this problem, thanks

Excellent tips, thanks. Now how do I prevent a side panel with navigation buttons from printing?

Thank you so much! I’m trying to solve this problem for a while, and finally find your article! It’s indeed a life saver.

Interesting. But what does the word ‘avoid’ do? I have made page breaks work using the tips given, however I have a problem in that I don’t want the banners on the pages to print.
How can I make the printer start from just below the banner?
Awestruck

This is very interesting.thanks

Excellent tips, thanks a lot.

hi,
My web page is too long to print in one A4 size page.I want to print my site’s specification page in to one A4 size page By CSS .Can any one tell me how can I do this?

——-bongoneshian
http://www.gsmyard.com

Gre at tips.thanks

…well and another way to do this is to not do it by yourself. Let the user have it his way by linking your pages directly to a online service like PrintWhatYouLike. This article for instance would look like this

Ok, I have an inkling (pun not intended) to modify that book image to the right to say “Schneier on Squid.”

“The closest the squid industry has to a rock star.”

There are working fine now! Thanks.

This is very interesting as I often have this problem

Thank you so much

Yeah I had to use this for a sales quote project for the retail company I work for. I allowed there to be an unlimited number of items on the printed quote and when it reached a certain number in the PHP loop it would insert a pagebreak line, worked like a charm.

Muizz said: FF does not print the second page

Yeah I ran into this issue on a content site, I found that in the print stylesheet set all items that are to be printed as display: inline. This doesn’t work for every situation but often in FireFox, when it tries to print a very large block level (display: block) item (say the main content portion is to be printed and it has been set to block for screen display purpose), it tries to print it all on one page (one big block). Inline will allow each line to be printed on its own merit and usually splits pages properly.

@myself – That last comment of mine, for getting FF to print properly, it also helps to set that main content as float: none. I honestly don’t remember why but it really helped for me.

So in the stylesheet:

#mainContent { float: none; display: inline; }

I have one customer that absolutely insists his web pages print perfectly. Why? Because he refuses to look at his pages on the screen he tells his employees to print the website for him to look at. And since he looks at pages that way, he believes most of his customers do just this. Needless to say, I’ve learned quite a few tricks to making a website print properly. I’ve already shared methods for making your website content printer-friendly, as well as making your website structure printer-friendly. One important aspect of making your pages printer-friendly is by using CSS/XHTML page breaks.

thank you…

Gre at tips.thanks

Yeah I ran into this issue on a content site, I found that in the print stylesheet set all items that are to be printed as display: inline. This doesn’t work for every situation but often in FireFox, when it tries to print a very large block level (display: block) item (say the main content portion is to be printed and it has been set to block for screen display purpose), it tries to print it all on one page (one big block). Inline will allow each line to be printed on its own merit and usually splits pages properly.

This is very interesting as I often have this problem

Uh, why did yuz estetigi just repeat, word-for-word, exactly what I said a few weeks ago? Dude, at least quote me and add something of value.

It looks like this same person did the same thing to another comment. (yuz estetigi is sac ekimi and also Burun Estetigi) … can you say spam?

Hello all,
I am a bit confused, can u please provide me with steps 1,2,3 like to make my web page printable?

The easiest thing to do is probably to convert PPT to PDF. You can certainly use Camtasia to make a recording of a presentation using your PPT. A good format for vodcasting that is m4v, which will play on video ipods. Here are tutorials for how to do that.

Thank u all, i found it very useful
Allaa

This is pretty handy because we often map users experiences by printing the pages of our site and then following their path through our site. Thanx for that!

Could someone please explain how to introduce page breaks in a web page containing Database generated rows? I’m having that problem now,

@Shawn: Easy, for printable documents (Wikis, Instruction guides, or toilet reading material), or when generating PDF’s from webpages with a PDF printer.

Lots of people still like “Dead Tree”

nice article, thanks for your share..

This is pretty handy because we often map users experiences by printing the pages of our site and then following their path through our site. Thanx for that

Thanks for sharing an article …:))) much fun ….

Stupid! i forgot to mention that it is actually ‘page-break-inside: avoid’ i am having a problem with. Sorry guys.

You are the God.

Great post.Thanks.

I just found out that if you are printing out a largish table with more rows than will fit on a single printed page… Firefox will very helpfully print the your table header (TH tag) on each printed page for you.

I’ve been working on a multi-client research project on redefining employee computing, and I cannot count the number of clients who have locked out social networking sites, even LinkedIn, or simply do not understand the “web2.0 thing.” Even for clients who are a bit more open in their thinking, are looking for “who has done this already…prove it.”

Clients… :(
One of mine did ask me if he could get the forms from his website to be faxed to him!

thank you very much. succesfull article

Thank you for articles

Stupid! i forgot to mention that it is actually ‘page-break-inside: avoid’ i am having a problem with. Sorry guys.

I just found out that if you are printing out a largish table with more rows than will fit on a single printed page… Firefox will very helpfully print the your table header (TH tag) on each printed page for you.

Stupid! i forgot to mention that it is actually ‘page-break-inside: avoid’ i am having a problem with. Sorry guys.

Stupid! i forgot to mention that it is actually ‘page-break-inside: avoid’ i am having a problem with.

@Siegfried: Ciao non so chi tu sia ma immagino Maxim, se e’ cosi son contento ……….

@Siegfried:

Why this web site do not have other languages support?

@fibercement: I sell stuff online – I want customers to be able to print out the invoice off the webpage when complete. Page break let’s me separate page 2 for terms and conditions… That’s one instance, I could think of another 10-15 instances where someone would need to print out a webpage…

This is pretty handy because we often map users experiences by printing the pages of our site and then following their path through our site. Thanx for that!

I just found out that if you are printing out a largish table with more rows than will fit on a single printed page… Firefox will very helpfully print the your table header (TH tag) on each printed page for you