Опубликовано: 30 октября 2024 г.
Начиная с Chrome 131, вы можете использовать CSS для добавления контента на поля страниц при их печати. В этом посте объясняется модель страницы для постраничного мультимедиа и то, как использовать эту функцию для улучшения вывода на печать с ваших веб-страниц.
CSS включает спецификации, касающиеся постраничного мультимедиа, модуля CSS Paged Media и CSS-контента для постраничного мультимедиа . Они определяют функции, которые используются только при печати страницы (в том числе в формате PDF). Существуют пользовательские агенты, которые поддерживают этот CSS и позволяют создавать книги и другие печатные материалы из HTML и CSS. Однако эта функциональность никогда не поддерживалась должным образом в веб-браузерах, несмотря на то, что нам довольно часто приходится распечатывать или создавать PDF-файлы из приложений.
Chrome и Firefox поддерживают правило @page at. Это правило позволяет вам определить размер страницы, на которой вы печатаете, и размер полей вокруг содержимого. В Chrome 131 вы также можете использовать сгенерированный контент для добавления контента на поля, нацеливаясь на соответствующее правило поля.
Модель страницы
Модель страницы, используемая в постраничных носителях, определяет страничный блок — это ваш лист бумаги. Внутри поля страницы находятся поля страницы , граница страницы , отступы страницы и, наконец, область страницы , где отображается ваш контент. Когда контент распечатывается, он фрагментируется на столько страниц, сколько необходимо для его размещения.
Затем поле страницы разбивается на 16 блоков, каждый из которых имеет соответствующее правило.
-
@top-left-corner -
@top-left -
@top-center -
@top-right -
@top-right-corner -
@left-top -
@left-middle -
@left-bottom -
@right-top -
@right-middle -
@right-bottom -
@bottom-left-corner -
@bottom-left -
@bottom-center -
@bottom-right -
@bottom-right-corner
Размер поля поля
Высота верхнего и нижнего блоков, а также ширина левого и правого блоков определяется размером поля, установленным с помощью @page . Таким образом, угловые блоки имеют фиксированный размер, создаваемый пересечением этих полей. Однако три коробки между каждым углом являются гибкими. Они ведут себя аналогично полям в гибком макете с использованием flex: auto , поэтому они растягиваются, заполняя пространство, но если вы поместите в один длинную строку текста, а в другие ничего не поместите, то блок с текстом вырастет. вместо того, чтобы переносить текст.
Добавление содержимого в поля полей
Чтобы добавить контент в поля полей, используйте контент, сгенерированный CSS, так же, как и в случае с псевдоэлементами ::before и ::after . В этом случае используйте правило, связанное с полем, на которое вы хотите настроить таргетинг. Следующий код CSS добавляет текст «Моя книга» в нижнее левое поле или на правые страницы. Он также стилизует этот текст.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
Помимо строк текста, на полях можно добавлять счетчики страниц. Предопределенный счетчик page содержит текущую страницу. Следующий CSS добавляет его в правый нижний угол правых страниц и в нижний левый угол левых страниц.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
Также имеется счетчик pages , который всегда содержит общее количество страниц.
На что следует обратить внимание при использовании полей страницы
При печати из браузера браузер автоматически добавит некоторое содержимое полей страницы, если для него есть место для отображения. Он сделает это, даже если вы добавили контент. Эти автоматически создаваемые верхние и нижние колонтитулы можно отключить в диалоговом окне печати.
Если вы установите поля на странице на 0 или на такое маленькое значение, что не останется места для верхних и нижних колонтитулов браузера, они не будут отображаться.
В соответствии с концепцией макета страницы по умолчанию в Chromium , если на первой странице вашего печатного документа нет места для автоматического содержимого, это предотвратит отображение содержимого браузера на последующих страницах, даже если на них есть место.
Будущие возможности страничных медиа
Спецификации постраничного мультимедиа включают несколько других функций, описанных в статье «Проектирование для печати с помощью CSS» . Если у вас есть вариант использования какой-либо из следующих функций, добавьте его к связанным ошибкам.
Установить строки
В книгах название текущей главы часто печатается на полях. Этот заголовок не может быть жестко закодирован в вашем CSS, поскольку он меняется по мере вашего продвижения по книге. Свойство string-set позволяет вам установить значение из вашего HTML, чтобы затем использовать его в сгенерированном контенте. Следующий код CSS предполагает, что заголовки глав отмечены тегом <h1> . Он берет содержимое каждого <h1> и помещает его в правом верхнем углу правых страниц. Когда он доходит до следующего <h1> значение полей после этой точки обновляется.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
Ошибка Chromium для string-set и string() .
Перекрестные ссылки
После печати документа ссылки на другие страницы обычно обозначаются номером страницы, на которой можно найти ссылку. Эти перекрестные ссылки можно создать с помощью target-counter . При применении к ссылке ссылка работает для перехода к ссылке в Интернете, при печати отображается номер страницы.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
Ошибка Chromium для перекрестных ссылок .
Сноски
Сноски также являются особенностью спецификаций постраничных носителей. В HTML используйте класс для определения текста, который должен быть сноской, например:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
Затем используйте значение footnote float , чтобы превратить этот текст в сноски. Он будет удален из абзаца при печати документа и отображен в виде сноски.
.fn {
float: footnote;
}