Как заставить пустую страницу в постраничном HTML-документе?

Question

Как заставить пустую страницу в документе HTML? У меня есть титульный лист, после которого происходит принудительный разрыв страницы (правило ниже). Проблема в том, что оставшееся содержимое отображается непосредственно на следующей странице, где я бы хотел, чтобы титульный лист и оставшийся контент были разделены на 1 пустую страницу (на рисунке ниже).

HTML:

<div class=title-page">
  title
</div>

<div class="content">
  blah blah
</div>

CSS:

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

Ожидаемый результат:

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

Я понимаю, что это можно сделать, вставив пустую строку между титульным листом и оставшимся содержимым, а затем указав page-break-after: always; в теме. Вставка пустого div не слишком семантически верна. Есть ли способ достичь того же результата, используя только CSS?

РЕДАКТИРОВАТЬ: В этом случае это также может быть сделано с page-break-after: left;, так как первая страница по умолчанию является левой страницей. Как насчет случаев в середине документа, когда вы не можете быть уверены, что страница, на которой вы находитесь, находится слева или справа. Или когда вы хотите вставить более 1 emtpy страницы. Это все еще можно сделать с помощью CSS?

Answer 1

Метод, который работает в Chrome и IE, но не в Firefox (версия 31), заключается в использовании псевдоэлемента, добавленного в конце первого div и указать разрыв страницы перед ним. Чтобы сделать псевдоэлемент непустым (в противном случае браузеры могли бы объединить разрывы страниц в один), вставьте туда пробел без перерывов:

.title-page:after {
  display: block;
  content: "\A0";
  page-break-before: always;
}

Так как это не работает в Firefox, лучше использовать пустышку div элемент. Обратите внимание, что это не приведет к пустой странице в Firefox, если элемент действительно пуст, <div></div>, Вместо этого поместите туда некоторое содержимое, которое будет отображаться как пустое, например

<div class="empty-page">&nbsp;</div>

(с .empty-page { page-break-after: always; }).

Вы также можете добавить такой фиктивный элемент динамически с помощью JavaScript в коде, запускаемом beforeprint событие.