Веб-страница для печати

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

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

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

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

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

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

<link rel="stylesheet" href="URL to your print.css" type="text/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;}

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

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

Реклама