Css верстка для печати

Инструкция: CSS-оптимизация веб-страницы для печати

Подборка полезных CSS-техник от фронтенд-разработчика Мануэля Матузовича.

Бывший менеджер Microsoft Аарон Густафсон в октябре 2016 года написал в Twitter обращение к Indiegogo, где обратил внимание компании на то, что страницы с деталями заказа невозможно распечатать.

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

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

Я давно перестал пользоваться принтером дома, потому что он ломался каждые 10 минут. Но не все такие как я.

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

Лучший способ встроить стили для печати — описать директиву @media в своем CSS.

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

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

Чтобы откорректировать стили для печати в Firefox, откройте Панель разработчика (Shift + F2 или Разработка → Веб-разработка → Панель разработчика), введите media emulate print в строчке ввода внизу окна браузера и нажмите Enter. Активная вкладка будет вести себя, как если бы тип медиа был print до тех пор, пока вы не закроете или не обновите страницу.

В браузере Chrome откройте Инструменты разработчика (CMD + Opt + I (для macOS) или Ctrl + Shift + I (для Windows) или View → Developer → Developer Tools), отразите Console drawer (Esc), откройте панель Rendering, поставьте галочку в пункте Emulate CSS Media и выберите Print.

Абсолютные единицы не годятся для экранов, но хорошо работают для печати. В стилях для печати совершенно безопасно и даже рекомендуется использование таких абсолютных единиц как cm, mm, in, pt или pc.

Можно также определить параметры, действующие на этой странице: размеры, ориентация и поля, — с помощью директивы @page. Это очень удобно, если вы хотите, чтобы у всех страниц были определенные поля.

Директива @page — это часть модуля Paged Media, в которой есть много всего нужного, например, можно выбрать первую страницу печати или пустые страницы, позиционировать элементы в углах страницы и другое. Вы можете даже пользоваться ей для создания книг.

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

Чтобы элемент всегда был в начале страницы, можно принудительно разрывать страницу с помощью правила page-break-before.

Правило page-break-before на портале Mozilla Developer Network.

С помощью правила page-break-after можно принудительно разорвать или, наоборот, избежать разрыва страницы после элемента.

Правило page-break-after на портале Mozilla Developer Network.

Это правило поможет избежать разделения элемента на две страницы.

Правило page-break-inside на портале Mozilla Developer Network.

Иногда не нужно принудительно разрывать страницу, но нужно проконтролировать, сколько строчек отражается на текущей или следующей странице. Например, если последняя строчка целого параграфа не помещается на текущей странице, то на следующей странице напечатаются две последние строчки из параграфа, даже несмотря на то, что не вошла только одна строчка. Так происходит потому, что свойство, ответственное за подобные ситуации, — widows — по умолчанию настроено на два. Это можно поменять.

Если ситуация противоположна, и из всего параграфа только первая строка помещается на странице, остальная часть параграфа будет напечатана на следующей странице. Свойство, ответственное за это поведение, — orphans, и его значение по умолчанию также равняется двум.

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

Стоит сбросить некоторые стили для печати, например background-color, box-shadow или color.

Вот фрагмент стандартной заготовки стилей для печати для HTML5:

Стили для печати являются исключением из правил, в них можно использовать ключевое слово !important.

Чтобы чернила не тратились зря, лучше удалить ненужный материал, например, presentational content, рекламу, навигацию и прочие с помощью свойства display: none.

Возможно, будет лучше вообще показать только основной контент, а все остальное спрятать.

Источник

Печать HTML страниц

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

Подключение CSS

Специальный CSS-файл:

Правило @media print:

Третий метод – отдельная страница или шаблон, свёрстанные чисто под печать (без @media print ), например так сделана печать писем в Яндекс.Почте. Такой метод существенно облегчает отладку.

Размер страницы

• при dpi=75, А4 имеет 877×620 px
• при dpi=150, А4 имеет 1754×1240 px
• при dpi=300, А4 имеет 3508×2480 px

Поля

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

Поля по ГОСТ Р 6.30-2003 (оформление документов):

По ГОСТ 7.32-2017 (научные работы, рефераты):

Удаление лишних стилей

Тени и другие эффекты дизайна лучше убрать, также следует установить черный цвет шрифта.

Размер шрифта

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

Скрытие лишних элементов

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

Другой вариант скрытия не нужного контента – в HTML-коде, добавить к скрываемым элементам класс noprint .

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

Показ элемента только при печати

@media screen < .element < display: none; >> @media print < .element < display: block; >>

Печать фона background

По умолчанию браузеры не печатают background у элементов, но его можно пустить на печать принудительно c помощью свойства -webkit-print-color-adjust: exact; и нового color-adjust: exact; .

Уточнение: свойство не будет работать если цвет фона и шрифта слабоконтрастные.

Разрывы страниц

В CSS доступно управление переносами, соответственно для списков и таблиц нужно запретить переносы:

Если требуется принудительно сделать перенос после элемента:

Отображение URL в ссылках

Печать ссылок бесполезна т.к. будет не известно, куда они ведут. Можно добавить приписку URL рядом с анкором (исключая якорные ссылки).

Пример вставки URL:

Вывод QR-кода при печати

Будет очень удобно если на печатаной странице будет QR-код с ссылкой на сайт. Сгенерировать код можно с помощью сервиса «Google QR Codes» и вставить его с помощью JQuery.

Запуск печати

В JS, печать запускается методом window.print() . Возможны следующие варианты: Запуск печати по клику на ссылку:

Следующий вариант – пользователь переходит на следующую страницу, где сразу начинается печать, после пользователь возвращается на исходную.

И последний вариант – печать происходит в отдельной вкладке браузера, после печати она автоматически закрывается.

Источник

CSS печатной версии страницы

На многих сайтах есть возможность отобразить версию страницы для печати, но всегда ли удобно ими пользоваться?

Основными проблемами при распечатке документа становится плохая типографика, наличие лишней информации (например, элементы интерфейса) и неправильные цвета. Для стилизации можно использовать правило @media:

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

h1, div#header, div#sidebar, div#footer

Правила страницы для печати

1. Современные браузеры умеют удалять фоновое изображение. Однако желательно добавлять background-image: none, чтобы старые браузеры тоже умели это.

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

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

Немного модифицировав код, можно добавить отображение URL только внешним ссылкам:

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

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

5. Желательно переназначить стили сайтов с темным или ярким дизайном в стандартную цветовую схему — черный текст на белом фоне. Это удобно и для читабельности, и для экономии расходнвх материалов в принтере пользователя.

Корректное отображение

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

Как это выглядит в действии:

Качество печати

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

Браузер попытается привести версию для печати в нормальный вид:

Если на странице есть изображение, например логотип, то браузер его никак не корректирует, и получается ужасно:

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

Избежать этого ужаса можно при использовании CSS3 Filter:

Для Firefox можно использовать SVG:

Источник