Опубликовано: 30 октября 2024 г.
Начиная с Chrome 131, вы можете использовать CSS для добавления контента к полям страниц при печати. В этой статье объясняется модель страницы для постраничных медиафайлов и как использовать эту функцию для улучшения качества печати ваших веб-страниц.
CSS включает в себя спецификации, касающиеся постраничной обработки медиаконтента: модуль CSS Paged Media и компонент CSS Generated Content for Paged Media . Они определяют функции, которые используются только при печати страницы (включая PDF). Существуют пользовательские агенты, поддерживающие этот CSS и позволяющие создавать книги и другие печатные материалы из HTML и CSS. Однако эта функциональность никогда не была хорошо поддержана в веб-браузерах, несмотря на то, что нам довольно часто приходится печатать или создавать PDF-файлы из приложений.
Chrome и Firefox поддерживают правило @page at-rule. Это правило позволяет определить размер страницы, на которую вы печатаете, и размер полей вокруг содержимого. Начиная с Chrome 131, вы также можете использовать сгенерированное содержимое для добавления контента к полям, указав соответствующее правило margin at-rule.
Модель страницы
В постраничной печати используется модель страницы, определяющая блок страницы — это ваш лист бумаги. Внутри блока страницы находятся поля страницы , рамка страницы , отступы страницы и, наконец, область страницы , где отображается ваш контент. При печати контент разбивается на столько страниц, сколько необходимо для его размещения.
Затем поля страницы разделяются на 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 . В данном случае используйте правило `at`, относящееся к полю, на которое вы хотите воздействовать. Следующий 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>
Затем используйте значение параметра ` float для footnote , чтобы преобразовать этот текст в сноску. При печати документа он будет удален из абзаца и отображен в виде сноски.
.fn {
float: footnote;
}