Как сделать страницу для печатания
Инструкция: CSS-оптимизация веб-страницы для печати
Подборка полезных CSS-техник от фронтенд-разработчика Мануэля Матузовича.
Бывший менеджер Microsoft Аарон Густафсон в октябре 2016 года написал в Twitter обращение к Indiegogo, где обратил внимание компании на то, что страницы с деталями заказа невозможно распечатать.
Dear @Indiegogo, please take a look at how your Order Details pages print. It really sucks right now. pic.twitter.com/48BA485sjb
Когда я увидел этот твит, меня словно током прошибло, потому что я уже очень давно не только не оптимизировал страницу для печати, я даже ни секунды не думал об этом. Может быть дело в том, что я постоянно решаю вопросы, связанные с изменением размеров браузеров, и проверяю, чтобы страницы наших сайтов идеально работали в любом размере и любой форме, а может быть потому, что сам почти никогда не печатаю страницы. Как бы то ни было, я совсем забыл о стилях для печати, и это плохо.
Оптимизация интернет-страниц для печати очень важна, потому что в наших же интересах, чтобы сайты были максимально доступны пользователям, вне зависимости от того, в каком виде. Не нужно предполагать, какими являются пользователи и каким будет их поведение: люди все еще печатают страницы сайтов. Только подумайте о всех этих статьях или блогах, рецептах, контактной информации, страницах «как добраться» или сайтах с недвижимостью. Однажды кто-то где-то обязательно попробует распечатать одну из созданных вами страниц.
Я давно перестал пользоваться принтером дома, потому что он ломался каждые 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:
Чтобы чернила не тратились зря, лучше удалить ненужный материал, например, presentational content, рекламу, навигацию и прочие с помощью свойства display: none.
Возможно, будет лучше вообще показать только основной контент, а все остальное спрятать.
Делаем версию для печати
Есть два способа делать страницу для печати:
1. Специально выводить отдельным скриптом страницу без меню и лишнего оформления.
2. Выводить ту же страницу, которую просматриваем при просмотре сайта, но уже с другими подкреплёнными стилями, где скрываются ненужные элементы.
Довелось делать документы(накладные, счёт фактура и прочее) для печати. Так что пошёл по первому варианту. Но это просто в моём случае. Более гибкий как мне представляется второй вариант.
Вот мой опыт, заметки:
1. Главное правило — будь проще и люди к тебе потянутся(с)хз кто. 🙂 Короче не используйте разнообразие оформления. Человеку просто надо прочитать распечатанный текст, нечего его грузить лишним оформлением. Да и краску в принтере тратить.
2. Не используем фоновые изображения, их всё равно не будет при печати. Или будут, но не во всех браузерах. По крайней мере у меня какие то подобные грабли случались.
3. Стараемся использовать белый фон, чёрный текст. Если обратно, то будет тратиться много краски. Цветной текст думаю не нужно делать — всё равно у многих чёрно-белый принтер.
4. Если нужно чтобы следующий контент печатался обязательно на следующей странице, вставляем блок div с классом pagebreak перед этим текстом. Описываем класс в стилях:
текст за этим блоком будет распечатываться уже на новой странице. Работает во всех современных браузерах. Да и не современных то же. Один IE до 7ой версии включительно подводит. Но на него надо забивать!
5. И так, печать. Пользователь можно сам выбрать печать. Можно поставить на
Чтобы окно печати открывалось при открытии страницы. Но надо же пользователю сначала посмотреть страницу. Поэтому для удобства и для полуавтоматизации процесса делаем на странице кнопку для печати
Это кнопка будет при просмотре страницы, но печататься не будет, так как мы задали display: none; в style для media=»print», то есть в стилях для печатающего устройства. При нажатии на кнопку будет выводиться окно печати.
Тем, кто хочет супер автоматизировать процесс печати, чтобы например открываем страницу и принтер сразу начал печатать страницу — охладите свой пыл или того, кто вас просит это сделать. Я этот способ не нашёл. Да его и нет. Потому что это логично. Представьте, заходите вы на сайт, а там через javascript запрограммлена печать ста копий страниц. И принтер приходит в бешенство и начинает печатать эту кучу страниц без вашего ведома. Нелогично? Нелогично!
В одно время меня усердно просил сделать такую штуку один менеджер проектов. Пришлось ему всё это обяснять, приводить примеры, чтобы он понял что это нельзя сделать, да и не нужно.
6. Если кто то будет жаловать на то, что распечатываются адрес страницы, title и прочая херь в колонтитулах — посоветуйте ему настроить свой браузер. Со стороны сайта это не настраивается. По крайней мере я не знаю как. Например в Firefox это настраивается в «Печать» — «Параметры страницы» — «Поля и колонтитулы»
7. Кстати в догонку к предыдущему. Допустим пользователь отключил вывод всех колонтитулом, в том числе и адрес страницы. То есть если пользователь спустя некоторое время посмотрит на распечатку, он не сможет понять, с какого сайта он это распечатал. Так может стоит сделать небольшую заметку с указанием ресурса, адреса страницы, логотипа или ещё чего нибудь.
8. Используйте крупный размер шрифт(в пределах разумного конечно). Главное чтобы при печати всё было читабельно.
9. Используйте подходящий для чтения шрифт. В принципе и сайт же мы не для робота делаем, а для пользователя, чтобы он читал и шрифт можно использовать с сайта. Просто на сайте иногда в угоду дизайнера может быть какой то неудобный для чтения шрифт. Так сделаем же хотя бы для печати нормальный шрифт. Вот тут например писал про безопасный шрифт для глаз.
10. Думаю нужно использовать размерности, независимые от устройства — абсолютные размерности. Например in,cm,mm,pt,pc.
| Единица | Описание |
|---|---|
| in | Дюйм (1 дюйм равен 2,54 см) |
| cm | Сантиметр |
| mm | Миллиметр |
| pt | Пункт (1 пункт равен 1/72 дюйма) |
| pc | Пика (1 пика равна 12 пунктам) |
11. Вот полезная ссылка http://www.webdevout.net/browser-support-css#css2propsprint. Описание стилей можно найти на сайте http://htmlbook.ru
Вообще советую пройтись по всему списку CSS свойств, даже если вы опытный разработчик. Для себя с удивлением обнаружил незнакомые CSS свойства и что некоторые CSS свойства уже можно безбоязненно использовать.
Конечно же это не полный список советов. Это просто мои мысли.
Как распечатать страницу с сайта?
Интернет — это не только хранилище веселых картинок и смешных видео, но и практически безграничный кладезь знаний и полезной информации. Каждый здесь находил что-нибудь полезное для себя. Частенько многим людям приходится искать в сети разные схемы, рецепты, инструкции. И тут возникает необходимость их распечатать, ведь во многих случаях это довольно удобный способ ими воспользоваться. В этой статье мы рассмотрим несколько простых приемов, при помощи которых можно распечатать нужную информацию из интернета.
Распечатываем любые страницы из сети интернет
Начнем с самого простого, буквально в два клика, способа для печати страницы с сайта. Для этого можно просто одновременно нажать комбинацию из клавиш Ctrl+P. Таким образом мы откроем окно с параметрами печати, где, выбрав нужные настройки спокойно распечатаем текущую вкладку. Скорее всего, большинство сталкивались с этой комбинацией клавиш, ведь она срабатывает во всех браузерах и во многих текстовых редакторах и различных других программах.
Некоторые пользователи делают скриншот кнопкой PrintScreen на клавиатуре. А потом скидывают полученное изображение в текстовый редактор и распечатывают страницу. Что же, так тоже можно делать. Но согласитесь, это не эффективно, слишком много лишних действий.
Можете легко распечатать страничку из интернета, зайдя в меню «Файл» и выбрать там пункт печати. Результат будет такой же, как и при использовании горячих клавиш. Следует еще отметить, что у таких способов печати могут быть несколько особенностей:
Как видите, это быстрый способ напечатать нужную информацию. Но здесь есть недостатки, которые существенно снижают качество и внешний вид документа. Очень много сайтов предоставляют специальную версию для печати, на своих страницах. Это очень удобно, ведь таким образом можно избавиться от всего лишнего (рекламы баннеров, меню). Что бы воспользоваться такой полезной функцией, найдите на странице сайта кнопку приблизительно с таким названием: «Версия для печати». После этого открывается страничка, на которой уже нет ничего лишнего. Дальше пускаем ее в печать, уже известными нам, стандартными способами. Есть категория сайтов, на которых нет такой кнопочки, но при печати страница распечатывается довольно правильно, без лишней информации. Такие сайты имеют очень простой и лаконичный дизайн (например, Википедия).
Распечатываем любые страницы из сайта сделав скриншот
Склеивать и лепить нечто целое из нескольких изображений страниц довольно трудоемко и не удобно, поэтому поговорим о более продвинутом способе делать скриншоты для распечатки сайтов. Для этого воспользуемся специальным приложением FastStone Capture.
После того, как программка будет установлена и запущена, можно наблюдать достаточно небольшое и даже компактное окошко, с различными параметрами. Оно позволяет делать снимки отдельных частей сайта, или текущего окна.
Но самой интересной и полезной функцией является так называемый скриншот с прокруткой. Сейчас вы узнаете, что это такое и с чем его едят.
Для начала откройте любую страничку в интернете, которую хотите сфотографировать. Теперь открываем саму программу и нажимаем на кнопочку с изображенным прямоугольником, внутри которого будет стрелочка, направленная вниз. Появится красненькая рамка, по периметру всего экрана. Затем, просто один раз, кликните левой кнопкой по сайту, и программка автоматически его прокрутит и сделает снимок экрана. После этого откроется окно редактора скриншота, в котором можно будет сохранить его, или сразу же пустить в печать. Если запустите печать снимка, то в настройках принтера укажите плакатную печать и нужный формат. После этого ожидайте готовый результат, на выходе из принтера. Можете глянуть специальный обзор, где будет показана программа FastStone Capture в работе.
Программа может работать с любым браузером. В данном случае основное преимущество заключается как раз в том, что сохраняется абсолютно вся информация, которая находится на странице в интернете
Распечатка страницы сайта при помощи интернет сервиса
Еще легко можно распечатать полезную информацию в интернете, воспользовавшись специальным ресурсом Printwhatyoulike.
Здесь вводим адрес нужного нам сайта и нажимаем «Start». Откроется страничка с выбранным нами сайтом, где можно будет как угодно его редактировать, убирать лишние элементы, форматировать и выделять текст, пускать в печать только отдельные фрагменты и даже убирать фон сайта. Короче говоря, тут есть весьма широкие возможности для работы с информацией на сайте. После того, как Вы доведете страницу до нужного вида, нажмите кнопку «Print» и запустите все в печать.
Наглядно увидеть, как это все делается можно в следующем видео.
На этом все, теперь Вы знаете намного больше способов, как распечатывать страницы из интернета. Удачи!
CSS печатной версии страницы
На многих сайтах есть возможность отобразить версию страницы для печати, но всегда ли удобно ими пользоваться?
Основными проблемами при распечатке документа становится плохая типографика, наличие лишней информации (например, элементы интерфейса) и неправильные цвета. Для стилизации можно использовать правило @media:
Если пользователь хочет распечатать страницу с дизайном, отображающемся на экране, то делает скриншот и печатает его. Версия для печати предназначена для простого и комфортного чтения текста с листа бумаги. Поэтому прежде всего необходимо убрать все лишние со страницы: меню, массивную шапку или подвал, фоновые изображения и т.д., оставив только необходимое: заголовки, контент с изображениями, лого сайта, URL страницы. К примеру такой код скрывает заголовки H1, а также сайдбар, шапку и подвал сайта:
Правила страницы для печати
1. Современные браузеры умеют удалять фоновое изображение. Однако желательно добавлять background-image: none, чтобы старые браузеры тоже умели это.
2. Могут возникать несоответствия распечатанной страницы с ее отображением на экране при назначении размеров в пикселях. Поэтому стоит использовать дюймы, сантиметры или проценты.
3. При помощи следующего кода можно отображать полный URL вместо гиперссылки, ведь на листе бумаги не получится кликнуть:
Немного модифицировав код, можно добавить отображение URL только внешним ссылкам:
4. Для больших текстов иногда будет уместно разделение на части. Следующий код разбивает контент на каждом заголовке H3, печатая на новой странице:
А этот код поможет печатать каждую статью с новой страницы, может быть полезно при распечатке списка записей блога:
5. Желательно переназначить стили сайтов с темным или ярким дизайном в стандартную цветовую схему — черный текст на белом фоне. Это удобно и для читабельности, и для экономии расходнвх материалов в принтере пользователя.
Корректное отображение
Как уже сказано выше, современные браузеры умеют удалять ненужные элементы при печати, однако это не всегда требуется. В Firefox пользователь может сам контролировать внешний вид результата, в Chrome и Safari можно использовать код, приведенный ниже для отображения исходного стиля:
Как это выглядит в действии:
Качество печати
Зачастую результат печати сильно отличается от исходного на экране в худшую сторону. Одну из частых причин этого разберем на простом примере. Есть светлый текст на темном фоне:
Браузер попытается привести версию для печати в нормальный вид:
Если на странице есть изображение, например логотип, то браузер его никак не корректирует, и получается ужасно:
Еще хуже все выглядит, если в качестве лого используется векторное изображение с прозрачностью:
Избежать этого ужаса можно при использовании CSS3 Filter:
Как добавить кнопку печати на страницу сайта?
Здравствуйте, дорогие друзья!
Рассмотрим как добавить кнопку печати на страницу вашего сайта. В последнее время всё чаще сталкиваюсь с этой задачей. В основном такие кнопки печати используют на страницах интернет-магазина чтобы посетитель мог распечатать и сравнить товары или прийти с этой распечаткой в магазин и осмотреть заинтересовавший его товар перед покупкой или показать кому то.
Конечно, если он покупает какую то мелочь, то навряд ли решит распечатывать страницы (хотя бывают разные случаи). А вот при покупке товаров на крупную сумму возможность печати страницы прямо с сайта будет очень даже не лишней!
Навигация по статье:
Так же кнопка для печати страницы сайта может быть полезной на страницах статей для сайтов некоторых тематик, особенно если там есть какие то инструкции или рецепты или ещё что то в этом духе.
Как добавить кнопку печати страницы сайта?
Как это ни странно, функционал отправки страницы на печать изначально заложен в любом браузере и для добавления кнопки печати на сайт не нужно изобретать велосипед, а достаточно просто добавить в том месте, где вы хотите расположить кнопку отправки страницы на печать, вот такой вот код:
Вместо надписи «Распечатать» может быть любой текст, иконка или картинка.
Вместо класса print-doc можете указать свой.
Вот, например, вариант кода с картинкой:
На сайте это будет выглядеть так:
И всё бы ничего, но если бы ни одно но. Дело в том, что большинство современных сайтов имеют ширину в среднем 980 – 1280 пикселей, а так как размер бумаги для печати ограничен, то влезет на неё страница с шириной приблизительно 650px. Это приводит к тому, что некоторые элементы страницы будут налазить друг на друга или будут некорректно отображаться.
Что же делать в этом случае? Вот здесь придётся немного попотеть и создать версию страницы для печати.
Если ваш сайт адаптируется под мобильные устройства, то вам будет проще так как страница сама немного адаптируется под размер листа, но всё равно есть вероятность что какие то элементы придётся подправить или скрыть.
Как сделать версию для печати при помощи медиазапроса?
Скрыть элемент можно вычислив его класс или идентификатор и присвоив ему свойство display:none;
Как сделать версию для печати при помощи отдельного css файла?
В атрибуте href в кавычках нужно указать путь к вашему созданному файлу print.css. У вас он будет отличаться.
В коде ссылки это будет выглядеть так:
Подключение файла стилей осуществляется между тегами …
Как можно просмотреть версию для печати?
Для того чтобы посмотреть как наша страница будет выглядеть при печати нужно в меню браузера выбрать пункт «Файл» → «Печать» или просто «Печать» (в зависимости от браузера)
Добавить кнопку печати при помощи плагина WordPress
Если ваш сайт работает на WordPress – считайте что вам повезло! Разработчики этого движка день и ночь трудятся над плагинами упрощающими жизнь пользователей.
Для добавления кнопки печати воспользуемся плагином Print-O-Matic
Устанавливается и настраивается как обычно в разделе «Плагины» → «Добавить новый» в строке поиска вводим название и нажимаем на кнопку «Установить» а затем «Активировать»
Страница настроек плагина находится в разделе «Настройки» → «Print-O-Matic»
Здесь можно задать:
После задания настроек обязательно нажимаем на кнопку «Сохранить изменения».
Теперь мы можем вставить шорткод [print-me], там где нам нужно разместить кнопку печати и дело сделано!
Печать страницы при помощи онлайн сервиса Print Friendly and PDF Button
Пожалуй, это все известные мне способы добавления кнопки печати на. Если вы знаете ещё какие то – буду рада если поделитесь ими в комментариях.
Удачи вам и до скорых встреч на страницах моего сайта и не только!