Дизайн веб-страниц для печати с помощью CSS

Если вы предполагаете, что пользователи будут распечатывать ваши веб-страницы на принтере, позаботьтесь о наличии отдельных стилей CSS для корректного отображения информации на бумаге. Prostoweb.com.ua предлагает рассмотреть модули CSS, созданные не для отображения веб-страниц с помощью браузеров, а для распечатывания на принтере.

Почему имеет смысл использовать HTML и CSS для подготовки страниц к печати

Может показаться странным, что материал, который не предназначен для публикации в Интернете, форматируется с помощью HTML и CSS. Это перестанет казаться странным, если вы будете знать, что форматы файлов для мобильных устройств EPUB и MOBI — это HTML и CSS в новой обложке. В дополнение ко всему, на HTML удобно форматировать документ, гораздо быстрее, чем в Word’е.

Разница между CSS для Веба и CSS для принтера

Самой большой разницей и концептуальным сдвигом является то, что распечатываемые документы имеют дело со страницами фиксированного размера, в то время как веб-страницы могут быть любого размера. Из-за фиксированного размера страницы мы рассматриваем документ как набор страниц, а не сплошной поток информации.

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

Вы могли бы импортировать документ в издательскую программу и создать всё это вручную. Однако тогда вам придётся переделывать весь документ при внесении каких-либо правок. И тут на сцену выходит CSS, чья спецификация разработана и для создания многостраничных документов.

Из-за того, что в данной статье мы рассматриваем многостраничные документы, вопрос совместимости браузеров обсуждаться не будет.

Спецификации

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

Правило @page

Правило @page позволяет вам задать различные аспекты страницы. Например, вам понадобится задать её размеры. Нижеприведенное правило задаёт размер страницы 210х297 мм (формат А4):

@page {

                size: 210mm 297mm;

}

Также вы можете задавать размер страницы, используя устоявшиеся форматы, такие как «A4» и «Legal»:

@page {

                size: A4;

}

Еще вы можете задавать ориентацию страницы с помощью ключевых слов «portrait» и «landscape»:

@page {

                size: A4 landscape;

}

Понимание модели страниц

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

Модель документа с фиксированным размером страницы задаёт пространство страницы и 16 окружающих его областей.

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

Левые и правые страницы

Ещё один аспект модели страницы заключается в том, что он определяет селекторы псевдо-классов для левых и правых страниц вашего документа. Если вы посмотрите на любую напечатанную книгу, вы заметите, что поля левых и правых страниц различаются.

Данные селекторы можно использовать для определения различных полей для страницы:

@page :left {

                margin-left: 3cm;

}

@page :right {

                margin-right: 3cm;

}

Также существуют два других селектора псевдо-классов. Селектор :first задаёт первую страницу документа.

@page :first {

}

Селектор :blank задаёт указанную страницу как страницу, «намеренно оставленную пустой». Для того чтобы добавить на неё этот текст, мы можем использовать сгенерированный контент, который выводится в верхней средней области страницы (top-center margin).

@page :blank {

                @top-center { content: “Эта страница намеренно была оставлена пустой.” }

}

Сгенерированный контент и страничный документ

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

@page :right {

                @bottom-left {

                               margin: 10pt 0 30 pt 0;

                               border-top: .25pt solid #666;

                               content: “Название документа”;

                               font-size: 9pt;

                               color: #333;

                }

}

Разбивка страниц

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

Обычной практикой является вывод названия в тэге

. Для того, чтобы такой заголовок всегда выводился на новой странице, присвойте параметру page-break-before значение always.

h1 {

                page-break-before: always;

}

Для того чтобы избежать разрыва сразу после заголовка, используйте page-break-after.

h1, h2, h3, h4, h5 {

                page-break-after: avoid;

}

А чтобы избежать разрыва изображения и подписи к нему, таблицы и её названия, используйте свойство page-break-inside.

table, figure {

                page-break-inside: avoid;

}

Нумерация

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

С этой задачей мы справляемся благодаря счётчикам CSS.

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

В нижеприведенном примере мы добавляем номера страниц в правую нижнюю область полей для правых страниц и в левую нижнюю область полей для левых.

@page:right {

                @bottom-right {

                               content: counter(page);

                }

}

@page:left {

                @bottom-left {

                               content: counter(page);

                }

}

Также мы создали счётчик под названием «pages». Этот счётчик всегда будет отображать общее количество страниц в документе. Если хотите, можете выводить «Страница 10 из 120».

