Сайт веб-мастера Александра Климова

Веб-мастер (англ. webmaster) — человек, профессионально или в качестве хобби занимающийся разработкой веб-сайтов в Интернете или корпоративных приложений в интранете.  Wikipedia

Подготавливаем веб-страницу для печати средствами CSS

Дата добавления: 2010-03-30



Подготавливаем веб-страницу для печати средствами CSS

О чем вообще идет речь? Что значит подготовить страницу для печати средствами CSS? В CSS имется возможность настроить вид страницы, если пользователь захочет распечатать ее на принтере.

Зачем это нужно?

Предположим, ваша страница не имеет подготовленного варианта для печати. Если страница имеет сложную структуру навигации и контента, то при печати вылезет совсем не то, что вы видите на экране. Вы можете получить представление о том, как будет выглядеть страница на бумаге, если выберите в меню браузера Файл | Предварительный просмотр. К вашему удивлению, верстка при печати поплывет и страница может измениться до неузнаваемости. Более того, страница, которая выглядит компактно на вашем экране, при печати может занять несколько полупустых страниц. Кроме того, если на вашей странице активно используются блоки рекламы, то ее совсем необязательно печатать на принтере. Именно, поэтому в CSS есть возможность настройки вида документа для печати.

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

Как это работает

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

Чтобы настроить печатную версию сайта, достаточно включить ваш файл print.css в раздел страницы с параметром media="print". Браузеры при печати найдут данный файл и будут использовать стили из него.


Рекомендации

Чтобы не допустить некоторых ошибок, используйте следующие рекомендации.

  • Сбросьте все стили, которые отвечают за отступы (margin, padding). Они могут стать источником головной боли при печати.
  • Обратите внимание на шрифты. Возможно, шрифты для сайта не совсем хорошо выглядят на бумаге. Установите нормальный размер шрифта, интервалы и тому подобное.

Это может выглядеть следующим образом:

/*Reset Style*/ 

body 
{
    margin:0;
    padding:0;
    line-height: 1.4em;
    word-spacing:1px;
    letter-spacing:0.2px;
    font: 13px Arial, Helvetica,"Lucida Grande", serif;
    color: #000;
}

Удаляем лишние элементы

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

#logo, #catnavi, .topnavi, .more-link, .navigation, #sidebartop, #related, #social, #sponsors, .tabs, #allpost, .toolbar, .splitbox, #commentform, #commentabs .idTabs, .postmeta-content .comments, #respond h3, .tag, .footerlinks 
{
    display:none;
}

Ссылки

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

/* Show URL */ 

a:link, a:visited {background: transparent; color:#333; text-decoration:none;}  

a:link[href^="http://"]:after, a[href^="http://"]:visited:after {content: " (" attr(href) ") "; font-size: 11px;}  

a[href^="http://"] {color:#000;} 

Разрыв страницы

Предположим, пользователь хочет распечатать ваш пост в блоге, но не хочет распечатывать комментарии к нему. Вы можете помочь ему, если будете использовать стиль page-break-before: always;, что позволит перенести комментарии на новую страницу. В этому случае пользователь может указать в настройках количество нужных ему страниц.

/*Break Page*/ 

#comments {page-break-before: always;}
Печать

Страницу можно распечатать через меню браузера Файл | Печать.

Заключение

Если вы еще не используете файл стилей для печати, то почему бы не начать это делать уже сегодня? Помогите вашим читателям, и они скажут вам спасибо.

Просмотров: 13633

Комментарии:

Комментарий добавил(а): tehnolog
Дата: 2010-03-30

Спасибо. пригодится

© А.Климов 2021

Рейтинг@Mail.ru