Abbr:after { content: " (" attr(title) ")"; }

10. Принудительная печать фона

Header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

11. Медиа-запросы

@media screen and (min-width: 48em) { /* только для экрана */ }
Почему это так? Всё дело в том, что CSS-правила применяются только в том случае, если значение min-width равно 48em , и если media-type – это screen . Если избавиться в этом медиа-запросе от ключевого слова screen , то он окажется ограниченным лишь значением min-width .

@media (min-width: 48em) { /* все типы средств отображения информации */ }

12. Распечатка карт

Map { width: 400px; height: 300px; background-image: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true"); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

13. QR-коды

14. О печати неоптимизированных страниц

Есть два способа делать страницу для печати:

1. Специально выводить отдельным скриптом страницу без меню и лишнего оформления.

2. Выводить ту же страницу, которую просматриваем при просмотре сайта, но уже с другими подкреплёнными стилями, где скрываются ненужные элементы.

Довелось делать документы(накладные, счёт фактура и прочее) для печати. Так что пошёл по первому варианту. Но это просто в моём случае. Более гибкий как мне представляется второй вариант.

Вот мой опыт, заметки:

1. Главное правило — будь проще и люди к тебе потянутся(с)хз кто. 🙂 Короче не используйте разнообразие оформления. Человеку просто надо прочитать распечатанный текст, нечего его грузить лишним оформлением. Да и краску в принтере тратить.

2. Не используем фоновые изображения, их всё равно не будет при печати. Или будут, но не во всех браузерах. По крайней мере у меня какие то подобные грабли случались.

3. Стараемся использовать белый фон, чёрный текст. Если обратно, то будет тратиться много краски. Цветной текст думаю не нужно делать — всё равно у многих чёрно-белый принтер.

4. Если нужно чтобы следующий контент печатался обязательно на следующей странице, вставляем блок div с классом pagebreak перед этим текстом. Описываем класс в стилях:

Pagebreak { page-break-after: always; }

текст за этим блоком будет распечатываться уже на новой странице. Работает во всех современных браузерах. Да и не современных то же. Один IE до 7ой версии включительно подводит. Но на него надо забивать!

5. И так, печать. Пользователь можно сам выбрать печать. Можно поставить на

window.onload = function () { window.print(); }

и сама кнопка:

Печать

Это кнопка будет при просмотре страницы, но печататься не будет, так как мы задали display: none; в style для media=»print», то есть в стилях для печатающего устройства. При нажатии на кнопку будет выводиться окно печати.

Тем, кто хочет супер автоматизировать процесс печати, чтобы например открываем страницу и принтер сразу начал печатать страницу — охладите свой пыл или того, кто вас просит это сделать. Я этот способ не нашёл. Да его и нет. Потому что это логично. Представьте, заходите вы на сайт, а там через javascript запрограммлена печать ста копий страниц. И принтер приходит в бешенство и начинает печатать эту кучу страниц без вашего ведома. Нелогично? Нелогично!

В одно время меня усердно просил сделать такую штуку один менеджер проектов. Пришлось ему всё это обяснять, приводить примеры, чтобы он понял что это нельзя сделать, да и не нужно.
6. Если кто то будет жаловать на то, что распечатываются адрес страницы, title и прочая херь в колонтитулах — посоветуйте ему настроить свой браузер. Со стороны сайта это не настраивается. По крайней мере я не знаю как. Например в Firefox это настраивается в «Печать» — «Параметры страницы» — «Поля и колонтитулы»

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

8. Используйте крупный размер шрифт(в пределах разумного конечно). Главное чтобы при печати всё было читабельно.

10. Думаю нужно использовать размерности, независимые от устройства — абсолютные размерности. Например in,cm,mm,pt,pc.

11. Вот полезная ссылка http://www.webdevout.net/browser-support-css#css2propsprint . Описание стилей можно найти на сайте http://htmlbook.ru
Вообще советую пройтись по всему списку CSS свойств, даже если вы опытный разработчик. Для себя с удивлением обнаружил незнакомые CSS свойства и что некоторые CSS свойства уже можно безбоязненно использовать.

Конечно же это не полный список советов. Это просто мои мысли.

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

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

Структура страницы

Итак, давайте сначала с помощью HTML создадим структуру нашего документа. Для примера я решил использовать табличную верстку, чтобы сделать его более простым для понимания:

Как видите, у нас есть таблица с тремя ячейками, которые расположены горизонтально. Все как у обычного сайта: слева навигация, посередине контент, а в правой части рекламные блоки или новости. Каждой ячейке был присвоен свой id. Для левой части это leftcolumn, для правой – rightcolumn, а для средней ячейки с контентом – content.

Добавляем CSS

Теперь с помощью CSS нужно указать браузеру какие стили он должен использовать для отображения элементов страницы на экране и какие он должен использовать при печати. Создаем style.css и пишем туда следующее:

Первый блок CSS-кода описывает как должны отображаться элементы страницы в браузере. Блок был взят в дополнительные фигурные скобки перед которыми мы дописали @media screen. Это дает браузеру понять что данные стили нужно применить для вывода на экран:

Так выглядит страница при просмотре в браузере

Второй блок описывает отображение тех же элементов страницы, что и первый, но в данном случае в том виде, в котором будет выглядеть документ при печати и обозначается параметром @media print. Поскольку мы хотим чтобы был напечатан только полезный контент, то мы запрещаем для отображения левую (#leftcolumn) и правую (#rightcolumn) ячейки присвоив им значение display: none.

Так выглядит распечатанная версия страницы сайта

Отдельные файлы стилей

Обьединять все в один файл стилей совсем не обязательно. Вместо этого вы можете использовать два файла стилей и при их подключении к страницам сайта указывать браузеру какой файл стилей использовать при печати, а какой для вывода на экран. Первый (для вывода на экран) определяется параметром media="screen", а второй будет использоваться для печати и определяется параметром media="print":

Стили для печати нужно описывать после всех остальных, иначе Opera будет печатать блок контента вместе с цветным фоном, который предназначен для вывода в браузер, а не белый цвет, выбранный нами для печати.

Также при печати мы строго уменьшаем ширину блока с контентом до 600px, потому как при ширине 100% принтер "обрезает" небольшую полосу текста с правой стороны страницы. Обратите также свое внимание на то, что при печати из Opera отступ по краям листа немного меньше чем в Internet Explorer и строчки текста на листе бумаги получаются шире.

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

Копирование статьи запрещено.

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

Я был ошеломлен, когда увидел этот твит - я понял, что прошло уже много времени с тех пор, как я оптимизировал стили для печати и я даже не думал об их проверке.

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

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

Я забросил домашние принтеры очень давно, так как мне всегда казалось, что они ломаются после 10 минут работы. Но не все такие, как я. - Хейдон Пикеринг (Inclusive Design Patterns)

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

1. Подключение стилей для печати

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

Body { font-size: 18px; } @media print { /* print styles go here */ body { font-size: 28px; } }

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

2. Тестирование

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

Для отладки стилей для печати в Firefox откройте панель разработки (Shift + F2 или меню Tools > Web Developer > Developer Toolbar), введите в поле ввода media emulate print и нажмите enter . Активная вкладка до перезагрузки будет работать так, как будто типом медиа является print .

Эмуляция стилей для печати в Firefox

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

Эмуляция стилей для печати в Chrome

3. Абсолютные единицы измерения

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

Section { margin-bottom: 2cm; }

4. Специфические правила для страниц

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

@media print { @page { margin: 1cm; } }

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

5. Управление разрывами страниц

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

Разрыв страницы перед элементом.

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

Section { page-break-before: always; }

Разрыв страницы после элемента.

Правило page-break-after позволяет нам форсировать или запрещать разрывы страниц после элемента.

H2 { page-break-after: always; }

Разрыв страницы внутри элемента

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

Ul { page-break-inside: avoid; }

Вдовы и сироты (висячие строки)

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

P { widows: 4; }

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

P { orphans: 3; }

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

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

6. Сброс стилей

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

*, *:before, *:after, *:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }

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

7. Удаление необязательного контента

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

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

Body > *:not(main) { display: none; }

8. Печать адресов ссылок

A:after { content: " (" attr(href) ")"; }

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

A:not():after { content: " (" attr(href) ")"; }

Смотрится безумно, я знаю. Эти строчки работают так: выводится значение атрибута href рядом с любой ссылкой, у которой он есть, если он начинается с http , но не ведет на наш mywebsite.com .

9. Печать расшифровок аббревиатур

Аббревиатуры должны оборачиваться элементом с указанием расшифровки в атрибуте title . Имеет смысл вывести это на печать.

Abbr:after { content: " (" attr(title) ")"; }

10. Печать фона

Обычно браузеры не печатают фоновый цвет и фоновые изображения, если вы прямо не укажете им. Есть нестандартизированное свойство print-color-adjust , позволяющее переписать настройки по умолчанию в некоторых браузерах.

Header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

11. Медиазапросы

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

@media screen and (min-width: 48em) { /* screen only */ }

Вы спросите, почему? Потому что правила CSS применяются только при выполнении обоих условий: min-width равен 48em , media-type - screen . Если избавиться от ключевого слова screen , то медиазапрос будет учитывать только значение min-width .

@media (min-width: 48em) { /* all media types */ }

12. Печать карт

Текущие версии Firefox и Chrome способны печатать карты, а вот Safari нет. Некоторые сервисы предоставляют статические карты , которые можно печатать вместо оригинала.

Map { width: 400px; height: 300px; background-image: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true"); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

13. QR-коды

Дополнение 2: Gutenberg

Если вы ищете фреймворк, то вам может понравиться Gutenberg , делающий оптимизацию страниц немного проще.

Дополнение 3: Hartija

Это еще один фреймворк для создания стилей для печати от