I don't have a general solution but I did manage to get page breaks working after some fiddling. Seems like UIWebView is a little finicky with where page-break-before/page-break-after
can be applied. Taking a hint from this question I decided to try adding my page break styles to the h1
elements instead of divs
and to my surprise the pagebreaks appeared. Here's what it looks like now:
<style type="text/css">
@media print {
.pagebreak-before:first-child { display: block; page-break-before: avoid; }
.pagebreak-before { display: block; page-break-before: always; }
}
</style>
...
<body>
<h1 class="pagebreak-before">Page 1</h1>
<p>Lorem ipsum dolor sit amet...</p>
<h1 class="pagebreak-before">Page 2</h1>
<p>Lorem ipsum dolor sit amet...</p>
<h1 class="pagebreak-before">Page 3</h1>
<p>Lorem ipsum dolor sit amet...</p>
</body>
I also added a duplicate of the .pagebreak-before
selector, now having a :first-child
pseudo-element. This is to prevent a blank page at the beginning of the document.