CSS-правило @page

Правило @page — это CSS-правило, используемое для изменения различных параметров печатных страниц. Оно задаёт и изменяет размеры, ориентацию и поля страницы. Правило @page можно использовать для выбора всех страниц в распечатке или их подмножества с помощью различных псевдоклассов.

Синтаксис

/* Targets all the pages */
@page {
  size: 8.5in 9in;
  margin-top: 4in;
}

/* Targets all even-numbered pages */
@page :left {
  margin-top: 4in;
}

/* Targets all odd-numbered pages */
@page :right {
  size: 11in;
  margin-top: 4in;
}

/* Targets all selectors with `page: wide;` set */
@page wide {
  size: a4 landscape;
}

@page {
  /* margin box at top right showing page number */
  @top-right {
    content: "Page " counter(pageNumber);
  }
}

Свойства страницы

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

margin

Задаёт поля страницы. Также можно использовать отдельные свойства полей: margin-top, margin-right, margin-bottom и margin-left.

page-orientation

Задаёт ориентацию страницы. Это не влияет на макет страницы: поворот применяется после создания макета в выходном формате.

size

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

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

Описание

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

Связанные свойства

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

page

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

Формальный синтаксис

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

• свойства страницы
• свойства полей страницы

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

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

Правила полей

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

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

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

Другие правила полей:

@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-свойств, которые можно задавать в любом отдельном правиле полей. К ним относятся:

Именованные страницы

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

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

Пример можно найти в примерах для page.

Примеры

Изменение ориентации страницы с помощью свойства size

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

<button>Print page</button>
<article>
  <section>
    <h2>Header one</h2>
    <p>Paragraph one.</p>
  </section>
  <section>
    <h2>Header two</h2>
    <p>Paragraph two.</p>
  </section>
  <section>
    <h2>Header three</h2>
    <p>Paragraph three.</p>
  </section>
</article>

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

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

@page {
  size: landscape;
  margin: 2cm;
}

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

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

body {
  font-family: "Helvetica", sans-serif;
  background-color: silver;
}

article {
  width: 100%;
}

section {
  display: grid;
  background-color: white;
  border-radius: 0.6rem;
  justify-items: center;
  padding: 1rem;
  width: 50%;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  margin: 0 auto;
  margin-block-end: 1rem;
  border: 1px dashed;
}

Примеры псевдоклассов @page

Примеры различных псевдоклассов правила @page см. здесь.

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

Спецификации

Совместимость с браузерами

См. также

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