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

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

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

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

2. с нуля.

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

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

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

Например:

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.

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

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

Особенности создания страниц с использованием правостороннего ввода текста (арабский, иврит и т.п.)

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

Реализация (2 способа):

1. Установить в CSS на body свойство direction: rtl, учесть при этом, что левый и правый паддинги у объектов поменяются местами, т.е.

CSS обычный

body{…}

div{padding: 0 10px 0 15px; }

CSS с правосторонним вводом

body{

…

direction: rtl;

}

div{padding: 0 15px 0 10px; }

2. Ставть direction: rtl; конкретно на каждый текстовый блок, но если у блока есть правый и/или левый паддинги учесть, что они (паддинги) меняются местами

CSS обычный

div{padding: 0 10px 0 15px; }

CSS с правосторонним вводом

div{

direction: rtl;

padding: 0 15px 0 10px;

}