![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Особенности создания принт-версии страницы
При создании принт-версии надо учитывать, что 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; }
|