☰

page-break-before saves the day

on HTML/CSS

I was thrust into a bit drama a couple of weeks ago at work, it was basically regarding a PDF document that got generated from our ASP.NET MVC code base. The business wanted a certain content in the document to always appear on a new page. The code that generated the document hadn’t been touched for years. We used Pechkin to convert HTML to PDF. My initial thought was to create a seperate Razor view that contained the content, merge it with the rest of the HTML and then convert the result to PDF.

It seemed there was an easier way to do this.

Amazingly enough, from the HTML itself you can define which parts you want on a new printed page. HTML is capable of determining a page break, and you can do this in different orders. Say hello to:

page-break-before
page-break-after
page-break-inside

In my case I was interested in page-break-before, as I wanted to break the page just before displaying the content. Setting page-break-before to always will do just that. Here is an example usage:

<div style="page-break-before: always;">
<!---content--->
</div>

You’d want to put this in a LESS/CSS class so you can use it more generally in your solution.