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

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

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

Заголовок

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

Заголовок

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

h1 {вес шрифта: нормальный; }

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

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

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

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

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

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

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

Чистый фон

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

тело {
фон: белый;
черный цвет;
}

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

* {
фоновое изображение: нет! важно;
}

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

Как установить фоновое изображение в CSS

CSS - мощный инструмент для стилизации веб-страниц. Изучение того, как разместить фоновое изображение, научит вас многим основам CSS.

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

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

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

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

@страница {
запас: 2см;
}

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

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

@страница {
поле слева: 20 мм;
поле справа: 20 мм;
край-верх: 40 мм;
край-низ: 50 мм;
}
@page: left {
поле слева: 30 мм;
}
@page: right {
поле справа: 30 мм;
}

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

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

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

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

а {текст-украшение: нет; цвет: наследовать; }

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

a [href]: после {
содержание: "(" attr (href) ")";
размер шрифта: 90%;
цвет: # 333;
}

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

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

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

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

таблица {страница-разрыв-внутри: избегать; }

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

h1, h2 {разрыв страницы перед: всегда; }

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

h1 + h2 {разрыв страницы перед: избегать; }

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

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

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

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

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

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

Печать в PDF

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

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

Распечатайте различные документы

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

Как печатать веб-страницы в PDF с помощью Microsoft Edge

Вы когда-нибудь сталкивались с интересной статьей, которую хотели бы отложить на потом? Что ж, вы можете сохранить в формате PDF с помощью Edge за три простых шага.

Об авторе