Есть два способа делать страницу для печати:
1. Специально выводить отдельным скриптом страницу без меню и лишнего оформления.
2. Выводить ту же страницу, которую просматриваем при просмотре сайта, но уже с другими подкреплёнными стилями, где скрываются ненужные элементы.
Довелось делать документы(накладные, счёт фактура и прочее) для печати. Так что пошёл по первому варианту. Но это просто в моём случае. Более гибкий как мне представляется второй вариант.
Вот мой опыт, заметки:
1. Главное правило — будь проще и люди к тебе потянутся(с)хз кто. 🙂 Короче не используйте разнообразие оформления. Человеку просто надо прочитать распечатанный текст, нечего его грузить лишним оформлением. Да и краску в принтере тратить.
2. Не используем фоновые изображения, их всё равно не будет при печати. Или будут, но не во всех браузерах. По крайней мере у меня какие то подобные грабли случались.
3. Стараемся использовать белый фон, чёрный текст. Если обратно, то будет тратиться много краски. Цветной текст думаю не нужно делать — всё равно у многих чёрно-белый принтер.
4. Если нужно чтобы следующий контент печатался обязательно на следующей странице, вставляем блок div с классом pagebreak перед этим текстом. Описываем класс в стилях:
Pagebreak { page-break-after: always; }
Pagebreak { page - break - after : always ; |
текст за этим блоком будет распечатываться уже на новой странице. Работает во всех современных браузерах. Да и не современных то же. Один IE до 7ой версии включительно подводит. Но на него надо забивать!
5. И так, печать. Пользователь можно сам выбрать печать. Можно поставить на
window.onload = function () { window.print(); }
и сама кнопка:
Печать
< button onclick = "window.print();" > Печать< / button > |
Это кнопка будет при просмотре страницы, но печататься не будет, так как мы задали 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 свойства уже можно безбоязненно использовать.
Конечно же это не полный список советов. Это просто мои мысли.
Многие пользователи глобальной сети Интернет даже не подозревают, что Web является многофункциональной средой, предусматривающей различные способы предоставления информации. В данном случае имеется в виду не мультимедиа – аудио и видео данные, широко распространенные на сегодняшний день, а реальные источники, посредством которых люди черпают информацию из Web пространства. Львиная доля пользователей Интернета для этих целей использует экран, который может быть как отдельным устройством (монитор ПК), так и неотъемлемой частью мобильного устройства с доступом к сети. Учитывая успешное развитие компьютерных технологий и доступность как стационарных, так и портативных компьютеров и всевозможных электронных гаджетов, можно с уверенностью сказать, что на сегодняшний день монитор является самым популярным средством просмотра веб-страниц.
Как бы там ни было, но в отдельных случаях без распечатки интересуемых нас страниц просто не обойтись. Именно поэтому, на многих веб-узлах для каждого доступного пользователю документа предусмотрен его вариант, используемый при печати на принтере. Но по причине того, что развитие Web технологий нацелено, прежде всего, на визуальное представление информации на экранах мониторов в браузере, множество веб-страниц распечатываются в не совсем удобном для чтения виде. Панели навигации, баннеры различного назначения и другие подобные им элементы веб-страницы захламляют ее визуальное представление в распечатанном виде. К тому же, большинство этих элементов предназначено для взаимодействия с пользователем посредством браузера и поэтому при переносе на бумагу толку от них вообще никакого. Поэтому все чаще на посещаемых веб-страницах можно встретить ссылки типа «Версия страницы для печати» , позволяющие на экране увидеть документ в том виде, в котором он будет распечатан на принтере.
Средства CSS спецификации позволяют веб-разработчикам без труда создавать различные варианты представления страниц в зависимости от способа их отображения (монитор, принтер и не только). В данной статье рассмотрены способы реализации этого подхода средствами CSS .
Создание связей.Существует несколько способов импорта содержимого внешних таблиц стилей CSS в html документ и определения необходимых правил непосредственно в файле исходного кода страницы.
Мета тег .Наиболее распространенный и привычный вариант – использование мета тега , в котором предусмотрен атрибут media , позволяющий определить устройство, для которого выполняется форматирование документа с помощью указанного CSS файла. Вот пример:
Приведенный пример подключает CSS файл print_stylesheet.css , предназначенный для форматирования документа при выводе на принтер (media="print" ). То есть для всех других случаев представления веб-страницы (отличных от распечатанного варианта) CSS правила, определенные в файле print_stylesheet.css не учитываться. Спецификацией CSS определено десять допустимых значений для атрибута media , предусмотренных для различных устройств и способов представления Web информации: all , aural , braille , embossed , handheld , print , projection , screen ,tty и tv . В данной статье мы не будем рассматривать все значения, а только определяющие печатное устройство. Но следует также обратить внимание на значение all , которое устанавливается по умолчанию для атрибута media в том случае, если явно не указано другое. Кроме того, если определенный CSS файл предназначен для форматирования страницы при выводе на несколько типов устройств одновременно, то соответствующие им ключевые слова можно указывать в одной строке, разделяя их запятой:
Команда импорта CSS.Для подключения внешнего CSS файла можно также использовать ключевое слово @media . В определяемом в данном случае правиле можно указывать несколько видов носителей, для которых предназначено форматирование. При этом синтаксис допускает два варианта написания команды:
@import url("styles/stylesheet.css") print, projection;
или
@import "styles/stylesheet.css" print, projection;
Как видно из примера особых различий у допустимых вариантов нет. В одном случае применяется директива url , а второй предусматривает написание пути к требуемому файлу CSS без нее. Приведенное в качестве примера правило предусматривает использование файла stylesheet.css , находящегося в папке styles , который предназначен для форматирования документа для устройств с постраничным выводом информации (print — принтеры, projection — слайд-проекторы и подобные им устройства).
Непосредственно в html документе веб-страницы.Для этого используется CSS правило @media , в рамках которого указываются свойства форматирования документа и необходимые значения для них. Непосредственно за ключевым словом @media определяется один или несколько типов носителей (через запятую), для которых выполняется форматирование:
@media print, projection {
body {font-size: 12pt; line-height: 110%; background: white;}
}
@media screen {
body {font-size: medium; line-height: 2em; background: silver;}
}
Как можно догадаться, в примере, в рамках первого правила @media описаны CSS свойства для рабочей области документа ( ), предназначенные для его отображения на устройствах с постраничным выводом информации (print, projection ). А последнее правило определяет внешний вид страницы отображаемой на экране (screen ).
Рекомендации по форматированию версии документа для печати.Как упоминалось выше, перед выводом на печать веб-страница должна быть соответствующим образом отформатирована. То есть, к документу должен быть подключен необходимый CSS файл одним из рассмотренных в предыдущем пункте методом. Удобный способ создания такого файла кратко описан в этом посте . Нам осталось рассмотреть несколько важных рекомендаций, которых необходимо придерживаться при редактировании CSS файла, предназначенного для распечатываемой страницы.
- Измените цветовую схему, используемую для отображения страницы на экране.
Если, при выводе на экран документа используется какое-либо фоновое изображение или просто фоновая заливка, а также если вы применяете цветной шрифт, отличный от стандартного варианта (черного), то при создании CSS файла для печати нужно отменить это форматирование. Распечатываемая страница должна выглядеть как можно проще – белый фон и черный шрифт. Многие пользователи для распечатки веб-документов используют чёрно-белый режим печати. К тому же, при распечатывании страницы с насыщенной цветовой схемой значительно повышается расход чернил или тонера.
- Измените тип используемого шрифта.
В оформлении текста большинства веб-страниц, предназначенных для чтения онлайн применяют рубленые шрифты — sans serif (без засечек), так как они считаются более удобными при чтении с экрана монитора. Но при перенесении страницы на бумагу, ситуация меняется и здесь более подходящими будут шрифты с засечками — serif , для которых характерны небольшие декоративные элементы (засечки) на окончаниях каждой буквы. Считается, что именно засечки способствуют направлению взгляда пользователя в нужном направлении – по тексту. Поэтому, большие объемы текста должны быть оформлены шрифтом с засечками (Times New Roman , Georgia , Palatino и другие).
- Обратите внимание на размер шрифта.
Если для отображения текста на экране допустимо использовать относительно мелкий размер шрифта (11 пикселей, а иногда и меньше), то для печатного варианта страницы необходимо увеличить его минимум до 12 пикселей, но никак не меньше – все зависит от аудитории, на которую рассчитана содержащаяся в документе информация.
- Выделите, используемые на странице ссылки.
Для того, чтобы информация, размещаемая на странице была выражена наиболее полным образом, при ее переносе на бумагу нужно визуально выделить все присутствующие в ней гиперссылки, так как в этом случае они уже не являются кликабельными и должны иметь особую форму отображения. Для этой цели зачастую используют подчеркивание ссылок и смену цвета шрифта их анкорного текста на синий.
- Удалите лишние изображения.
Важность используемых в веб-документе изображений определяется несколькими факторами, зависящими как от его разработчика, так и от маркетингового отдела компании, владеющей сайтом. В идеале, рекомендуется оставить лишь те изображения, которые несут смысловую информацию, являясь иллюстрациями к представленному тексту, а также логотип сайта, как правило, находящийся в верхнем левом углу страницы.
- Уберите элементы навигации.
Среди множества компонентов, которые являются бесполезными в распечатанном варианте веб-страницы можно выделить навигационное меню и другие элементы, так или иначе связанные с навигацией по сайту. Поэтому оставляя их на странице при распечатке, вы попросту зря тратите чернила. Более того, удалив их, вы освободите дополнительное полезное место для текста, и тем самым представите его в более читабельном виде.
- Удалите ненужную рекламу.
В идеальном случае, для пользователей, распечатывающих веб-страницу с целью чтения содержащейся на ней информации, рекламные объявления в виде баннеров и других форм графической и текстовой информации не представляют никакой ценности. И нужно было бы полностью избавиться от нее в нашем случае, но реальность диктует свои условия. Большинство сайтов в Интернете существуют благодаря именно рекламе, и поэтому ее удаление может привести к негативным последствиям. Поэтому рекламные продукты, представленные на сайте, зачастую остаются при распечатке его страниц, но если вы можете сократить их количество до минимума или упростить форму их представления, то это будет идеальным вариантом. Постарайтесь найти золотую середину, если это возможно.
- Удалите все анимированные изображения.
Интерактивные графические элементы, управляемые при помощи скриптов, а также анимированные Flash изображения, как правило, распечатываются некорректно, а в отдельных случаях дефекты их печати («сползание») могут повлиять на качество отображения текста, что совсем неприемлемо.
- Авторская информация.
Даже в том случае, если на вашем сайте, при публикации статей не указывается информация об их авторе (а делать это рекомендуется), эти данные следует включать в состав страниц для печати. Что позволит пользователям, которые распечатывают исходный материал и работают с ним в более удобном для них виде и/или месте, иметь возможность узнать информацию об авторе, без необходимости повторного посещения вашего сайта.
- Используйте полный URL адрес вашего сайта.
Включение полного URL адреса распечатываемой страницы в нижней, заключительной ее части является очень важным моментом. Это позволит пользователям быстро вернуться на нее и воспользоваться какой-либо ссылкой, ведущей на другую страницу, содержащую расширенную информацию по рассматриваемому вопросу или с другой целью. В любом случае, это способствует повторному посещению вашего ресурса пользователем. К тому же, при дальнейшем размножении распечатанной страницы (при помощи фотокопий, например), о вашем сайте узнают больше людей.
- Включите информацию об авторских правах.
Вся информация, которая находится на вашем веб-ресурсе охраняется авторскими правами и принадлежит только вам. Даже в том случае, если пользователь, руководствуясь исключительно потребительскими намерениями, распечатывает страницу, это не значит, что содержащаяся на ней информация теперь может использоваться в коммерческих целях. Поэтому сведения об авторских правах обязательно должны переноситься и на печатную копию документа. Это, конечно, не сможет предотвратить факт воровства, но, по крайней мере, напомнит злоумышленнику о том, что именно вы обладаете авторскими правами на эту информацию.
Соблюдая все перечисленные выше рекомендации по форматированию веб-страниц, предназначенных для печати, вы сможете удовлетворить требования большинства пользователей, которые по различным причинам вынуждены работать с распечатанными на принтере документами. А это, как следствие, поможет вам сформировать группу пользователей, составляющих целевую аудиторию вашего сайта.
Post Views: 330
Сегодня вас ждёт заметка из серии советов по дизайну. И дизайну не графическому, а дизайну интерфейса. Думаю, многие из вас хоть раз распечатывали страницу сайта прямо из браузера. Последовательность обычно такая: нажать Ctrl+P, ждать минуту, потом догадаться вставить бумагу в принтер, снова нажать Ctrl+P, удивиться, зачем было печатать столько баннеров, счётчики и главное меню. Нужна-то была всего лишь карта проезда и контакты.
Некоторые дизайнеры решают этот вопрос так: для каждой страницы соаздаётся отдельная версия для печати. Чаще всего это документ, в который не вставляются баннеры, меню и остальные лишние для печати элементы страницы.
Зачем делать отдельную версиюЕсли страница большая, то возможен вариант, когда она не вмещается на А4 и распечатается только до половины, а остальная часть будет на втором листе. Убирая лишние блоки перед печатью, мы сэкономим место на бумаге, краску в принтере и нервные клетки.
Кроме того, разное разрешение экранов пользователей не позволит нам знать, как именно распечатается тот или иной элемент. Поэтому я бы советовал убирать всё лишнее и быть уверенными, что все распечатки будут одинаковыми.
Как указать, что печатать?Обычно благодаря классам и идентификаторам объектов мы можем спрятать практически любой элемент страницы. Чтобы не спрятать лишнего, я бы рекомендовал скрывать шапку с навигацией, логотип сайта, боковую панель (если она есть) и футер (низ страницы).
Таким образом в печать уйдёт то, что находится в области контента. Всем элементам, которые вы хотите спрятать при печати, присваивайте свой класс, например «no-print».
Также мы можем указать, что на печать не должны отправляться изображения, находящиеся в папке с баннерами. Делается это с помощью маски. Для этого надо указать в CSS:
img { display: none !important; }
Этим кодом мы скроем все баннеры, которые будут встречаться в любом месте на странице. Таким же образом нужно сделать невидимыми остальные элементы.
No-print { display: none !important; }
Применение на практикеДля того, чтобы файл print.css обрабатывался только во время отправки на печать, нужно указать его в таким образом:
Распечатать эту страницу
Несколько лет назад я был приятно удивлён, узнав о существовании такой функции. Это удобно и достаточно просто, поэтому рекомендую вам её к использованию.
Периодически в интернете можно встретить настолько ценные статьи, что хочется распечатать их и зачитать до дыр. При этом не на всех сервисах предусмотрена версия статьи для печати или наши желания распечатать не совпадают с предоставляемыми возможностями (хочется оставить картинку или изменить тип основного шрифта). Как же распечатать страницу без лишних элементов? В таком случае поможет веб-сервис .
На главной странице PrintWhatYouLike в середине экрана имеется формочка для ввода адреса страницы подлежащей печати. Адрес ввели, страница загружена и мы видим, что при выборе любого из элементов интерфейса он обводится красной рамкой. Еще одно нажатие левой кнопки мыши и открывается список возможных операций. Элементы интерфейса можно удалять по одному или группой, расширить отдельно выбранный в границах или выбрать один блок текста, удалив все прочие. То есть предоставлена возможность по одиночке убрать ненужные для печати части страницы или быстро изолировать нужное от второстепенного и распечатать.
В левой части экрана присутствует боковая панель с рядом функций для редактируемой страницы:
- сохранение редактируемой страницы в форматы PDF, HTML;
- изменение размера текста, типа шрифта;
- удаление заднего фона или изображений одним нажатием кнопки мыши.
Для удобства пользователя PrintWhatYouLike предлагает поместить на панель закладок кнопку для редактирования перед печатью любой, посещенной нами страницы. Также предусмотрена опция PageZipper. Она будет удобна при чтении тех ресурсов, где любят разделить одну статью на пять, десять или более страниц. Вы жмете “Следующая страница”, еще раз “Следующая страница”, а затем понимаете, что и читать было нечего. PageZipper разложит всю статью целиком на одной странице для дальнейшего редактирования и печати. Если букмарклет ставить не хочется, то доступен плагин для Firefox PageZipper 0.6.1 .
Для зарегистрированных пользователей PrintWhatYouLike предлагает панель управления, где содержится информация о количестве установленных Printer Friendly кнопок, сохраненных и распечатанных листов бумаги, сэкономленных деньгах, не срубленных деревьев и не выброшенного в атмосферу злополучного оксида углерода.
Блогерам может также принести пользу. Установка плагина приведет к появлению на каждой странице блога удобной кнопки для отправки статей на печать, возможность сохранения страниц в формат PDF, что позволит экономить читателям бумагу и краску принтера.
В котором он указал, что их страницы детального заказа непригодны к использованию в напечатанном виде.
Я был ошеломлен, когда увидел этот твит - я понял, что прошло уже много времени с тех пор, как я оптимизировал стили для печати и я даже не думал об их проверке.
Возможно, это произошло потому, что я трачу много времени на изменение размера окна браузера, чтобы гарантировать, что мои сайты работают прекрасно во всех размерах и формах, а может потому, что я редко печатаю страницы для себя. Независимо от причин, я совершенно забыл о стилях для печати и это плохо.
Оптимизация веб-страниц для печати важна потому, что печатая страницы мы делаем сайт максимально доступным, независимо от среды. Мы не должны делать предположений о наших пользователях и их поведении. Люди продолжают печатать веб-страницы. Подумайте о статьях, записях в блогах, рецептах, контактной информации, сайтах с картами или объектами недвижимости. Кто-нибудь когда-нибудь обязательно попытается распечатать одну из ваших страниц.
Я забросил домашние принтеры очень давно, так как мне всегда казалось, что они ломаются после 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Это еще один фреймворк для создания стилей для печати от