Если вы упоминаете печать с CSS для многих людей, которые работают в Интернете,
стиля печати sheets 1 являются использование, которое приходит на ум.Мы все хорошо использовать для создания таблиц стилей, что называется от того, когда веб-документ напечатан.Эти таблицы стилей убедиться, что версия для печати разборчив, и что мы не вызывают пользователю распечатать огромные изображения.Однако, CSS, также используется для форматирования книг, каталогов и брошюр — контента, который может никогда не были разработаны, чтобы быть веб-страница на всех .
В этой статье мы взглянем на CSS-модулей, которые были созданы не для использования в веб-браузерах, но дело с печатными и страничным носителем.Я объясню, как селекторы, свойства и значения, которые они представляют работу.Я закончу с рабочего примера, который можно использовать в качестве отправной точки для собственных экспериментов.Для этого, например, нам понадобится пользовательский агент, поддерживающий эту специализированную CSS.Я буду использовать принца, который является коммерческим продуктом.Тем не менее, князь имеет бесплатную версию, которая может использоваться для некоммерческого использования, что делает его хорошим инструментом, чтобы попробовать эти примеры .
Почему HTML и CSS смысла Print
Это может показаться немного странным, что содержимое не особенно предназначенных для веб должны быть сохранены как HTML и отформатировать с помощью CSS.Это кажется менее странным, когда вы понимаете, что популярные форматы читалка, такие как EPUB и MOBI являются HTML и CSS под капотом.Кроме того, даже если совокупность рукописи или каталога не будет опубликован на веб-сайте, некоторые из них, вероятно, будет.HTML становится удобный формат стандартизировать, гораздо проще иметь дело, чем иметь все в документе слово или традиционная пакета настольной издательской .
Различия между сотовыми Для веб-сайтов и CSS Для Print
Самая большая разница, и концептуальный сдвиг, является то, что печатные документы сослаться на страницу модели, которая имеет фиксированный размер.В то время как в Интернете, мы постоянно напоминают, что у нас нет ни малейшего представления о размере окна просмотра, в печати фиксированный размер каждой страницы оказывает влияние на все, что мы делаем.В связи с этим фиксированного размера страницы, мы должны рассмотреть наш документ как совокупность страниц, страничным носителем, а не сплошных сред, которая веб-страница .
По стр СМИ вводит понятия, которые не имеют смысла в Интернете.Например, вы должны быть в состоянии генерировать номера страниц, заголовки поставить главу в полях, перерыв содержание соответствующим образом для того, чтобы цифры не стать отсоединить их от подписи.Вы, возможно, потребуется создать перекрестные ссылки и сноски, индексы и таблицы содержания из документа.Вы можете импортировать документ в издательской пакета рабочего стола и создать все это вручную, однако, работа будет затем нужно переделать в следующий раз, когда вы обновляете копию.Это где CSS приходит, технические характеристики которого предназначен для использованияв создании страничных носителях .
Потому что характеристики предназначены для страничных носителях, мы не будем рассматривать браузере поддержку в этой статье — это не имело бы большой смысл.Позже мы будем смотреть на пользовательским агентом разработан, чтобы превратить ваш HTML и CSS в формате PDF, используя эти характеристики .
Specifications
Большая часть CSS вы уже знаете, будет полезно для форматирования для печати.Специально для печати мы имеем “ CSS постранично Медиа Module 2 ” и “ CSS Контент для страничных носителях Module 29 3 ” характеристики.Давайте посмотрим на то, как они работают .
@ Страницы Rule
@page правила позволяет задать различные аспекты страничного блока.Например, вы хотите, чтобы указать размеры ваших страниц.Правило ниже указывает размер страницы по умолчанию 5,5 на 8,5 дюйма.Если вы собираетесь напечатать книгу, возможно, службы печати по требованию, а затем найти подробную информацию о размерах вы можете использовать это важно .
@page {
size: 5.5in 8.5in;
}
В дополнение к определению размеров со значениями длины, вы также можете использовать размер бумаги ключевые слова, такие как “ A4″ или “ юридическая .”
@page {
size: A4;
}
Вы также можете использовать ключевое слово, чтобы указать страницу в ориентации — “ portrait” или “ пейзаж .”
@page {
size: A4 landscape;
}
Понимание страницу Model
Прежде, чем идти дальше, мы должны понять, как модель страницы для страничных носителях работ, потому что он ведет себя несколько иначе, как работают вещи на экране .
Модель стр определяет область страницы, а затем 16, окружающей маржа boxes 4 .Вы можете контролировать размер области страницы и размер маржи между краем области страницы и в конце самой страницы.Таблица, в спецификации объясняет очень хорошо, как эти ящики размером .
5 Площадь страница пространство на странице, в котором содержание вашей страницы будет течь.Когда он выбегает из комнаты, другая страница будет создана.Запас коробки используются только для содержания CSS-генерируется .
Левая и Правая страница Spreads
Другой аспект модели страницы является то, что определяет псевдо-селекторов класса для левого и правого страниц документа.Если вы посмотрите на любой печатной книги у вас на руках, вы, вероятно, увидите, что размер маржи и содержание маржинальной являются разные по левой и правой страниц .
Мы можем использовать эти селекторы, чтобы определить различные размеры маржи для наших страницах .
@page :left {
margin-left: 3cm;
}
@page :right {
margin-left: 4cm;
}
Два других селекторы псевдо-класса определены.:first селектор нацелен на первую страницу документа .
@page :first {
}
The :blank цели селектора псевдо-класс любой страницы, которая “ намеренно оставлена пустой .” Чтобы добавить этот текст, мы можем использовать сгенерированный контент и целевая аудитория верхний центр маржи окно .
@page :blank {
@top-center { content: "This page is intentionally left blank." }
}
Контент и Paged Media
В последнем примере мы использовали CSS-контент, создаваемый добавить текст к краю окна верхнего центра.Как вы увидите, контент, создаваемый является жизненно важным для создания в нашей книге.Это единственный способ вещи могут быть добавлены к нашим маржи коробки вообще.Например, если мы хотим, чтобы добавить название книги в нижнем левом поле окна правых страниц, мы хотели бы сделать это, используя генерируемый контент .
@page:right{
@bottom-left {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: "My book";
font-size: 9pt;
color: #333;
}
}
Page Breaks
Кроме того, часть “ По стр Media” спецификация информация о том, как управлять разрывы страниц.Как уже было описано, когда содержание заполняет область страницы, то перейти на новую страницу.Если заголовок только что был написан на страницу, вы могли бы закончить со страницей, что заканчивается рубрикой, соответственно, с содержанием, начиная на следующей странице.В печатной книги, вы бы попытаться избежать этой ситуации.Другие места, которые вы, возможно, захотите, чтобы избежать перерыв в середине таблицы, а также между фигурой и подписи .
Запуск нового главу книги с h1 заголовком является распространенным явлением.Чтобы заставить этот заголовок, чтобы всегда быть начало страницы, установите 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;
}
Counters
Книги все о нумерации вещи — страниц, разделов, даже цифры.Мы можем на самом деле добавить эти цифры с помощью CSS, спасая нас от того, чтобы пронумеровать все, потому что мы решили, скажем, добавить новую фигуру на полпути через главе.Мы делаем это с помощью CSS counters 7 .
Очевидное место, чтобы начать с номерами страниц.CSS дает нам предопределенный счетчик страниц;она начинается в 1 и шагом с каждой новой странице.В таблице стилей, вы должны использовать этот счетчик в качестве значения генерируемого содержимого, поставить счетчик страниц в одном из ваших гарантийных коробок.В приведенном ниже примере мы добавляем номера страниц в нижнем правом углу страницы справа и снизу слева от левой стороны страницы .
@page:right{
@bottom-right {
content: counter(page);
}
}
@page:left{
@bottom-left {
content: counter(page);
}
}
Мы также создали счетчик с именем pages.Этот счетчик всегда будет общее количество страниц в документе.Если вы хотите, чтобы выходной “ Страница 3 из 120, ” Вы можете .
@page:left{
@bottom-left {
content: "Page " counter(page) " of " counter(pages);
}
}
Вы можете создавать свои собственные названные счетчики и приращение и сбросить их, как вам требуется.Чтобы создать счетчик, используйте counter-reset имущество, увеличиваем его с counter-increment.Правила CSS ниже, создаст счетчик для глав названных chapternum и увеличивать его с каждым h1 — будучи началом главы в этой книге.Затем мы используем значение этого счетчика в генерируемый контент, чтобы добавить номер главы и период до фактического названия главы в .
body {
counter-reset: chapternum;
}
h1.chapter:before {
counter-increment: chapternum;
content: counter(chapternum) ". ";
}
Мы можем сделать то же самое для фигур в книге.Распространенный способ номер цифры, чтобы использовать chapternum.figurenum.Таким образом, “ Рисунок 3-2″ будет вторая цифра в главе 3. На h1, мы могли бы сбросить figurenum, чтобы оно начинается с 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) ". ";
}
Настройка Strings
Взгляните на печатной книге снова.Как вы листать главы, вы, вероятно, увидите, что название Ордена напечатан на левой или правой странице.Как бы странно это ни звучало, “ Контент для страничных Media” спецификация позволяет нам добиться этого с помощью CSS .
Мы делаем это с помощью свойство с именем string-set в селекторе, что мы хотим взять контент из.За звание главы, это будет h1.Значение string-set это имя, которое вы хотели бы дать ссылку на этот материал, а затем content().Вы можете затем вывести это как контент, создаваемый с помощью string() .
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
Когда страничных носителях генерируется каждый раз, когда h1 происходит, запись содержимого doctitle, а затем выводится в верхнем правом поле окна правых страниц, изменение только тогда, когда другой h1 происходит.
Footnotes
Сноски часть “ CSS контент, создаваемый для страничных Медиа Module 8 ” спецификации.Как работают сноски в том, что вы должны добавить текст вашего сноске Inline, завернутый в HTML-теги (возможно SPAN), с классом, чтобы идентифицировать его в качестве сноски.Когда страница генерируется, содержание этого “ сноски element” удалена и превратился в сноске .
В вашей CSS, используйте значение примечании к float недвижимость создать правило для вашего класса сноске .
.fn {
float: footnote;
}
В документе, используйте этот класс, чтобы обернуть все сноски текст .
<p>Footnotes<span class="footnotes">Footnotes and notes placed in the footer of a document to reference the text. The footnote will be removed from the flow when the page is created.</span> are useful in books and printed documents.</p>
Сноски имеют предопределенный счетчик, который ведет себя так же, как и счетчик страниц.Как правило, вы хотите, чтобы увеличить счетчик на 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 этоцифровая метка помещается перед текстом сноски в подвале вашего документа.Они ведут себя подобным образом на номера, сгенерированный для упорядоченного списка в CSS .
.fn::footnote-marker {
font-weight: bold;
}
Сами сноски помещаются на полях, в специальной области на странице с именем @footnotes.Вы бы цели и стиль, что площадь следующим .
@page {
@footnotes {
border-top: 1pt solid black;
}
}
Кросс-References
Прежде чем перейти к рабочему примеру всего, что мы узнали, давайте посмотрим на перекрестных ссылок.В Интернете, мы перекрестные ссылки вещи, добавив ссылки.В книге или другой печатный документ, вы, как правило, относятся к числу страниц, на которых эта ссылка не найдено.Поскольку номера страницы может меняться в зависимости от формата, что книга напечатана в — и между выпуски — делать это с помощью CSS спасает нас от того, чтобы пройти и изменить все номера .
Мы используем новое свойство, target-counter, чтобы добавить эти номера.Начните с создания ссылок в документе, давая им href, который является идентификатор элемента в документе, который вы хотите настроить таргетинг.Кроме того, добавить класс идентифицировать их как перекрестные ссылки, а не внешней ссылке;Я использую xref .
<a class="xref" href="#ch1" title="Chapter 1">Chapter 1</a>
Тогда, после ссылки, использовать снова контент для вывода (page x), где x является номер ячейки в книге, где это ID можно найти .
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
Мы будем смотреть на этой техники на практике, когда мы создаем таблицу содержания для рабочего например .
Собираем все вместе: Пример Book
Мы посмотрели на много различных свойств здесь, в изоляции.Они больше смысла, как только вы поместите их в использовании за счет строительства книгу .
Чтобы на самом деле создать книгу, используя эту CSS, вам понадобится агента пользователя, которые его поддерживают.В настоящее время очень мало вещей, реализовать эту специфика …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров