Home-theater-designers
Если вы когда-либо распечатывали из Интернета информацию о бронировании билетов или маршрутах к отелю, вы, вероятно, были менее чем впечатлены результатами. Поэтому вы можете не знать, что печатные документы можно стилизовать так же, как и на экране, с помощью каскадных таблиц стилей (CSS).
Разделение проблем
Ключевым преимуществом CSS является отделение содержимого от представления. Проще говоря, это означает вместо очень старомодной стилистической разметки, такой как:
Heading
Мы используем семантическую разметку:
Это не только намного чище, но и означает, что наша презентация отделена от нашего контента. Браузеры визуализируют h1 по умолчанию элементы имеют большой жирный шрифт, но мы можем изменить этот стиль в любое время с помощью таблицы стилей:
h1 { font-weight: normal; }
Собирая эти объявления стилей в отдельном файле и ссылаясь на этот файл из нашего HTML-документа, мы можем еще лучше использовать разделение. Таблицу стилей можно использовать повторно, и мы можем изменить этот единственный файл в любое время, чтобы обновить форматирование в каждом документе, который его использует.
Включение таблицы стилей печати
Подобно включению таблицы стилей экрана, мы можем указать таблицу стилей для печати. Таблица стилей экрана обычно включается так:
Однако дополнительный атрибут, половина , позволяет настраивать таргетинг на основе контекста, в котором отображается документ. По умолчанию предыдущий элемент эквивалентен:
Это означает, что таблица стилей будет применяться для любого носителя, на котором отображается документ. Однако атрибут media также может принимать значения print и screen:
В этом примере print.css таблица стилей будет использоваться только при распечатке документа. Это очень полезный механизм. Мы можем собрать все общие стили (например, семейство шрифтов или межстрочный интервал) в таблице стилей, которая применяется ко всем носителям, а специфичное для носителя форматирование - в отдельные таблицы стилей. Опять же, это еще один способ разделения ответственности.
Некоторые примеры объявлений стилей
Чистый фон
Вы почти наверняка не захотите тратить чернила на печать красочного фона или фонового изображения. Начните с сброса любых значений по умолчанию для этих значений, которые могли быть установлены в вашем документе:
body {
background: white;
color: black;
}
Вы также можете запретить печать фоновых изображений - они должны быть декоративными и, следовательно, не являться обязательной частью вашего контента:
* {
background-image: none !important;
}
Связанный: Как установить фоновое изображение в CSS
установить старый жесткий диск как второй диск
Контрольная маржа
Еще один очевидный момент, который следует учитывать при печати, - это поля страницы. Хотя CSS предоставляет средства для установки размера полей, вы должны иметь в виду, что ваш браузер и принтер также могут сами влиять на настройки полей.
Например, в диалоговом окне печати Chrome есть параметр поля, в котором есть значения, включая никто а также обычай который переопределит все, что указано через CSS:
По этой причине рекомендуется оставлять решения о марже читателю на общедоступных веб-страницах. Однако для личного использования или для создания макета по умолчанию может потребоваться установка полей печати с помощью CSS. В @страница Правило позволяет устанавливать поля и должно использоваться следующим образом:
@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]: после специально нацелен на позицию после ( :после ) каждый элемент ссылки ( к ), у которого действительно есть URL-адрес ( [href] ). В содержание здесь объявление вставляет значение href атрибут в скобках. Обратите внимание, что для управления отображением сгенерированного содержимого могут применяться другие правила стиля.
Обработка разрывов страниц
Чтобы разрывы страниц не оставляли изолированное содержимое или неуклюже разбивать его посередине, используйте свойства разрыва страницы: разрыв страницы до , разрыв страницы после а также разрыв страницы внутрь . Например:
table { page-break-inside: avoid; }
Это должно помочь не допустить, чтобы таблицы занимали несколько страниц, если ни одна из них не превышает одну страницу. Сходным образом:
h1, h2 { page-break-before: always; }
Это означает, что такие заголовки всегда начинают новую страницу. Однако это может вызвать проблемы, если вы сразу же последуете за h1 своей страницы с помощью h2, поскольку h1 окажется на странице сам по себе. Чтобы этого избежать, просто отмените разрыв страницы с помощью селектора, нацеленного на этот конкретный экземпляр, например:
перенос данных ps4 на другой ps4
h1 + h2 { page-break-before: avoid; }
Просмотр стилей печати
Во всех случаях ваш браузер и операционная система должны предоставлять функцию предварительного просмотра печати, часто как часть стандартного диалогового окна печати.
Браузер Chrome делает более удобным проверку и даже отладку стилей печати с помощью инструментов разработчика, как показано в этом примере, показывающем резюме с таблицей стилей печати. Сначала откройте главное меню и выберите Дополнительные инструменты за которым следует Инструменты разработчика вариант:
На появившейся новой панели выберите Меню , тогда Дополнительные инструменты , с последующим Рендеринг :
Затем прокрутите вниз до Эмулировать медиа-тип CSS параметр. Выпадающий список позволяет вам переключаться между режимами печати и экрана вашего документа:
При эмуляции таблицы стилей печати стандартный Браузер стилей доступен для проверки и изменения правил живого стиля. Имейте в виду, что эмуляция вывода на печать на экране все еще не на 100% точна. Браузер ничего не знает о размере бумаги, и @страница правило нельзя подражать.
Печать в PDF
Удобной функцией современных операционных систем является возможность печати в файл PDF. Фактически, все, что вы можете распечатать, вместо этого можно отправить в файл PDF - это неудивительно, поскольку в конце концов, файл PDF должен представлять печатный документ.
Это делает HTML в сочетании с таблицей стилей печати отличным средством для создания высококачественного документа, который можно отправить как вложение, а также распечатать.
Распечатайте различные документы
Вы можете использовать таблицу стилей для печати для создания качественных документов, включая все, от вашего резюме до рецептов или объявлений о мероприятиях. Веб-страницы обычно выглядят некрасиво и содержат нежелательные детали при печати, но небольшое количество настроек стиля может значительно улучшить результаты печати. Сохранение окончательных результатов в формате PDF - это быстрый способ создавать привлекательные профессиональные документы.
Делиться Делиться Твитнуть Эл. адрес Как печатать веб-страницы в PDF с помощью Microsoft EdgeВы когда-нибудь сталкивались с интересной статьей, которую хотели бы отложить на потом? Что ж, вы можете сохранить в формате PDF с помощью Edge за три простых шага.
Читать далее Похожие темы- Программирование
- Печать
- CSS
Бобби - энтузиаст технологий, проработавший разработчиком программного обеспечения большую часть двух десятилетий. Он увлечен играми, работает редактором обзоров в Switch Player Magazine и занимается всеми аспектами онлайн-публикации и веб-разработки.
Ещё от Bobby JackПодписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!
Нажмите здесь, чтобы подписаться