How do I force an empty page in HTML document? I have a title page, after which is forced page-break (rule below). The problem is the remaining content is appearing on the directly next page, where I'd want the title page and remaining content to be divided by 1 empty page (pictured below).
HTML:
<div class=title-page">
title
</div>
<div class="content">
blah blah
</div>
CSS:
.title-page {
page-break-after: always;
}
Expected result:
-------
| title |
| |
| 1 |
-------
-------
| |
| |
| 2 |
-------
-------
| blah |
| blah |
| 3 |
-------
I realize it can be done with inserting an empty <div> between title page and the remaining content, then specyfing page-break-after: always; on it. Inserting empty div isn't too semantically correct though. Is there a way to achieve the same result using CSS only?
EDIT: In this case it could also be done with page-break-after: left;, as the first page is a left page by default. What about cases in the middle of the document, where you can't be sure if a page you're on is left or right. Or when you want to insert more than 1 emtpy page. Can it still be done with CSS?
A method that works on Chrome and IE, but not Firefox (version 31), is to use a pseudo-element added at the end of the first div and to specify a page break before it. To make the pseudo-element non-empty (browsers might otherwise combine the page breaks into one), insert a no-break space there:
.title-page:after {
display: block;
content: "\A0";
page-break-before: always;
}
Since this does not work in Firefox, it is better to use a dummy div element. Note that this will not cause an empty page in Firefox if the element is really empty, <div></div>. Instead, put some content there that displays as blank, e.g.
<div class="empty-page"> </div>
(with .empty-page { page-break-after: always; }).
You could also add such a dummy element dynamically with JavaScript, in code triggered by the beforeprint event.