How to force an empty page in a paged HTML document?

Tags: html,css,css-paged-media

Problem :

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).


<div class=title-page">

<div class="content">
  blah blah


.title-page {
  page-break-after: always;

Expected result:

| title |
|       |
|     1 |
|       |
|       |
|     2 |
| blah  |
| blah  |
|     3 |

I realize it can be done with inserting an empty 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?

Solution :

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">&nbsp;</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.

    CSS Howto..

    How to center without losing it's function

    CSS or Javascript href hover (or mouseover) showing additional clickable links

    Best Practice (jQuery, CSS): How to initialize hidden elements that will toggle visible?

    How to create a pixel perfect divider using css border [closed]

    How can I delete these arrows?

    How to select the last div in css

    How to set the css style display property in json success function

    How to load chosen alternative css as default css? [closed]

    How to refer css style from another?

    Javascript: how to check/delete a css style tag in the head of the document

    How do I optimize a very loooong page with TONS of images on it?

    How to get all images(overlapping allowed) in one line using css?

    How do I install SASS with

    How do I center elements on a page using percentage widths?

    How to detect the form is blank or not by jQuery

    How do I make a line break between divs inside a box?

    how the rises up and down button is made?

    CSS 'schema' how-to

    jQuery or CSS - How do you make a link in a table row appear underlined even when the cursor is in a neighbouring cell?

    How to pop a dialog box /iframe/Lightbox like one below above the webpage content [closed]

    Use ajax to show-hide only a subset of image

    How can I define styles for individual cells in a SharePoint 2007 topnav?

    How to make css notifications without jQuery? [closed]

    How to make read more option with html/CSS?

    how to make target link work giving different css properities

    How to display row of images in a repeater control vertically instead of horizontally

    Show a box with text when hovering an image

    How to apply custom css class to extjs grid column, and remove it with delay?

    How to unfold or close content in html/JS - always assigned to different id

    How to use css transform-origin to show a circle of playing cards (rectangles)?