Печать html-документов

Опубликовано: 30 июня 2015 Обновлено: 6 января 2020 0 комментариев

1. Правило @page

Блок страницы состоит из области страницы, где располагается содержимое и области полей, окружающей область страницы. Правило @page используется для изменения некоторых css-свойств при печати документа. Изменить можно только поля элемента margin, а также задать разрывы страниц в указанном месте.

@page {
margin: 2in;
}

Можно задавать отдельные поля документа внутри правила @page, такие как margin-top, margin-right, margin-bottom, margin-left:

@page {
margin: 1in;
margin-left: 1.5in;
}

2. Разрывы страниц

Управлять разрывами страниц можно с помощью свойств page-break-before, page-break-after и page-break-inside. Данные свойства применяются к блочным элементам, для которых свойство position имеет значение relative или static.

page-break-before
Значения:
auto Значение по умолчанию, задает автоматические разрывы страниц.
always Всегда добавляет разрыв страницы перед элементом.
avoid Отменяет размещение разрыва перед элементом, если это возможно.
left Добавляет один или два разрыва страниц перед элементом, чтобы следующая страница форматировалась как левая страница. Элемент будет печататься, начиная с верха левой страницы, т.е. на странице слева от корешка. При двусторонней распечатке будет выводиться на оборотной стороне листа бумаги.
right Добавляет один или два разрыва страниц перед элементом. Элемент будет печататься, начиная с верха правой границы. Следующая страница будет форматироваться как правая страница.
inherit Наследует это свойство от родительского элемента.

Синтаксис:

@media print {
h1 {page-break-before: always;}
}
page-break-after
Значения:
auto Значение по умолчанию, задает автоматические разрывы страниц.
always Всегда добавляет разрыв страницы после элемента.
avoid Отменяет добавление разрыва после элемента, если это возможно.
left Добавляет один или два разрыва страниц после элемента так, чтобы следующая страница форматировалась как левая страница. Элемент будет печататься, начиная с верха левой страницы, т.е. на странице слева от корешка. При двусторонней распечатке будет выводиться на оборотной стороне листа бумаги.
right Добавляет один или два разрыва страниц после элемента так, чтобы следующая страница форматировалась как правая страница. Элемент будет печататься, начиная с верха правой границы.
inherit Наследует это свойство от родительского элемента.

Синтаксис:

@media print {
footer {page-break-after: always;}
}

Свойство page-break-inside говорит браузеру, может ли страница разрываться внутри элемента или нет. Но в случае, если элемент оказывается длиннее страницы, то разрыв неизбежен.

page-break-inside
Значения:
auto Значение по умолчанию. Автоматический разрыв страницы.
avoid Запрещает разрыв страницы внутри элемента, если это возможно.
inherit Наследует это свойство от родительского элемента.

Синтаксис:

@media print {
img {
display: block;
page-break-inside: avoid;
}
}

Поделиться: