Особенности создания принт-версии страницы

При создании принт-версии надо учитывать, что px на экране и px на принтере – это далеко не одно и то же. Принтер работает с таки понятием, как dpi (dots per inch) – количество точек на дюйм. Т.е., если, допустим, изображение шириной 700×700px на экране занимает половину окна браузера, то это еще не значит, что и на листе формата А4 оно будет занимать пол-листа. Также надо учитывать, что при выводе на принтер каждый браузер ставит свои поля печати и вообще имеет собственное представление об области печати и разрешающей способности принтера. Таким образом, надо иметь ввиду, что сделать абсолютно одинаковую для всех браузеров принт-версию невозможно. Исходя из всего вышесказанного, писать принт-версию «вслепую» нельзя: каждый шаг перепроверяем под всеми браузерами.

Есть два основных метода создания принт-версий:

1. модификация all.css;

2. с нуля.

В первом случае мы используем уже готовые стили, описанные в all.css (см. 4.1). В print.css выносятся только те фрагменты, которые надо изменить: контейнерам, которые надо удалить присваивается свойство display:none;, переназначаются размеры блоков и иллюстраций и т.д.

Во втором пишем отдельно screen.css и print.css (см. 4.1). В этом случае принт-версия не зависит от стилей экранной версии.

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

Например:

HTML:

<div id="main">

<div id="header">header </div>

<div id="leftcolumn">left column</div>

<div id="content">content</div>

<div id="footer">footer </div>

</div>

screen.css:

#main {

margin: 0 auto;

width: 710px;

}

#header {

width: 710px;

height: 50px;

}

#footer {

width: 710px;

height: 50px;

clear: both;

}

#leftcolumn {

width: 100px;

float: left;

}

#content {

width: 610px;

float: left;

}

print.css:

#main {width: 100%;}

#header {

width: 100%;

height: 50px;

}

#footer {

width: 100&;

height: 50px;

clear: both;

}

#leftcolumn {

width: 20%;

float: left;

}

#content {

width: 80%;

float: left;

}

Не забывайте постоянно контролировать результаты внесенных изменений.

Свойство page-break- before в состоянии always устанавливает разрыв страницы перед блоком, т.е. указав это свойство тэгам <h1>-<h6> можно начинать соответствующий раздел с новой страницы.

Свойство page-break-inside в состоянии avoid запрещает разрыв страницы внутри блока, т.е. указав это свойство тэгу <p> можно переносить на следующую страницу полный абзац.

Свойства orphans и widows указывают, сколько строк можно оставить внизу и верху страницы соответственно. По-умолчанию у обоих свойств указано значение 2.

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

Подроблее о свойствах, предназначенных для принт-версий на http://www.w3.org/TR/CSS21/page.html