Версия для печати



Статьи для веб-мастера - Kaminskiy-web Версия для печати
Статьи HTML и CSS JavaScript PHP и MySQL Раскрутка сайтов Хостинг Рейтинг украинского хостинга Анекдоты Анекдотов стрит

Автор статьи: Сергей Каминский

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


Версия для печати

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

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

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

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

Добавляем CSS

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

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


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

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

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

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

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

Полезные советы

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

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

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

Другие записи по теме в разделе статьи по HTML и CSS

www.kaminskiy-web.com

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


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

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


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

Создание связей.

Существует несколько способов импорта содержимого внешних таблиц стилей CSS в html документ и определения необходимых правил непосредственно в файле исходного кода страницы.

Мета тег <link>.

Наиболее распространенный и привычный вариант – использование мета тега <link>, в котором предусмотрен атрибут 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. В определяемом в данном случае правиле можно указывать несколько видов носителей, для которых предназначено форматирование. При этом синтаксис допускает два варианта написания команды:

Как видно из примера особых различий у допустимых вариантов нет. В одном случае применяется директива url, а второй предусматривает написание пути к требуемому файлу CSS без нее. Приведенное в качестве примера правило предусматривает использование файла stylesheet.css, находящегося в папке styles, который предназначен для форматирования документа для устройств с постраничным выводом информации (print — принтеры, projection — слайд-проекторы и подобные им устройства).

Непосредственно в html документе веб-страницы.

Для этого используется CSS правило @media, в рамках которого указываются свойства форматирования документа и необходимые значения для них. Непосредственно за ключевым словом @media определяется один или несколько типов носителей (через запятую), для которых выполняется форматирование:


Как можно догадаться, в примере, в рамках первого правила @media описаны CSS свойства для рабочей области документа (<body>), предназначенные для его отображения на устройствах с постраничным выводом информации (print, projection). А последнее правило определяет внешний вид страницы отображаемой на экране (screen).

Рекомендации по форматированию версии документа для печати.

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

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

    Если, при выводе на экран документа используется какое-либо фоновое изображение или просто фоновая заливка, а также если вы применяете цветной шрифт, отличный от стандартного варианта (черного), то при создании CSS файла для печати нужно отменить это форматирование. Распечатываемая страница должна выглядеть как можно проще – белый фон и черный шрифт. Многие пользователи для распечатки веб-документов используют чёрно-белый режим печати. К тому же, при распечатывании страницы с насыщенной цветовой схемой значительно повышается расход чернил или тонера.


  • Измените тип используемого шрифта.

    В оформлении текста большинства веб-страниц, предназначенных для чтения онлайн применяют рубленые шрифты — sans serif (без засечек), так как они считаются более удобными при чтении с экрана монитора. Но при перенесении страницы на бумагу, ситуация меняется и здесь более подходящими будут шрифты с засечками — serif, для которых характерны небольшие декоративные элементы (засечки) на окончаниях каждой буквы. Считается, что именно засечки способствуют направлению взгляда пользователя в нужном направлении – по тексту. Поэтому, большие объемы текста должны быть оформлены шрифтом с засечками (Times New Roman, Georgia, Palatino и другие).

  • Обратите внимание на размер шрифта.

    Если для отображения текста на экране допустимо использовать относительно мелкий размер шрифта (11 пикселей, а иногда и меньше), то для печатного варианта страницы необходимо увеличить его минимум до 12 пикселей, но никак не меньше – все зависит от аудитории, на которую рассчитана содержащаяся в документе информация.

  • Выделите, используемые на странице ссылки.

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


  • Удалите лишние изображения.

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

  • Уберите элементы навигации.

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

  • Удалите ненужную рекламу.

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

  • Удалите все анимированные изображения.

    Интерактивные графические элементы, управляемые при помощи скриптов, а также анимированные Flash изображения, как правило, распечатываются некорректно, а в отдельных случаях дефекты их печати («сползание») могут повлиять на качество отображения текста, что совсем неприемлемо.

  • Авторская информация.

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

  • Используйте полный URL адрес вашего сайта.

    Включение полного URL адреса распечатываемой страницы в нижней, заключительной ее части является очень важным моментом. Это позволит пользователям быстро вернуться на нее и воспользоваться какой-либо ссылкой, ведущей на другую страницу, содержащую расширенную информацию по рассматриваемому вопросу или с другой целью. В любом случае, это способствует повторному посещению вашего ресурса пользователем. К тому же, при дальнейшем размножении распечатанной страницы (при помощи фотокопий, например), о вашем сайте узнают больше людей.

  • Включите информацию об авторских правах.

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

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

webknowledge.ru

1. Создаем ссылку “Версия для печати”

Нам необходимо создать элемент на странице, при клике на который будет инициализирован процесс печати. Это может быть стилизованная с помощью CSS ссылка с хеш-тегом в адресе (например, href=”#print”) или кнопка, или любой другой элемент. На этом сайте использована ссылка вида:

<a class="print" href="#print">Версия для печати</a>

Ссылке необходимо прописать класс или атрибут ID, это понадобится в дальнейшем для прикрепления к ней обработчика клика.

2. Помечаем область печати

Пользователю совсем не интересно печатать страницу со всеми элементами дизайна, навигацией, баннерами и дополнительными блоками. Поэтому, необходимо пометить в HTML-коде, какой из элементов содержит требуемый для печати контент. На данном блоге используется DIV-элемент с id=“article”.

<div id="article">Текст статьи с изображениями</div>

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

3. Создаём функцию печати

Теперь необходимо создать функцию. Для упрощения процесса рекомендуется использовать фреймворк jQuery (ниже представлен вариант с использованием именно jQuery), однако, можно адаптировать скрипт и для других библиотек.

Рассмотрим подробно важные элементы скрипта и возможные настройки.

$(document).ready(function(){

Эта строчка означает, что внутренний скрипт будет инициализирован после загрузки страницы в браузер. Те, кто работает с jQuery постоянно используют данную конструкцию.

$("a.print").click(function(){

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

// hide excessive
docprint.document.write(".post-views,.post-date,.banner-top,.retweet-parent,.sibscribe-form,.related,.print-link{display:none;}");

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

// style images
docprint.document.write("img{margin-bottom:1em;border:1px solid #bbb;}");
docprint.document.write(".left{margin-right:1em;}.right{margin-left:1em;}");

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

// describe links
docprint.document.write('a[href]:after {content: " (" attr(href) ") ";font-size:.8em;}');
docprint.document.write('a[href^="/"]:after {content: " (http://"'+document.domain+&#39; attr(href) ") ";}');

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

docprint.document.write($("#article").html());

В этой строчке берется отмеченный нами элемент (в данном случае с атрибутом id=“article”) и всё его содержимое помещается в новый документ для будущей печати.

Такой простой механизм позволит “убить сразу несколько зайцев”, позволяя удобно печатать статьи читателям. При этом, не надо заботиться о дублях контента или проблемах краулинга. Рекомендую использовать подобную технику!

Кстати, вы можете проверить, как работает описанный выше приём, прямо сейчас, кликнув на соответствующую ссылку в конце статьи ?

devaka.ru

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

Это значит, что кто-то вручную или автоматически с помощью скрипта
взял исходный документ и, сняв с него всё лишнее, создал его копию,
более удобную для печати. Может быть подобной работой приходилось
заниматься и вам.

Решение — таблицы стилей для печати

Одной из замечательных особенностей CSS является возможность
создания таблиц стилей, ориентированных на разнообразные устройства
вывода. Мы привыкли создавать таблицы стилей для отображения страниц на
экране, но мы еще не привыкли думать о других средствах отображения. И,
как подтверждают ссылки «версия для печати», о печати документа мы
думаем лишь как о представлении документа в другом виде.

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

Сегодня вы можете взять любой (X)HTML-документ и подготовить его к
печати с помощью стилевой таблиц, не прикасаясь к разметке. И вот в
прошлое уходят проблемы с созданием и синхронизацией двух версий
документа — одной для экрана, другой — для печати. И что самое
приятное: сделать это проще простого.

Обходим ошибку с плавающими элементами

Браузеры семейства Gecko, такие как Netscape 6.x или Mozilla, имеют
проблему с печатью длинных «плавающих» блоков (long floated elements).
Если плавающий элемент вышел за пределы печатной страницы, то
оставшаяся часть полностью пропадает, так и не появившись на следующей
странице.

Если ваш сайт похож на «A List Apart», т.е. статьи в нём заключаются
в один большой плавающий блок, то это значит, что читатели при
распечатке получат лишь первую страницу статьи.

Решение, как и следовало ожидать, заключается в отмене свойства
«плавающий» у блока с текстом перед печатью. Если вкратце, для всех
плавающих элементов устанавливается стилевое правило «float: none».
Сделав это, вы вернёте все плавающие элементы к обычному виду, и
документ будет напечатан так, как и предполагалось — страница за
страницей вплоть до самого конца.

Итак, именно это я и предложил сделать Зельдману для ALA, и, как
только он это сделал, проблема с печатью исчезла. У броузеров семейства
Gecko эта ошибка по-прежнему не исправлена (на момент написания
статьи), но всё же её можно легко обойти предложенным выше способом.

В путь

Ниже представлена «печатная» таблица стилей, с помощью которой «A List Apart» решил проблему печати плавающих элементов:

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

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

Если посмотреть на содержимое тега <head> новых статей на сайте ALA, мы обнаружим (в гуще начинки) следующие строки:

У нас есть файл таблицы стилей, print.css, применение которого для
печатных устройств «print» было оговорено значением атрибута «media».
Файл таблицы стилей nucss2.css, который импортируется с помощью
конструкции @import дабы скрыть его от Navigator 4.x, будет использован
при отображении страницы на любом устройстве вывода (атрибут
media=»all»). Это может быть дисплей, принтер, проектор, синтезатор
речи и так далее. Разойдясь, мы могли бы записать в таблицу стилей для
печати директивы для фонового цвета страницы и указать шрифты в
пикселях.

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

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

Отбеливание фонов

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

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

Если мы призовем на помощь свойство background, мы одним махом решим
обе проблемы. Чтобы сделать решение более гибким, зададим для элемента
«body» белый фон, а элементы «wrapper» и «content» пусть имеют
прозрачный фон (и тем самым через них будет проступать белый цвет
«body»):

Задание цвета переднего плана (цвет шрифта) не было абсолютно
необходимым, но лучше не забывать об этом. Итак, сейчас у нас есть два
«неплавающих» элемента (#wrapper, #content) с прозрачным фоном, и
страница — с белым фоном.

Вас может взволновать то, как Navigator 4.x обходится со значением
«transparent», но выше нос: NN4.x обращает внимание лишь на таблицы
стилей, у которых атрибут «media» имеет значение «screen». Так же как и
в случае с директивой @import, наши таблицы стилей для печати всегда
сокрыты от подслеповатых глаз Navigator 4. Так что, здесь не о чём
беспокоиться.

Размер шрифта для печати

Общая таблица стилей задаёт размер шрифта равный 11 пикселям. Весьма
неудачный выбор при печати. Само семейство шрифтов — сначала Georgia ,
а потом serif — отлично подходит для печати, так как шрифты с засечками
обычно лучше выглядят на бумаге. Необходимо изменить лишь размер
шрифта. Вот так:

«Постойте!», — вероятно, воскликнете вы. — «Пункты — это зло!»

Что ж, да, так он и сказал, и был полностью прав — для экрана нельзя
задавать размеры шрифта в пунктах. При печати же применение пунктов
имеет такой же смысл, как и многие десятилетия назад. Раз уж мы готовим
таблицу стилей для печати, то определить размера шрифта для «body» в 12
пунктов будет правильным и естественным.

Вы, конечно, можете задать любой размер, какой пожелаете, однако
шрифт в 12 пунктов наиболее употребителен. И так как в общей таблице
стилей размеры всех остальных элементов страницы даны относительно
размера в элементе «body», наша работа закончена.

Marginalia

Существующие стилевые правила задают для левых и правых границ
(margins) элементов wrap и content размер в 5%. Это значит, что с обеих
сторон статьи будет «пустое место», и каждое такое «пустое место» будет
составлять 10% ширины области печати. Это следствие того, что блок с
текстом статьи «content» лежит внутри обрамляющего блока «wrapper», и
каждый их них имеет поля по 5% с левой и правой сторон.

Исходная общая таблица стилей задаёт 15%-ный правый отступ (padding)
для блока «content». Границы уже дали нам 10%, так что нам надо
добавить ещё 5%. Это достаточно просто сделать:

В другом варианте решения можно бы быть оставить границы (margin) в
покое и добавить 5% к левому отступу (padding). Так как блок «content»
не имеет видимого фона, мы получили бы такой же результат.

К сожалению, некоторые броузеры имеют проблемы с адекватной
обработкой отступов (padding), так что перемещать элементы по странице
лучше с помощью границ (margin).

Ссылки при печати

Был один хитрый вопрос — что же делать с гиперссылками? Очевидно, на
печати они не могут быть столь полезны, как на мониторе, но часто важно
дать ключ к тому, на что же они ссылались в оригинале. Итак, вот что я
изобрёл:

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

В броузере, полностью поддерживающем спецификацию CSS2, мы можем
вывести URL-ы ссылок после них самих, тем самым делая услугу тем, у
кого окажется распечатка и броузер под рукой. Ниже показано правило,
которое применяется только для блока «content», и таким образом URL-ы
других ссылок не выводятся на печать:

Попробуйте это в броузерах на платформе Gecko — Mozilla или Netscape
6.x. На распечатке после каждой ссылки вы увидите в скобках относящийся
к ней URL.

В броузерах, не понимающих это стилевое правило, не будет никаких
нежелательных эффектов — ссылки все так же будут темно-красными,
подчёркнутыми и жирными. Просто после текста ссылок не будет выводиться
относящегося к ним URL, вот и всё.

Обратите внимание на то, что пробелы перед и после скобок являются
частью стилевого правила — не забудьте про пробелы, так как они должны
быть включенными в документ.

С этим новым правилом есть одна эстетическая проблема. Дело в том,
что оно предписывает дословно вставлять в документ значение атрибута
href.

Заглянув в код любой страницы с сайта «A List Apart», мы быстро
заметим там множество так называемых «относительных ссылок» вида
«/issues/144». Они будут вставлены в документ в таком виде, в каком они
есть, а хотелось бы что это были полные URL-ы.

В подобных случаях нам может помочь CSS3. Любой селектор атрибута,
использующий оператор ^=, выбирает элементы, основанные на начале их
значений атрибута. Таким образом, мы можем выбрать любой атрибут href ,
начиняющийся символом слэша, и вставить туда текст, заменяющий
существующее значение атрибута.

Это правило преобразует все значения типа «/issues/144/», в
«//www.alistapart.com/issues/144/». Это правило не сможет помочь в
случае с относительными URL, которые не начинаются со слэша, но, к
счастью, ALA не использует этот тип ссылок.

ВНИМАНИЕ! ВАЖНО! Как было сказано, селектор вида ^=
относится к селекторам спецификации CSS3. Валидатор для CSS от
консорциума W3 может тестировать лишь на соответствие спецификациям
CSS1 и CSS2. Не понимая селектор, относящийся к CSS3, валидатор будет
сообщать об ошибке даже в том случае, когда селектор не противоречит
рекомендациям спецификации.

Украшаем начало страницы

Просматривая еще раз окончательный вариант стилевой таблицы, я
обнаружил, что мне не очень нравится «шапка» страницы. Дело скорей было
не в самой шапке, а в самом «подчеркивании» названия сайта. Это
подчеркивание разумеется заканчивалось там, где заканчивалась картинка
заголовка. Мне вдруг пришло в голову, что было бы неплохо растянуть эту
линию подчеркивания на всю ширину страницы.

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

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

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

Второе правило (со свойством «vertical-align») показывает, как
обойти одну интересную особенность броузера Mozilla, которая видна лишь
тогда, когда документ представлен в режиме соответствия стандартам.

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

Что ещё?

Вот и всё, что мы сделали для ре-дизайна, но это вовсе не все, что можно было бы сделать.

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

Ещё одна область, которую мы не рассмотрели достаточно глубоко, —
изменение размеров шрифта. Множество классов (например, «superfine»),
используют заданные в общей таблице стилей пиксельные размеры шрифтов.
Поменять их размеры для печати также просто, как мы сделали это для
тела <body> документа: просто напишите правило для элемента и
задайте новое значение для свойства font-size .

К примеру, мы можем написать .superfine {font-size: 9pt;}… или
любое другое подходящее значение. Имеются другие элементы, подобно
нижним колонтитулам или тэгу <pre>, которые могут выиграть от
подобной работы.

Конечный результат

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

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

fortress-design.com

Версия для печати с использованием @media

Макет сайта содержит лишнюю информацию — навигационные элементы, рекламные блоки, неправильные цвета и т.п. Стилизовать макет для печатной версии можно с использованием правила @media. Внесите следующие правила в конец CSS-стилей макета:

Для блоков, которые должны быть скрыты, укажите дополнительный класс hidden-print, например:

Версия для печати на отдельной странице

Создайте отдельный макет, внесите в его код:

и CSS:

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

В макете добавьте кнопку для печати:

www.hostcms.ru

Версия для печати

Как вам наверняка известно, в каждом браузере есть возможность создания закладок (bookmarks) на заинтересовавшие вас страницы. И это очень удобно — нашел что-то понравившееся, сохранил закладку и вернулся, когда потребовалось. После чего… Ну, скажем, обнаружил, что страница уже удалена. Словом, иногда страницу хочется распечатать. И если автор сайта предусмотрел это желание посетителя, сделав «версию для печати», то посетителю наверняка будет приятно. И скорее всего, он снова вернется на этот сайт…

Для начала давайте подумаем, чем «версия для печати» должна отличаться от обычной страницы. Первое что приходит на ум — баннеры и прочая реклама. Действительно, зачем они нужны на бумаге? Долой!.. Следующая ненужная деталь — навигация по сайту. Тоже долой! Всякие счетчики, иконки и цветной фон тоже стоит убрать (разумеется, если основным содержанием страницы не является демонстрация чего-то именно на цветном фоне)… А вот чего не хватает — так это адреса документа, добавленного к тексту страницы (не все браузеры автоматически добавляют его при печати), и адресов встроенных ссылок. Действительно, если в этой статье написать, что об использовании CSS можно прочитать здесь, то при желании о нем прочитать вы просто щелкнете по ссылке. А вот если текст будет напечатан на бумаге, то вам придется долго думать, где же находится это «здесь» (современные браузеры как правило добавляют список ссылок при печати, но пользоваться им бывает не очень удобно)…

Теперь, определившись с тем, что нам хочется получить, подумаем, как этого добиться.

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

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

<LINK TYPE=»text/css» REL=»stylesheet» MEDIA=»print» HREF=»print.css»>

Все, что нам потребуется от этой таблицы стилей — это переопределить стили вывода различных блоков страницы. А именно — установить свойство display: none; для баннеров, навигации и прочих ненужных частей страницы (разумеется, для этого следует в «нормальной» версии страницы «загнать» эти элементы в блоки и задать им какой-то класс или идентификатор, чтобы в таблице стилей их можно было как-то адресовать). Обратите внимание, что изменять надо именно свойство display, а не visibility — если вы укажете в стиле visibility: hidden, то вместо блока появятся пустые пятна, а если укажете display: none, то такой блок просто исчезнет из стандартного потока, как будто его код вовсе не присутствует на странице. Кроме того, имеет смысл изменить шрифт — вместо «рубленых» шрифтов из семейства sans-serif при печати лучше использовать шрифт с засечками. Следует учитывать, что «исчезновение» ненужных элементов страницы вызовет «подвижку» всех остальных — природа, как известно, не терпит пустоты, — так что не забудьте проверить, как выглядит страница, к которой применен «печатный» стиль…

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

Способ третий: две строки. Этот способ является некоторой модернизацией предыдущего, позволяя использовать «печатную» таблицу стилей даже с теми браузерами, которые не понимают указания MEDIA=»print». Все, что требуется проделать — это подключить требуемую таблицу в зависимости от ссылки, по которой щелкнул посетитель. Например, к своей странице вы добавляете ссылку

<a href=»http://mysite.ru/mypage.php?view=print»>версия для печати</a>

а в заголовке страницы пишете что-то вроде

<link TYPE=»text/css» REL=»stylesheet» HREF=»<?php echo ($_GET[‘view’] == ‘print’) ? «print.css» : «normal.css»; ?>»>

Теперь (разумеется, если ваш сервер понимает PHP) при загрузке страницы будет проверено, не собирается ли посетитель страницу распечатать, и если да, то к странице подключится таблица print.css, а если нет, то normal.css. Кстати, раз уж ваш сервер все равно понимает PHP, то и вывод ссылки на «версию для печати» тоже можно автоматизировать:

<?php if ($_GET[‘view’] != ‘print’) echo «<a href=»».$_SERVER[‘PHP_SELF’].»?view=print»>версия для печати«; ?>

Этот способ, разумеется, тоже не лишен недостатков: во-первых, текстовые ссылки так и не появились, а во-вторых, пользователю будут пересылаться, в том числе, и те данные, которые не будут отображаться (все те же скрытые с помощью «печатной таблицы стилей» баннеры и навигация).

Способ четвертый: оптимальный. Этот способ объединяет все предыдущие, включая и с гневом нами отвергнутый «тривиальный». Суть его — автоматизировать изменение внешнего вида страницы. Реализация этого способа сильно зависит от того, каким образом у вас организован сайт, но общая идея заключается в том, чтобы разнести, например, в разные функции вывод постоянных элементов страницы (таких как логотип), временных — все тех же баннеров и навигации — и, собственно, содержимого.

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

$data = preg_replace(«|(]?href=»?(.*?)[ «>s].*?)|i», «$1 [ $2 ]», $data);

Вы сможете легко добавить ко всем внутренним ссылкам в тексте их адрес, заключенный в квадратные скобки, что обычно бывает удобно. Добавить адрес текущей страницы при таком подходе тоже не сложно, равно как и внести любые другие изменения, которые вы посчитаете нужными. И останется только сделать проверку переменной $_GET[‘view’] и в зависимости от ее значения решить, надо ли выводить на страницу навигацию, и надо ли совершать дополнительные преобразования над текстом.

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

Способ пятый: футуристический. Теоретически существует возможность изменять стили различных элементов страницы с помощью клиентских скриптов — например, JavaScript. При этом все преобразования внешнего вида страницы будет проводить браузер посетителя, что, в принципе, является идеальным вариантом — не придется несколько раз пересылать одни и те же данные. Но, увы — в настоящее время поддержка подобного динамического изменения стилей очень сильно различается в разных браузерах, так что реализация данного способа будет слишком трудоемка, а в некоторых случаях и вообще невозможна…

hostinfo.ru

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

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

Другой способ — создание стилей сайта для печати. Для этого создается отдельный файл CSS версии для печати. Подключается он между тегами <head></head> следующей строкой:

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

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

Содержание файла nubexPrint.css следующее:

То есть элементам, которые необходимо скрыть при печати, присваивается класс noprint, который описан в файле nubexPrint.css (отображение запрещено).

В приведенном примере будет распечатана страница с логотипом сайта, основным контентом и блоком контактов в подвале. Меню сайта и рекламные блоки распечатаны не будут.

В конструкторе сайтов «Нубекс» есть версия страниц для печати.

nubex.ru

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

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

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

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

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

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

<img src="/ban/sobchak.jpg" class="no-print">

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

img[src*="/ban/"] { display: none !important; }

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

.no-print { display: none !important; }

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

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

<link rel="stylesheet" type="text/css" media="print" href="print.css">

На странице мы можем вставить ссылку на печать:

<a href="javaScript:window.print();">Распечатать эту страницу</a>

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

tokar.ua


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.