One of the questions we regularly get is about page breaking. How does Webkit decide when the content is broken up into separate pages and how can you prevent that yourself?
First of all – if you have a lot of content, which normally spans multiple pages, you have a few options. First of all – you can set a different (bigger) page format (like A3, A2 or something) to prevent page breaking all together. Or you could apply the ‘fit to single page’ switch that we have developed. That would render one long page and you wouldn’t have to worry about page breaking at all anymore.
If you choose not to do those things, then you have to take into account that Webkit will start creating page breaks. It does so more or less arbitrarily. “Ouch” I hear you thinking. And that can indeed be uncomfortable.
You have to understand that any rendering engine continuously has to calculate which page can contain which content and has to take a lot of things into account, like the page dimensions and the content dimensions. The content dimensions in turn have many parameters – e.g. div sizing, font sizing, image sizes etc. Especially images will often make a rendering engine break the page before or after.
Now if you would like to be in control of page breaking yourself, you can apply an extra DIV at any point where you’d like to have a page break. You’d style that DIV with a class that incorporates a page break. That class, which we will call break, would look something like this:
<style type="text/css" media="screen,print">
.break {
display: block;
clear: both;
page-break-after: always;
}
</style>
You can see we’re using the page-break-after property to force the page break.
Now if you want to apply this, you’d add a DIV of class break in your HTML content and you’re ready to go.
Example
Suppose you’d like to create a two page PDF, of which the first page only says ‘Hello World!’ and the second page says ‘Goodbye World!’. You can use the following PDF to do so and force the page break with the DIV.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css" media="screen,print">
.break {
display: block;
clear: both;
page-break-after: always;
}
</style>
</head>
<body>
Hello World!
<div class="break"></div>
Goodbye World!
</body>
</html>
If you want to try this, then just copy and paste this HTML in our raw HTML to PDF converter.It will give you a PDF with two pages as intended and you can keep playing around with the content to get more examples yourself.
We hope this helps you create better PDFs and you won’t have to break your head anymore while doing it!
Matt
Occasionally a page break can occur in the middle of a table row.
I have tried “page-break-inside: avoid;” on the whole table, and that seems to be supported (the table starts a new page if it is too big to fit on the current page).
The problem is that some tables are too large to fit on one page, and the ideal would be to split at the start of a new row. I have tried “page-break-inside: avoid;” on both the table row and cell elements, but I still get breaks between rows.
Are there any tricks you know of that can make this work?
We are generating our pages dynamically based on a user picking what data to show in the table, and so are looking for a general solution to the problem.
Dan
Hi Matt, thanks for taking the time to reply. In general page breaking indeed is quite difficult and especially with tables. Although tables can be a good way of structuring data we’d recommend you to have a look at accomplishing the same layout with general DIVs and other CSS statements. If you keep content in paragraphs together you might have more success.
Jason Davis
Worked great on my HTML file saved as PDF. Made my page breaks at just the right places! thanks for sharing