CSS Printing: Avoiding cut-in-half DIVs between pages?

Question

I'm writing a plug-in for a piece of software that takes a big collection of items and pops them into HTML in a WebView in Cocoa (which uses WebKit as its renderer, so basically you can assume this HTML file is being opened in Safari).

The DIVs it makes are of dynamic height, but they don't vary too much. They're usually around 200px. Anyway, with around six-hundred of these items per document, I'm having a really rough time getting it to print. Unless I get lucky, there's an entry chopped in half at the bottom and top of every page, and that makes actually using printouts very difficult.

I've tried page-break-before, page-break-after, page-break-inside, and combinations of the three to no avail. I think it might be WebKit not properly rendering the instructions, or maybe it's my lack of understanding of how to use them. At any rate, I need help. How can I prevent the cutting-in-half of my DIVs when printing?

Solution 1

Using break-inside should work:

@media print {
  div {
    break-inside: avoid;
  }
}

It works on all major browsers:

• Chrome 50+
• Edge 12+
• Firefox 65+
• Opera 37+
• Safari 10+

Using page-break-inside: avoid; instead should work too, but has been exactly deprecated by break-inside: avoid.

Solution 2

page-break-inside: avoid; gave me trouble using wkhtmltopdf.

To avoid breaks in the text add display: table; to the CSS of the text-containing div.

I hope this works for you too. Thanks JohnS.

Solution 3

Only a partial solution: The only way I could get this to work for IE was to wrap each div in it's own table and set the page-break-inside on the table to avoid.

Solution 4

page-break-inside: avoid; definitely does not work in webkit, in fact has been a known issue for 5+ years now https://bugs.webkit.org/show_bug.cgi?id=5097

As far as my research has gone, there is no known method to accomplish this (I am working on figuring out my own hack)

The advice I can give you is, to accomplish this functionality in FF, wrap the content that you don;t want to break ever inside a DIV (or any container) with overflow: auto (just be careful not to cause weird scroll bars to show up by sizing the container too small).

Sadly, FF is the only browser I managed to accomplish this in, and webkit is the one I am more worried about.

Solution 5

In my case I managed to fix the page break difficulties in webkit by setting my selected divs to page-break-inside:avoid, and also setting all elements to display:inline. So like this:

@media print{
* {
    display:inline;
}
script, style { 
    display:none; 
}
div {
    page-break-inside:avoid;
}

}

It seems like page-break-properties can only be applied to inline elements (in webkit). I tried to only apply display:inline to the particular elements I needed, but this didn't work. The only thing that worked was applying inline to all elements. I guess it's one of the large container div' that's messing things up.

Maybe someone could expand on this.

View more solutions

Comments

[X-Istence]

Provide a sample document with the issue you are seeing and maybe we can help!

[Travis J]

I answered a very similar question about avoiding cutting divs in half here: stackoverflow.com/a/14348953/1026459

[Ujjwal Singh]

Note: This property can NOT be used on absolutely positioned (and apparently also on inline-block) elements.

[ʍǝɥʇɐɯ]

This should work with Webkit. However you may need to put in a few extra divs styled for print with page-break-after: always; after ~ half a dozen of your regular divs.

[NotMe]

@easwee: thanks. The downvote happened at the same time inquisitive_web_developer put a bounty on the question. My guess is that s/he didn't like it. ;)

[Dave]

Beautiful! You're a champion; I've been looking for a way to do this in wkhtmltopdf, which doesn't support page-break-inside: avoid; properly. Finally I have a decent workaround.

[cmc]

Tested page-break-inside in wkhtmltopdf in version 0.11 and it works.

[Greg]

It should work. But it doesn't. See en.wikipedia.org/wiki/… for browser support.

[Linus Unnebäck]

Works in Safari 6 :) which is in developer preview now

[T. Brian Jones]

Works in Chrome V 27.0.1453.116

[Admin]

Works in Netscape too. Thanks!

[Paul Marti]

Tested with wkhtmltopdf 0.12.2.1. Div inside tables no longer needed, just put page-break-inside: avoid on div selector. Works!

[FrenkyB]

Why you need media print? Is it the same if media print is not used and rule is applied directly on div?

[vzr]

@FrenkyB you are in right, this rue is applicable only on print viewport therefore it's not mandatory to keep it within media query

[Jay Dadhania]

I had almost given up on the unexplained spaces that appeared here and there when using page-break-before: always; on <div> elements. Searched through an ocean of SO Posts, articles, official docs and whatnot. Nothing helped. But you, my friend, finally came with what I exactly needed! Can't thank you enough, man!! I wish I could get you a coffee at least, much love from India!

[Ujjwal Singh]

Apparently it does not work on inline-blocks either

[Naun Lemos]

For all new browser this solution works. See caniuse.com/#search=page-break-inside

[Soul Reaver]

according to MDN, bage-break-inside is replaced with break-inside, but neither of these two is a living standard yet. best would be to use both for better support. Links: developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside developer.mozilla.org/en-US/docs/Web/CSS/break-inside

[Mr. Pyramid]

This is the answer! however, it will work better with @media print but that depends on requirement.

[forvas]

Yeah, I am another Odoo developer who has been rescued by you. Thank you!