Если вы упоминаете печать с CSS для многих людей, которые работают в Интернете,

стиль печати sheets ¹ являются использование, что приходит на ум.Мы все хорошо использовать для создания таблиц стилей, что называется от того, когда веб-документ напечатан.Эти таблицы стилей убедиться, что версия для печати разборчив и что мы не вызвать пользователю распечатать огромные изображения.Однако, CSS также используется для форматирования книг, каталогов и брошюр — содержания, возможно, никогда не были разработаны, чтобы быть веб-страница на всех .

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

Почему HTML CSS И смысл для Print

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

Различия между CSS для веб-сайтов и CSS для Print

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

По стр СМИ вводит понятия, которые не имеют смысла в Интернете.Например, вы должны быть в состоянии генерировать номера страниц, заголовки поместить главу в полях, сломать содержание надлежащим образом в целях, что цифры не стать отсоединить их от подписи.Вы, возможно, потребуется создать перекрестные ссылки и сноски, индексы и таблицы содержания из документа.Вы можете импортировать документ в пакете настольной издательской и создать все это вручную, однако, работа будет затем нужнопеределать в следующий раз вы обновите копию.Это где УС приходит, технические характеристики которого предназначены для использования в создании страничных носителях .

Из спецификации предназначены для страничных носителях, мы не будем рассматривать поддержку браузера в этой статье — это не имело бы большой смысл.Позже мы будем смотреть на агента пользователя разработанной, чтобы превратить ваш HTML и CSS в PDF, используя эти характеристики .

Specifications

Большая часть CSS вы уже знаете будет полезно для форматирования для печати.Специально для печати мы имеем “ CSS постранично Медиа Module ² ” и “ CSS Generated Content для страничных носителях Module ^{29 3} ” характеристики.Давайте посмотрим на то, как они работают .

@ Страницы Rule

@page правило позволяет задать различные аспекты страничного блока.Например, вы хотите, чтобы указать размеры ваших страниц.Правило определяет размер ниже Страница по умолчанию 5,5 8,5 дюйма.Если вы собираетесь печатать книгу, возможно, службы печати по требованию, то выяснить размеры вы можете использовать это важно .

@page {
  size: 5.5in 8.5in;
}

В дополнение к определению размеров со значениями длины, вы также можете использовать размер бумаги ключевые слова, такие как “ | A4__62 или “ юридическая .”

@page {
  size: A4;
}

Вы также можете использовать ключевое слово, чтобы указать страницу в ориентации — “ portrait” или “ пейзаж .”

@page {
  size: A4 landscape;
}

Понимание страницу Model

Прежде чем идти дальше, мы должны понять, как модель страница страничных СМИ произведений, потому что он ведет себя несколько иначе, как вещи работают на экране .

Модель стр определяет область страницы, а затем 16, окружающей маржа boxes __38 | | 4__7 .Можно контролировать размер области страницы и размер разницы между краем области страницы и в конце самой страницы.Стол в спецификации объясняет очень хорошо, как эти ящики размером .

⁵

Площадь страница пространство на странице, в котором содержание вашей страницы будет течь.Когда он работает из комнаты, другая страница будет создана.Маржа коробки используются только для содержания 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." }
}

Контент и выгружаемого Media

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

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

Страница 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 __36 | 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

Сноски часть __31 | CSS Generated Content для страничных Медиа Module __20 | | 8__19 __23 ” | спецификации.Работа способ сноски, что вы бы добавить текст вашего сноске Inline, завернутый в HTML-теги (возможно SPAN), с классом, чтобы идентифицировать его в качестве сноски.Когда страница генерируется, содержание этого “ сноске element” удалена и превратился в сноске .

.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>

.fn {
  counter-increment: footnote;
}

h1 {
  counter-reset: footnote;
}

.fn::footnote-call {
  content: counter(footnote);
  font-size: 9pt;
  vertical-align: super;
  line-height: none;
}

.fn::footnote-marker {
  font-weight: bold;
}

@page {
  @footnotes {
    border-top: 1pt solid black;
  }
}

<a class="xref" href="#ch1" title="Chapter 1">Chapter 1</a>

a.xref:after {
  content: " (page " target-counter(attr(href, url), page) ")";
}

Чтобы на самом деле создать книгу, используя эту CSS, вам понадобится агента пользователя, который подд …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров