@page

Правило @page может содержать только описания страниц и правила полей правила полей. Следующие описания поддерживаются по крайней мере одним браузером:

margin

Устанавливает поля страницы. Отдельные свойства полей margin-top, margin-right, margin-bottom и margin-left также могут быть использованы.

page-orientation

Устанавливает ориентацию страницы. Это не влияет на расположение элементов на странице; поворот применяется после макета в выходном средстве.

size

Устанавливает целевой размер и ориентацию страницы, определяющей область. В общем случае, когда один элемент страницы отображается на одном листе бумаги, он также указывает размер целевого листа.

Спецификация упоминает следующие свойства CSS, которые должны применяться к блокам страниц с помощью правила @page. Однако они не поддерживаются ни одним пользовательским агентом пока.

Правило @page определяет свойства блока страницы. К правилу @page можно получить доступ через интерфейс модели CSS CSSPageRule.

Правило @page позволяет пользователю назначить имя правилу, которое затем вызывается в объявлении с помощью свойства page.

page

Позволяет селектору использовать пользовательскую именованную страницу

@page = 
  @page <page-selector-list>? { <declaration-rule-list> }  

<page-selector-list> = 
  <page-selector>#  

<page-selector> = 
  [ <ident-token>? <pseudo-page>* ]!  

<pseudo-page> = 
  ':' [ left | right | first | blank ]  

Где <page-body> включает:

• page-properties
• page-margin properties

и <pseudo-page> представляет следующие псевдоклассы:

• :blank
• :first
• :left
• :right

Правила полей используются внутри правила @page. Они каждый нацелены на разные разделы печатной страницы, стилизуя область печатной страницы в соответствии со значениями свойств, заданными в блоке стиля:

@page {
  @top-left {
    /* page-margin-properties */
  }
}

@top-left нацелен на верхний левый угол документа и применяет изменения, основанные на свойствах page-margin.

Другие правила полей включают:

@top-left-corner
@top-left
@top-center
@top-right
@top-right-corner
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner
@left-top
@left-middle
@left-bottom
@right-top
@right-middle
@right-bottom

Свойства отступа страницы — это набор свойств CSS, которые можно задать в любом отдельном правиле margin. Они включают:

Именованные страницы позволяют выполнять макетирование на странице и добавлять разрывы страниц в режиме объявления при печати.

Именованные страницы можно применить, используя свойство page. Это позволяет пользователю создавать различные конфигурации страниц для использования в макетах печати.

Пример этого можно найти в примерах page.

Этот пример демонстрирует, как разделить <section> на отдельные страницы в формате landscape, при этом каждая страница имеет отступ 20% при печати.

HTML

<button>Print Webpage</button>
<article>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
</article>

CSS

@page {
  size: landscape;
  margin: 20%;
}

section {
  page-break-after: always;
  break-after: page;
}

@media print {
  button {
    display: none;
  }
}

JavaScript

const button = document.querySelector("button");

button.addEventListener("click", () => {
  window.print();
});

Результат

Нажатие кнопки печати запустит диалоговое окно печати с разделением разделов html на отдельные страницы.

Обратитесь к различным псевдоклассам @page для примеров.

• :blank
• :first
• :left
• :right

• Дескриптор @page size
• Свойство page
• См. тикет [META] CSS Paged Media Module Level 3 в Bugzilla для отслеживания прогресса по теме (счётчики на основе страниц и т.д.)
• Модуль CSS paged media
• Paged.js: полифилл для W3C paged media