@page

Стилевое правило @page позволяет задать стиль при печати документа или для страниц, у которых тип носителя задан как print.

Синтаксис

@page [ { :left | :right | :first } ] { … }
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

Для @page доступен ограниченный набор стилевых свойств: margin (и его производные, вроде margin-top), orphans, widows, break-after, break-before, break-inside.

:left
Задаёт стиль для всех левых страниц при печати.
:right
Задаёт стиль для всех правых страниц при печати.
:first
Задаёт стиль для первой страницы при печати.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>@page</title> <link rel="stylesheet" href="/example/css/print.css" media="print"> </head> <body> <h1>Метод ловли льва в пустыне</h1> <h2>Метод последовательного перебора</h2> <p>Пусть лев имеет габаритные размеры LxWxH, где L — длина льва от кончика носа до кисточки хвоста, W — ширина льва, а H — его высота. После чего пустыню разбиваем на ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва. Учитывая, что лев может находиться не строго на заданном участке, а одновременно на двух из них, клетку для ловли следует делать повышенной площади, а именно 2Lx2W. Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина льва или, что хуже, только его хвост.</p> <p>Далее последовательно накрываем каждый из размеченных прямоугольников пустыни клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура поимки считается завершенной.</p> </body> </html>

Сам файл print.css выглядит следующим образом.

body {
  font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
}
h1, h2, p {
  color: #000; /* Черный цвет текста */
}
@page :first {
  margin: 1cm; /* Поля печати для первой страницы */ 
}
@page :left {
  margin: 1cm 3cm 1cm 1.5cm; /* Поля печати для всех левых страниц */ 
}
@page :right {
  margin: 1cm 3cm 1cm 1.5cm; /* Поля печати для всех правых страниц */ 
}

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

Браузеры

8 12 2 6 18.2 19
37 19 6 18.2

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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