Я совсем забыл о стилях для печати. Распечатать страницу без лишних элементов Основным местом intitle версия для печати

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

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

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

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

Название статьи

Навигация Главная страница Статьи Контакты

Название статьи Данная страница может быть распечатана. Напечатан будет только текст статьи.

Здесь могла бы быть ваша реклама

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

Добавляем CSS

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

@media screen { body { background-color: #0B73BD; font-family: tahoma; color: #FFFFFF; } table { width: 600px; } #leftcolumn { width: 140px; vertical-align: top; font-size: 15px; } #rightcolumn { width: 110px; vertical-align: top; font-size: 15px; } #content { background-color: #32AADB; padding: 5px; font-size: 15px; } a { color: #FFFF00; } } @media print { body { background-color: #FFFFFF; font-family: tahoma; color: #000000; } #content { background-color: #FFFFFF; padding: 5px; font-size: 15px; color: #000000; width: 600px; } #leftcolumn { display: none; } #rightcolumn { display: none; } }

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

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

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

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

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

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

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

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

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

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

Кого-то это может удивить, но распечатывают web-страницы довольно часто.
В данной заметке показаны полезные приемы на CSS для подготовки страницы к печати.

Предварительные изменения в стилях

Желательно разбивать CSS-стили на отдельные файлы в зависимости от микроформатов:

Это поможет избежать путаницы в дальнейшем и сэкономит ваше время. Стоит учесть, что шрифты на печати следует задавать в пунктах (pt), дюймах (in), пиках (pc) или сантиметрах/миллиметрах(cm/mm).

Задаем цвет фона, выставляем отсупы

Убираем отступы, задаем для страницы белый цвет фона и черный шрифт (для контрастности), выставляем поля в 0,5дюйма. Также убираем свойство float у плавающих элементов, чтобы при печати веб-страницы блоки не съезжали.

Убираем лишние стили

При печати многие элементы сайта являются лишними: навигация, реклама, баннеры. Убираем их при помощи display:none .
У меня получилось нечто подобное:

Работа с гиперссылками

Убираем подчеркивание у ссылок, на печати они нам не понадобятся. Также выводим URL (в скобках рядом с текстом ссылки).

a{ border : 0 ; text-decoration : none ; }
a img{ border : 0 }

Постраничная разбивка на CSS

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

@media all
{
.nextpage { display : none ; }
}

@media print
{
.nextpage { display : block ; page-break-before : always ; }
}

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

Пример page-break-before

@media print{
.newpage{page-break-before: always;}
}



Разрывы страниц на CSS
Попробуйте распечатать эту страницу (да съесть еще этих мягких французских булок, да выпить чаю).
Это 1-ый параграф, он будет расположен на первой странице при печати.

Это 2-ой параграф, он будет расположен на второй странице при печати.

Это 3-ий параграф, он будет расположен на третьей странице при печати. Все так просто.

CSS-свойства: widows, orphans

Свойство widows задает минимальное число строк текста, которое располагается на следующей странице при печати документа.
Пример:

Другое css-cвойство — orphans — задаёт минимальное количество строк, которые могут оставаться в нижней части страницы без разрыва страницы.
Если значение widows конфликтует со значением orphans, тогда widows будет иметь приоритет.
Пример использования:

@media print {
p { widows : 3 ; orphans : 3 ; }
}

Подводим итоги:

В результате у меня получилось что-то подобное:

body{ margin : 0.5in ; font-family : times}
* { background : #fff !important; color : #000 !important; float : none !important; width : auto !important; height : auto !important; }
#context { margin : 0 !important; padding : 0 }
#menu , #topmenu , #thedrot , .meta , #comments , #commentform , #postcomment , #resplink , #footer { display : none }
#zag h1 span{ font-size : small; display : block }
a{ border : 0 ; text-decoration : none ; }
a img{ border : 0 }
a:after { content : " (" attr(href) ") " ; font-size : 90% ; }
a[ href^= "/" ] :after { content : " (http://www.сайт" attr(href) ") " ; }

Данная таблица стилей достаточна проста и, на мой взгляд, требует более детальной проработки отдельных элементов, но результат на печати весьма ощутим по сравнению с обычной таблицей стилей. Разумеется, CSS-файл будет довольно сильно отличаться в зависимости от дизайна, но общие принципы, указанные в статье, применимы к практически любому проекту.

Разработка, сопровождение и раскрутка сайтов Создание "версии для печати" веб-страницы

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

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

Для удобства пользователей разработчики сайтов обычно создают отдельную страницу - версию для печати , на которой оставляют только необходимый текст, рисунки в черно-белом варианте (оттенки серого) и контактные данные для связи.

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

Внизу страницы желательно указать полные контактные данные: адрес, телефон, e-mail, ICQ, URL сайта и др.

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

На самой странице версии для печати хорошим тоном считается установить кнопку Печать, при щелчке по которой открывается окно установок принтера. Для этого используется метод JavaScript window.print(); который печатает на принтере Web-страницу, находящуюся в текущем окне. Неплохо также разместить и ссылку для возврата на основную страницу.

Оформление кнопок можно сделать простыми ссылками
Распечатать (код Распечатать) и , но интереснее - с помощью тега :

HTML-код такой комбинации:

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

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

Полезные статьи по теме "Разработка, сопровождение и раскрутка сайтов"

Сегодня вас ждёт заметка из серии советов по дизайну. И дизайну не графическому, а дизайну интерфейса. Думаю, многие из вас хоть раз распечатывали страницу сайта прямо из браузера. Последовательность обычно такая: нажать Ctrl+P, ждать минуту, потом догадаться вставить бумагу в принтер, снова нажать Ctrl+P, удивиться, зачем было печатать столько баннеров, счётчики и главное меню. Нужна-то была всего лишь карта проезда и контакты.

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

Зачем делать отдельную версию

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

Кроме того, разное разрешение экранов пользователей не позволит нам знать, как именно распечатается тот или иной элемент. Поэтому я бы советовал убирать всё лишнее и быть уверенными, что все распечатки будут одинаковыми.

Как указать, что печатать?

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

Таким образом в печать уйдёт то, что находится в области контента. Всем элементам, которые вы хотите спрятать при печати, присваивайте свой класс, например «no-print».

Также мы можем указать, что на печать не должны отправляться изображения, находящиеся в папке с баннерами. Делается это с помощью маски. Для этого надо указать в CSS:

img { display: none !important; }

Этим кодом мы скроем все баннеры, которые будут встречаться в любом месте на странице. Таким же образом нужно сделать невидимыми остальные элементы.

No-print { display: none !important; }

Применение на практике

Для того, чтобы файл print.css обрабатывался только во время отправки на печать, нужно указать его в таким образом:

Распечатать эту страницу

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

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

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

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

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

Я забросил домашние принтеры очень давно, так как мне всегда казалось, что они ломаются после 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

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