Использование CSS для форматирования документов для печати

Дядя Влад

Если вы когда-либо распечатывали бронирование билетов или маршруты до отеля из Интернета, вы, вероятно, были менее чем впечатлены результатами. Поэтому вы можете не знать, что печатные документы можно стилизовать так же, как и на экране, используя каскадные таблицы стилей (CSS).

Разделение проблем

Ключевое преимущество CSS – отделение содержимого от представления. Проще говоря, это означает вместо очень старомодной стилистической разметки, такой как:

 <font size="7"><b>Heading</b></font>

Мы используем семантическую разметку:

 <h1>Heading</h1>

Это не только намного чище, но и означает, что наша презентация отделена от нашего контента. Браузеры отображают элементы h1 в виде большого жирного текста по умолчанию, но мы можем изменить этот стиль в любое время с помощью таблицы стилей:

 h1 { font-weight: normal; }

Собирая эти объявления стилей в отдельном файле и ссылаясь на этот файл из нашего HTML-документа, мы можем еще лучше использовать разделение. Таблицу стилей можно использовать повторно, и мы можем изменить этот единственный файл в любое время, чтобы обновить форматирование в каждом документе, который его использует.

Включение таблицы стилей печати

Аналогично включению таблицы стилей экрана мы можем указать таблицу стилей для печати. Таблица стилей экрана обычно включается так:

 <link href="base.css" rel="stylesheet" />

Однако дополнительный атрибут, media , позволяет выполнять таргетинг на основе контекста, в котором отображается документ. По умолчанию предыдущий элемент эквивалентен:

 <link href="base.css" rel="stylesheet" media="all" />

Это означает, что таблица стилей будет применяться для любого носителя, на котором отображается документ. Однако атрибут media также может принимать значения print и screen:

 <link href="print.css" rel="stylesheet" media="print" />

В этом примере таблица стилей print.css будет использоваться только при распечатке документа. Это очень полезный механизм. Мы можем собрать все общие стили (например, семейство шрифтов или межстрочный интервал) в таблице стилей, которая применяется ко всем носителям, а форматирование, специфичное для носителей, в отдельных таблицах стилей. Опять же, это еще один способ разделения ответственности.

Некоторые примеры объявлений стилей

Чистый фон

Вы почти наверняка не захотите тратить чернила на печать красочного фона или фонового изображения. Начните с сброса любых значений по умолчанию для этих значений, которые могли быть установлены в вашем документе:

 body {
 background: white;
 color: black;
 }

Вы также можете запретить печать фоновых изображений – они должны быть декоративными и, следовательно, не являться обязательной частью вашего контента:

 * {
 background-image: none !important;
 }

Связанный: Как установить фоновое изображение в CSS

Контроль маржи

Еще один очевидный момент, который следует учитывать при печати, – это поля страницы. Хотя CSS предоставляет средства для установки размера полей, вы должны помнить, что ваш браузер и принтер также могут влиять на настройки полей.

Например, в диалоговом окне печати Chrome есть параметр поля со значениями, включая none и custom, который переопределит все, что указано через CSS:

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

 @page {
 margin: 2cm;
 }

CSS также имеет возможность для более сложных макетов печати, таких как изменение поля в зависимости от того, является ли страница нечетной (справа), четной (слева) или титульной страницей.

К сожалению, это плохо поддерживается, особенно опция титульной страницы, но ее можно использовать в минимальной степени. Следующие стили создают страницы с немного большими нижними полями, чем верхние, и немного большими полями по внешнему краю страницы, чем корешок:

 @page {
 margin-left: 20mm;
 margin-right: 20mm;
 margin-top: 40mm;
 margin-bottom: 50mm;
 }
 @page :left {
 margin-left: 30mm;
 }
 @page :right {
 margin-right: 30mm;
 }

Скрытие нерелевантного контента

Не все содержимое подойдет для печатной версии вашего документа. Если на вашей странице есть баннерная навигация, рекламные объявления или боковая панель, вы можете запретить отображение этих сведений в версии для печати, например:

 #contents, div.ad { display: none; }

Гиперссылки, очевидно, не имеют отношения к печатным материалам, поэтому вы, вероятно, захотите удалить все стили, которые отличают их от окружающего текста:

 a { text-decoration: none; color: inherit; }

Однако вы все равно можете захотеть, чтобы читатели имели доступ к исходным URL-адресам, и простое решение – автоматически вставить их после связанного текста:

 a[href]:after {
 content: " (" attr(href) ")";
 font-size: 90%;
 color: #333;
 }

Этот CSS дает следующие результаты:

a [href]: after специально нацелен на позицию после ( : after ) каждого элемента ссылки ( a ), который фактически имеет URL ( [href] ). Объявление содержимого здесь вставляет значение атрибута href в скобки. Обратите внимание, что для управления отображением сгенерированного содержимого могут применяться другие правила стиля.

Обработка разрывов страниц

Чтобы разрывы страниц не оставляли изолированного содержимого или неловко разбивали его посередине, используйте свойства разрыва страницы : page-break-before , page-break-after и page-break-inside . Например:

 table { page-break-inside: avoid; }

Это должно помочь не допустить, чтобы таблицы занимали несколько страниц, при условии, что ни одна из них не превышает одну страницу. Так же:

 h1, h2 { page-break-before: always; }

Это означает, что такие заголовки всегда начинают новую страницу. Это может вызвать проблемы, если вы сразу же последуете за h1 своей страницы с помощью h2, поскольку h1 окажется на странице сам по себе. Чтобы этого избежать, просто отмените разрыв страницы с помощью селектора, нацеленного на этот конкретный экземпляр, например:

 h1 + h2 { page-break-before: avoid; }

Просмотр стилей печати

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

Браузер Chrome делает более удобным проверку и даже отладку стилей печати с помощью инструментов разработчика, как показано в этом примере, показывающем резюме с таблицей стилей печати. Сначала откройте главное меню и выберите Дополнительные инструменты, а затем параметр Инструменты разработчика :

На новой появившейся панели выберите Меню , затем Дополнительные инструменты , а затем Рендеринг :

Затем прокрутите вниз до параметра Emulate CSS media type . Выпадающий список позволяет переключаться между режимами печати и экрана вашего документа:

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

Печать в PDF

Удобной функцией современных операционных систем является возможность печати в файл PDF. Фактически, все, что вы можете распечатать, вместо этого можно отправить в файл PDF – что неудивительно, поскольку в конце концов, файл PDF должен представлять печатный документ.

Это делает HTML в сочетании с таблицей стилей печати отличным средством для создания высококачественного документа, который можно отправить как вложение, а также распечатать.

Вы можете использовать таблицу стилей печати для создания качественных документов, включая все, от вашего резюме до рецептов или объявлений о мероприятиях. Веб-страницы обычно выглядят некрасиво и содержат нежелательные детали при печати, но небольшое количество настроек стиля может значительно улучшить результаты печати. Сохранение окончательных результатов в формате PDF – это быстрый способ создавать привлекательные профессиональные документы.