Force sections of your webpage to print on separate pages

I recently created a “Print Portal” for a client’s site.  They wanted to be able to print all (or some) of their WordPress pages to a single PDF.  This is actually pretty simple to accomplish, just loop through all of the pages in WordPress to create a table of contents, allow the user to select parents, children, categories, tags, or all of the pages and then once selected send an ID (or multiple) to another page which loops through all of those pages and styles them for print.

The problem

But anyway…. the problem I encountered was once the user goes to print to a PDF then the pages would just print one after another with no regard for the print page breaks.  I considered using JavaScript to dynamically measure and add margins to the tops of each section to push them onto new pages, but that just sounded like a disaster.

The solution

That’s when I came across this little gem:

Introducing… CSS’s very own..

page-break-before: always;


.page{
page-break-before: always;
}

There’s also page-break-after and page-break-inside, for any mofos who are feeling particularly crazy.

Here’s some more info: https://developer.mozilla.org/en-US/docs/CSS/page-break-before

Feel free to add your comment..

Your email address will not be published.