Как сделать страницу для печати
Инструкция: 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.
Возможно, будет лучше вообще показать только основной контент, а все остальное спрятать.
CSS-стили для печати, о которых я забыл
Аарон Густафсон недавно отправил твит Indiegogo, в котором было сказано, что при распечатке их страниц с информацией о заказе получается нечто совершенно неприличное. И понеслооось.
Dear @Indiegogo, please take a look at how your Order Details pages print. It really sucks right now. pic.twitter.com/48BA485sjb
Меня этот твит зацепил. Я вдруг понял, что уже и не вспомню, когда оптимизировал веб-страницы для печати или хотя бы проверял то, как они выводятся на принтер.
Основное внимание в ходе веб-разработки приковано к электронным версиям сайтов. Страницы приходится проверять во множестве браузеров, испытывать на разных размерах окон… До принтеров ли тут. А может, я забыл о стилях для печати потому что сам редко делаю бумажные копии страниц. Как бы там ни было, я почувствовал, что ситуацию надо срочно исправлять.
Печатный вариант веб-страницы имеет такое же право на существование, как и электронный. И, если мы стремимся к тому, чтобы сделать наши материалы как можно доступнее, не стоит пренебрегать бумажными носителями информации. Кроме того, не следует делать предположений о пользователях и об их поведении. Люди всё ещё распечатывают веб-страницы на принтерах. Просто представьте себе статьи или посты в блогах, страницы с рецептами, контактными сведениями, схемами проезда или со списками объявлений. Рано или поздно кто-нибудь непременно попытается распечатать что-то из того, что вы разместили в интернете.
Вот что говорит по этому поводу Хейдон Пикеринг, автор книги «Inclusive Design Patterns»: «Я уже давно не пользуюсь домашними принтерами. Дело тут в том, что у меня возникает ощущение, будто они ломаются минут через десять после того, как запустишь печать. Но я – не все».
Если сейчас вы поняли, что, как и я, не уделяли должного внимания стилям для печати, надеюсь, мой рассказ сослужит вам хорошую службу и поможет быстро освежить память. А если вы вообще никогда не оптимизировали веб-страницы для принтеров, моя небольшая коллекция полезных CSS-приёмов позволит вам к такой оптимизации приступить.
1. Использование CSS-стилей для печати
Лучший способ подключить к странице стили для печати – это объявить правило @media в вашем основном CSS-файле.
Как вариант, можно вынести стили для печати в самостоятельный файл и подключить его в HTML, но при таком подходе понадобится дополнительный запрос при загрузке страницы.
2. Тестирование
Как оценить внешний вид веб-страницы, подготовленной для печати? Любому ясно, что выводить её на бумагу после каждого изменения стиля – не лучшее решение. К счастью, возможностей браузеров вполне достаточно для «безбумажной» проверки печатных вариантов страниц.
В зависимости от браузера, можно экспортировать страницу в PDF, воспользоваться функцией предварительного просмотра или даже отлаживать страницу прямо в веб-обозревателе.
Эмуляция печати в Firefox
В Chrome тоже имеется подобная возможность. Откройте Инструменты разработчика, для чего, в MacOS, можно воспользоваться комбинацией клавиш CMD + Opt + I, в Windows – Ctrl + Shift + I, или выполните команду меню Дополнительные инструменты → Инструменты разработчика. После этого откройте панель рендеринга. Один из способов сделать это заключается в том, чтобы, нажав на клавишу Esc, вывести панель Console, а затем, через меню, открыть панель Rendering. В панели рендеринга установите флаг Emulate CSS Media и выберите Print.
Эмуляция печати в Chrome
Ещё о тестировании печатных версий веб-страниц можно почитать на StackOverflow.
3. Абсолютные единицы измерения
4. Свойства страниц
Правило @page – это часть стандарта Paged Media Module, который предлагает множество замечательных вещей, вроде выбора первой страницы для печати, настройки пустых страниц, позиционирования элементов в углах страницы и так далее. Его можно использовать даже для того, чтобы готовить к печати книги.
5. Управление разрывами страниц
Так как печатные листы, в отличие от веб-страниц, не бесконечны, содержимое веб-страниц рано или поздно обрывается на одном листе бумаги и продолжается на следующем. Для управления разрывами страниц имеется пять свойств.
▍Разрыв страницы перед элементом
▍Разрыв страницы после элемента
Свойство page-break-after позволяет задать принудительный разрыв страницы после элемента. С помощью этого свойства можно и запретить разрыв.
▍Разрыв страницы внутри элемента
Свойство page-break-inside окажется очень кстати, если нужно избежать разделения некоего элемента между двумя страницами.
▍Верхние и нижние висячие строки
Иногда в принудительном разрыве страниц нет нужды, но требуется управлять выводом абзацев на границах страниц.
Если возникла другая ситуация и лишь одна строка абзаца помещается на текущей странице, весь абзац будет напечатан на следующей странице. Свойство, ответственное за нижние висячие строки ( orphans ), по умолчанию так же установлено в 2.
Смысл вышеприведённого кода заключается в том, что для того, чтобы абзац не переносился целиком на следующую страницу, как минимум три строки должны поместиться на текущей странице.
Для того, чтобы лучше в этом разобраться, взгляните на пример, подготовленный с помощью CodePen. А вот – отладочная версия того же примера, её удобнее тестировать.
Надо отметить, что не все свойства и их значения универсальны, поэтому CSS-стили для печати стоит проверять в разных браузерах.
6. Сброс стилей
7. Удаление ненужного контента
Для того, чтобы впустую не тратить чернила, следует убирать из печатного варианта страницы всё ненужное, вроде огромных красивых слайдов, рекламы, средств навигации по сайту и прочего подобного. Сделать это можно с помощью установки свойства display в значение none у ненужных элементов. Вполне возможно, что вы сочтёте правильным показать лишь основное содержимое страницы, а всё остальное – скрыть:
8. Вывод адресов ссылок
Ссылки, в том виде, в котором они обычно присутствуют на веб-страницах, при печати совершенно бесполезны, если только читателю бумажной версии документа не известно, куда они ведут.
Для того, чтобы вывести адреса ссылок после их текстовых представлений, достаточно воспользоваться следующим стилем:
Конечно, при таком подходе «расшифровано» будет много лишнего. Например, относительные ссылки, абсолютные ссылки на том же сайте, где размещена печатаемая страница, ссылки с якорями и так далее. Для того, чтобы не засорять печатную страницу, лучше будет использовать примерно такую конструкцию:
9. Расшифровка сокращений
10. Принудительная печать фона
11. Медиа-запросы
Если вы пишете медиа-запросы примерно так, как показано ниже, учитывайте, что CSS-правила в подобных запросах не повлияют на печатную версию страницы.
12. Распечатка карт
Текущие версии Firefox и Chrome умеют выводить на печать карты, но, например, Safari этого не может. Как же быть при печати карт? Один из универсальных вариантов – использовать, вместо динамических, статические карты.
13. QR-коды
Вывод на печать QR-кодов, содержащих важные ссылки, может значительно повысить удобство работы с бумажными версиями веб-страниц. Вот материал в The Smashing Magazine, где можно найти полезные советы на эту тему. Один из них заключается в том, чтобы включать в печатные страницы их адреса в виде QR-кодов. В результате пользователю, для того чтобы открыть в браузере страницу, с которой была сделана распечатка, не придётся набирать на клавиатуре её полный адрес.
14. О печати неоптимизированных страниц
Занимаясь темой печати веб-страниц, я обнаружил отличный инструмент, который позволяет удобно готовить к выводу на принтер неоптимизированные страницы. С помощью Printliminator можно убрать со страницы ненужные элементы, просто щёлкая по ним. Вот демонстрация работы с этим инструментом на YouTube, а вот – страница проекта на Github.
15. Gutenberg
Если вам нравятся фреймворки, вам может приглянуться Gutenberg, который немного упрощает подготовку веб-страниц к печати.
16. Hartija
А вот ещё один CSS-фреймворк для печати. Называется он Hartija, создал его Vladimir Carrer.
Итоги
Если вы хотите увидеть в деле кое-что из того, о чём мы говорили, вот ссылка на проект в CodePen с примерами (а вот – его отладочная версия).
Оптимизировать веб-страницы для печати не так уж и сложно. Пожалуй, самое главное – не забывать об этом. Надеюсь, теперь сайтов, которые дружат с принтерами, станет немного больше.
Как сделать версию для печати
Вы можете посмотреть на версию для печати у этой статьи. Фактически, что нужно отображать там? Название статьи, раздел, категория, автор, сам текст и дата. Всё это и выведено на эту страницу. Нужны ли меню, форма поиска, различные блоки? Не думаю, поэтому их и нет.
Так же убедитесь, что ширина версии для печати не превосходит 650px, иначе браузер может порезать края.
Итак, Вы уже поняли, что версию для печати Вам надо создавать самостоятельно, выводя ровно то, что нужно пользователю. Теперь о том, как это сделать.
Есть 2 варианта: создать отдельную страницу и создать отдельный файл стилей. Первый вариант, думаю, понятен. Создаёте ещё одну страницу с версией для печати и на основной странице даёте ссылку на эту печатную версию. Пользователь по ней переходит и через «Файл»->»Печать» он её распечатает.
Второй вариант подразумевает создание отдельной таблицы стилей, где Вы скроете все лишние блоки (через display: none;) и поставите соответствующие размеры у выводимого контента. Дальше такой файл стилей подключается следующим образом:
Теперь если пользователь захочет распечатать эту страницу, то распечатается не то, что он видит, а то, что прописано в print.css. Фактически, пользователь видит страницу в одном виде, а принтер в совсем другом.
Вот таким образом создаётся версия для печати любой страницы сайта.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 2 ):
а что не ясно? либо отдельную страницу для печати,где только текст,либо при помощи файла стиля print.css(копия style.css от сайта),только убираете всё ненужное,ставите ему none или так,убираете оформление
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Как распечатать страницу из интернета на принтере
Если вы хотите распечатать интересную вам статью из интернета, совершенно не обязательно рыскать по веб-странице в поисках версии для печати и, уж тем более, копировать её в Word (но все равно мы также рассмотрим этот вариант, так как многие пользователи привыкли использовать эту программу для работы с текстом). Оба этих способа рутинны и нерациональны. Надо отметить, что если вы будете копировать текст из интернет — страницы и вставлять в любой текстовый редактор, то вам надо будет потом редактировать картинки и текст (картинки могут залезать на края страницы в Word-е и текст может отображаться неправильно), а это не очень хорошо. Ведь, есть и другие более простые способы, как распечатать страницу из интернета на принтере.
Примечание: в конце страницы будет вывод, который поможет выбрать нужный способ для печати.
В этой публикации мы будем обсуждать самые популярные браузеры, которые помогут решить данный вопрос:
Как выбрать текст, который надо распечатать
Первым делом вы должны выбрать текст, который хотите распечатать на своем принтере. Но на этой странице помимо самой статьи могут быть еще посторонние материалы, которые возможно вам не нужны: ссылки на похожие страницы, комментарии, оглавление сайта, реклама и т. д. Вы можете оставить, например, комментарии в качестве дополнительной информации, а можете их убрать – решать вам.
Чтобы выбрать текст, который будет распечатан на принтере, нужно выделить текст левой кнопкой мыши. Нажимаем левой кнопкой мыши в начале текста и не отпуская ее двигаете мышь к последнему слову в этом документе. Таким образом, у вас должен выделиться текст, который вы хотите распечатать.
Примечание: вы можете не выделять текст, а сделать настройки в браузере. Про них мы поговорим дальше.
Не снимая выделения, одновременно нажимаем две клавиши на клавиатуре «Ctrl» + «P» — комбинация клавиш подходит для всех браузеров. После этого откроется окно, где необходимо выбрать нужные параметры и нажать на кнопку «Печать». Теперь давайте поговорим о том, что надо нажимать в браузере на этом этапе. Ниже вы можете найти ваш браузер, чтобы начать процедуру печати.
Google Chrome
После нажатия на клавиши появится меню печати. В окне вы увидите область предварительного просмотра (находится справа), с помощью которого вы можете понять, что будет сейчас распечатано. Слева есть очень полезные настройки, которые помогут убрать лишнюю информацию из документа, а также вверху слева можно увидеть цифру, сколько потребуется листов для того чтобы распечатать этот текст.
Здесь можете указать: сколько надо сделать копий, выбрать раскладку и отметить какой вариант печати вы хотите сделать – цветную или черно-белую. Когда вы настроите печать, обязательно поставьте галочку «Упростить страницу». Таким образом, вы уберете не нужные элементы с будущего документа и уменьшите количество страниц. Вот пример:
Количество страниц стало 10, а было 12. Также из документа были убраны элементы, которые не относятся к тексту. Как можете видеть из практики эта функция полезная, и мы рекомендуем пользоваться ее. Теперь осталось нажать «Печать», чтобы распечатать эти страницы.
Если вам нужен документ в хорошем качестве, то рекомендуем нажать «Дополнительные настройки» и в разделе качество укажите «600 dpi».
Выбираем качество печати:
Mozilla Firefox
Когда выделите нужный текст и нажмете сочетания клавиш, о которых мы говорили выше, у вас откроется следующее окно: 
Здесь самая важная настройка – это чекбокс «Выделенный фрагмент». В браузере Firefox этот флажок может быть неактивным, если вы не сделали выделения. Когда укажите диапазон печати, нажмите «ОК». Далее браузер отправит этот документ на печать.
Internet Explorer
Этот браузер обладает таким же функционалом, как и Mozilla Firefox. Когда нажмете «Ctrl» + «P», вам надо указать диапазон страниц и после этого нажать «Печать». Если вы делали выделение текста, то нажмите на «Выделение». В том случае если хотите распечатать всю веб-страницу, то кликните на «Все» и после этого можно распечатать эту страницу.
Обратите внимание, что в браузере Internet Explorer может быть быстрая кнопка запуска печати (см. картинку ниже). Ей пользоваться категорически не стоит, ибо она сразу запускает печать всей страницы целиком, минуя окно настроек и игнорируя выделение. Также браузер Internet Explorer обладает особенностью — печатать текст вместе с рекламой, даже если она не была в выделении. Не рекомендуется использовать этот браузер для печати веб-страниц.
Opera
Данный браузер визуально похож на Google Chrome. Поэтому детально мы его разбирать не будет, так как выше мы уже это сделали. Если вы собираетесь распечатывать страницы с этого браузера, то рекомендуем подняться выше, где мы рассказывали, как распечатать в браузере Google Chrome. Мы сделали полный обзор этой процедура для данного браузера и информация, которая там находится, будет для вас очень полезна.
Нажав на клавиши «Ctrl» + «P» появится окно для настройки печати. Здесь надо поставить галочку «Упрощенная страница» (чтобы убрать лишние элементы перед печатью) и выбрать качество «600 600». После этого можете смело нажать на «Печать».
Яндекс браузер
Процедура печати очень схожа с браузерами Google Chrome и Opera (подробнее о настройках читайте выше, где мы рассказывали про данные браузеры). Когда зайдете на нужную страницу и нажмете «Ctrl» + «P», то у вас появится следующее окно:
Поставьте обязательно галочку «Упростить вёрстку», укажите нужные вам параметры и нажмите «Печать».
Microsoft Edge
В этом браузере процедура печати аналогична, как и в других браузерах. Вам надо слева указать свой принтер – если у вас их несколько, выбрать ориентацию печати, сколько копии напечатать и также рекомендуем выключить колонтитулы (как на скриншоте ниже).
Когда все параметры будут выставлены по вашим условиям, следует нажать «Печать».
Microsoft Word
Многие пользователи уже привыкли к программе Microsoft Word, и им кажется, что все процедуры, которые связаны с текстом, нужно делать именно в ней. Поэтому мы решили рассказать, как правильно это сделать в этом приложении. Ниже приведем основные рекомендации, которые вы должны использовать, чтобы сделать читабельный и правильный текст, для печати на бумаге:
Сервис PrintWhatYouLike.com
В интернете есть сервис, который поможет распечатать любую интернет – страницу. Вот он https://www.printwhatyoulike.com/. Зайдите на этот сайт и в пустое поле введите адрес страницы. Далее поставьте галочку «Я не робот» и нажмите «Start».
Слева вверху вы увидите окно, в котором сможете задать настройки для печати:
Чтобы начать печать, нажмите «Print».
Как печатать без рекламы
Чтобы распечатать страницу без рекламы в браузерах вам надо установить AdBlock или AdBlock Plus. Данное расширение позволяет убрать рекламу с вашего браузера не только во время печати, но и в дальнейшем вы больше не будете видеть рекламу.
Этот плагин устанавливается одним кликом в любом современном браузере, после чего он будет работать в фоновом режиме и блокировать всю рекламу на сайтах (для некоторых сайтов плагин можно отключать). Благодаря этому плагину вы сможете очистить статью для печати прямо в браузере. Но, лучше использовать Google Chrome или Opera. И вам не надо будет устанавливать дополнительных приложений в свой браузер.
Поводим итоги
Для печати веб-страницы мы рекомендуем использовать программы Google Chrome, Opera или любой другой браузер на движке Chromium. В данных браузерах распечатывать интересующую вас страницу гораздо удобнее и практичнее. После открытия меню печати нажатием комбинации клавиш «Ctrl» + «P» мы увидим окно предварительного просмотра документа, в котором будет наглядно виден объем текста и его расположение на листе бумаги. Если использовать эти браузеры, то вы получаете огромные плюс, так как в них вы можете убрать все лишние элементы сайта и оставить только текст.