Html – Controlling CSS page breaks when printing in Webkit

csshtmlwebkit

I'm attempting to improve the appearance of html documents printed using Webkit, in this case by exerting some control over where page breaks occur.

I'm able to insert page breaks where I need using:

page-break-after: always;

However, I can't find a way to avoid page breaks being inserted in the middle of items. For example, I have html tables that should not be split in the middle across multiple pages. I had the impression that 

page-break-inside: avoid;

would prevent a page break from being inserted inside the element, but it doesn't seem to be doing anything. My code looks like:

.dontsplit { border: 2px solid black; page-break-inside: avoid; }

<table class="dontsplit">
    <tr><td>Some title</td></tr>
    <tr><td><img src="something.jpg"></td></tr>
</table>

Despite the page-break-inside: avoid directive I still get the table split between the first and second row into separate pages.

Any ideas?

Best Answer

Downloaded a recent binary of wkhtmltopdf http://code.google.com/p/wkhtmltopdf/, and the following seems to work.

.dontsplit { border: 2px solid black; page-break-inside: avoid; }

<table>
  <tr><td><div class="dontsplit">Some title</div></td></tr>
  <tr><td><div class="dontsplit"><img src="something.jpg"></div></td></tr>
</table>

reference: http://code.google.com/p/wkhtmltopdf/issues/detail?id=9#c21

Prudent to put margin, and padding to zero on the td, and place any on the div, otherwise you'll get "edges" making it over the folds

Related Topic