@page:left {

                @bottom-left {

                               content: “Страница “ counter(page) “ из “ counter(pages);

                }

}

Вы можете создавать счётчики под другим названием, изменять их значение, когда захотите. Для создания счётчика используйте свойство counter-reset, для его увеличения — свойство counter-increment. Правила CSS, приведенные ниже, создают счётчик глав под названием chapternum и увеличивают его на 1 с каждым заголовком в тэге

. Мы используем значение этого счётчика в сгенерированном контенте и выводим его перед названием главы.

body {

                counter-reset: chapternum;

}

h1.chapter:before {

                counter-increment: chapternum;

                content: counter(chapternum) “. “;

}

Аналогично мы можем поступить с иллюстрациями. Обычной практикой является нумерация иллюстраций для каждой главы, например, «Рис. 3-2». При следующем заголовке главы

мы сбрасываем счётчик нумерации иллюстраций, чтобы в новой главе он начался с 1.

body {

                counter-reset: chapternum figurenum;

}

h1 {

                counter-reset: figurenum;

}

h1.title:before {

                counter-increment: chapternum;

                content: counter(chapternum) “. “;

}

figcaption:before {

                counter-increment: figurenum;

                content: counter(chapternum) “-“ counter(figurenum) “. “;

}

Строки

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

Реализуется это с помощью свойства string-set того селектора, из которого мы собираемся взять содержимое. Для заголовка главы это будет

. Значением string-set будет название, которое вы дали контенту, и затем content(). Потом вы можете вывести это в качестве сгенерированного контента с помощью string().

h1 {

                string-set: doctitle content();

}

@page :right {

                @top-right {

                               content: string(doctitle);

                               margin: 30pt 0 10pt 0;

                               font-size: 8pt;

                }

}

Во время генерации вашего многостраничного документа каждый раз, когда встречается тэг

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

.

Сноски

Сноски являются частью спецификации содержимого, сгенерированного CSS для многостраничных документов. Они работают следующим образом: вы добавляете текст для сноски внутри документа, взятый в тэг HTML (скорее всего это будет <span>) и с присвоенным классом, идентифицирующим этот текст как сноску. Во время генерации страницы, содержимое этого «элемента сноски» убирается и превращается в сноску.

Используйте значение float сноски, для создания правила для класса.

.fn {

                float: footnote;

}

Используйте данный класс для обозначения сноски в документе.

СноскиСноска — примечание, помещаемое внизу полосы (постраничная сноска) или в конце текста (концевая сноска). обычно набирают шрифтом пониженного кегля по сравнению с основным текстом и отделяют от него пробелом или линейкой.

У сносок есть предустановленный счётчик, работающий так же, как и счётчик страниц. Естественно, вы захотите увеличивать номер сноски на 1 каждый раз, как встретится класс fn, и сбрасывать его значение с началом новой главы.

.fn {

                counter-increment: footnote;

}

h1 {

                counter-reset: footnote;

}

Различные части сносок могут быть обозначены псевдо-элементами CSS. Например, footnote-call является цифровым якорем в тексте, показывающим, что присутствует сноска. Тут используется значение счётчика сносок как сгенерированный контент.

.fn::footnote-call {

                content: counter(footnote);

                font-size: 9pt;

                vertical-align: super;

                line-height: none;

}

Footnote-marker — это цифровой маркер, помещённый перед текстом сноски в футере документа. Работает также как и порядковые числа, генерируемые в упорядоченном списке.

.fn::footnote-marker {

                font-weight: bold;

}

Сами по себе сноски располагаются в специально выделенной области страницы, называемой @footnotes, которую можно традиционно отделить линией от основного текста.

@page {

                @footnotes {

                               border-top: 1pt solid black;

                               }

}

Перекрёстные ссылки

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

Мы будем использовать ещё одно свойство, target-counter, для того, чтобы добавить эти номера. Начнём с создания ссылок в вашем документе, присваивая им href, содержащий идентификатор элемента в документе, на который вы ссылаетесь.

Глава 1

Потом, после ссылки, снова используйте сгенерированный контент для вывода (страница X), где “X” — это номер места в книге, где этот идентификатор может быть найден.

a.xref:after {

                content: “ (страница “ target-counter(attr(href, url), page) “)”;

}

Статья взята для перевода с сайта smashingmagazine.com

На нашем сайте вы можете сравнить стоимость услуг дизайна сайтов.