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