Привет Хабрахабр! В своей первой статье, я хочу продолжить обсуждение темы о которой уже говорили — «Подготовка веб-страниц для печати средствами CSS»…



Статью написал vastvision , я только публикую.

Определение размера страницы

С точки зрения печати, для CSS, веб страница состоит из двух блоков: Область страницы (page area) и область полей (margin area).

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




CSS 2.1 позволяет задать только размер области полей. Делается это так:

@page {margin:0.5in;}

Важно помнить, что при подготовке страницы для вывода на печать, все размеры должны быть указаны в дюймах (in), пунктах (pt), пиках (pc) или сантиметрах/миллиметрах(cm/mm)


Так же полезным может быть применения свойства page вместе с псевдоклассами: left,: right.

В данном примере, у первой и второй страницы отступы от условного разворота книги будут равны 5ти сантиметрам:

@page: left {margin-left:3cm; margin-right:5cm;}
@page: right {margin-left:5cm; margin-right:3cm;}

Разрывы!

Для управления разрывами выводимых на печать страниц существуют специальные свойства: page-break-before и page-break-after, которые могут иметь значения: auto, always, avoid, left, right, inherit.

С этими свойствами всё довольно просто, вот пример:

Допустим мы хотим, чтобы после каждого заголовка h1 остальной текст переходил на новую страницу, для этого нужен следующий код:

h1 {page-break-after: always;}


Значения left и right позволяют уточнить это правило:

Мы хотим что бы перед каждым заголовком h3 правой (от условного разворота книги) страницы был разрыв:

h3 {page-break-before: right;}


А вот значение avoid запрещает вставлять разрывы между элементами.

Нельзя вставлять разрывы между заголовком h6 и следующим за ним текстом:

h6 {page-break-after: avoid;}

widows и orphans

Свойство widows определяет минимальное колличество строк, которые могут находится на следующей странице веб документа без переноса всего остального текста элемента. Сразу пример:



На рисунке видно как две строки абзаца p переносятся на следующую страницу документа. В данном случае значение widows равно 2 (по умолчанию).

p {widows: 2;}


Но если бы значение widows было бы 3 или более, то весь абзац был бы перемещён на новую странцу.


Эффект применения orphans аналогичен, но с противоположной стороны, он задаёт минимальное количество строк элемента, которые могут оставаться в нижней части страницы без разрыва страницы.


Например если бы в предыдущем примере значение orphans было бы равно 6, то 5 строчек абзаца перенеслись бы на следующую страницу.


Это первая статья vastvision . Не ругайте его сильно.