Страница правил

Правила страницы должны быть установлены в медиа-запросе @print .

 @media  print  {
  
} 

Размер

Размер страниц в книге можно определить по ширине и высоте (в дюймах или миллиметрах) или по размеру бумаги, например, A5 или Letter. Он должен быть одинаковым для всех страниц в книге и выводиться только из корня @page .

 @  page  {
   размер : A5;
}

#  или 

@  page  {
   размер :  140 мм   200 мм ;
} 

Поля

Команда margin определяет верхнюю, нижнюю, левую и правую области вокруг содержимого страницы.

 @  page  {
   margin :  1in   2in .  5in   2in ;
} 

Имена

Отдельные страницы или группы могут быть названы, например, как «cover» или «backmatter». Именованные страницы могут иметь свои собственные, более конкретные, стили и поля, и даже отличаться от основного правила.

 @  page   backmatter  {
         запас :  20 мм   30 мм ;
       фон : желтый;
} 

В HTML эти группы страниц определяются путем добавления имени страницы в селектор CSS.

 section.backmatter {
       page : backmatter;
} 

Селекторы страниц

Пустые страницы

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

 @page: blank {
      @ top-left { content : нет; }
} 

Первая и третья страницы

Существуют селекторы для стилизации первой страницы или конкретной страницы с указанием их номера (в спецификации они названы n ).

 @page: first {
       фон : желтый;
}

@page: nth ( 5 ) {
       margin :  2   в ;
} 

Влево и вправо или в прямом и обратном направлении

Как правило, страницы в развороте (пара страниц) имеют симметричные поля и центрированы на желобе. Однако, если внутреннее поле должно быть больше или меньше, селектор для стилизации левой и правой страниц может внести это изменение.

 @  page  : слева  {
       на полях справа :  2 дюйма ;
}

@  page  : справа  {
       поле слева :  2 дюйма ;
} 

Поля для полей

Поля страницы разделены на шестнадцать именованных блоков, каждый со своей рамкой, отступом и областью содержимого. Они установлены в запросе @page . Ящик именуется в зависимости от его положения: например, @ top-left @ bottom-right-corner или @ left-middle (см. Все правила). По умолчанию размер определяется областью страницы. Поля полей обычно используются для отображения текущих заголовков, нижних колонтитулов, номеров страниц и другого содержимого, которое чаще встречается в книге, чем на веб-сайте. Содержимое поля регулируется свойствами CSS.

Чтобы выбрать эти поля полей и добавить к ним содержимое, используйте следующий пример:

 @page {
  @ top-center {
        содержание: "Моби-Дик";
  }
} 

Сгенерированный контент

Счетчики CSS

css-counter — это свойство CSS, которое позволяет подсчитывать элементы в вашем контенте. Например, вы можете добавить число перед каждой подписью к рисунку. Для этого необходимо сбросить счетчик для увеличивать его каждый раз, когда в содержимом появляется заголовок, и отображать это число в псевдоэлементе :: before .

  body  {
   счетчик сброса : figureNumber;
}

 figcaption  {
   Счетчик приращений : figureNumber;
}

 figcaption   :: before  {
   Содержание :  counter  (figureNumber)
} 

Счетчики на основе страниц

Чтобы определить номера страниц, paged.js использует счетчик CSS, который увеличивается с каждой новой страницей.

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

 @page {
  @Нижняя левая {
        содержание: счетчик (страница);
  }
} 

Вы также можете добавить немного текста перед номером страницы:

 @page {
  @Нижняя левая {
         content :  счетчик "page"  (page);
  }
} 

Чтобы подсчитать общее количество страниц в вашем документе, напишите это:

 @page {
  @Нижняя левая {
         содержание : счетчик (страницы);
  }
} 

Повторные элементы на разных страницах

Именованная строка

Именованные строки используются для создания текущих верхних и нижних колонтитулов: они копируют текст для повторного использования в полях полей.

Сначала текстовое содержимое элемента клонируется в именованную строку, используя string-set с пользовательским идентификатором (в приведенном ниже коде мы называем его «заголовок», но вы можете назвать его как угодно. смысл как переменная). В следующем примере каждый раз, когда в HTML появляется новый

содержимое именованной строки обновляется с текстом этого

.

 h1 {string-set: заголовок (текст)} 

Затем функция string () копирует значение именованной строки в документ через свойство content .

 @page {
  @Нижняя левая {
         Содержание : строка (заголовок)
  }
} 

Ходовые элементы

Запуск элементов — это еще один способ создания верхних и нижних колонтитулов. Здесь содержимое со стилем и структурой копируется из текста, ему присваивается собственный идентификатор и помещается в поле для полей. Это полезно для форматированного текста, такого как слово, выделенное курсивом.

Позиция элемента установлена:

 .title {
   положение : бег (название);
} 

Затем он помещается в поле для полей со значением элемента element () через свойство content :

 @page {
@ top-center {
содержание: элемент (заголовок)
}
} 

Управление фрагментацией текста с помощью разрывов страниц

Иногда возникает необходимость определить, как контент делится на страницы на основе разметки. Для этого спецификации носителей с подкачкой включают свойства break-before beak-inside и break-after .

break-before добавляет разрыв страницы перед элементом; break-after добавляет разрыв страницы после элемента.

Вот список опций:

• break-before: page перемещает элемент (и следующее содержимое) на следующую доступную страницу

• break-before: right перемещает элемент на следующую правую страницу

• break-before: left перемещает элемент на следующую левую страницу

• break-before: recto перемещает элемент на следующую страницу recto

• break-before: verso перемещает элемент на следующую страницу verso

• break-before: избежать гарантирует, что между двумя указанными элементами не будет разрыва страницы

Например, эта последовательность создаст разрыв страницы перед каждым элементом h1 :

  h1  {
       перерыв до : страница;
} 

Этот код, напротив, переместит h1 на следующую правую страницу, создавая пустую страницу при необходимости:

  h1  {
     перерыв до : справа;
} 

Этот фрагмент будет хранить любой HTML-элемент, который следует после h1 на той же странице, что и h1 перемещая их оба на следующую страницу, если это необходимо.

  h1  {
       прорыв после : избегать;
} 

Последний параметр — это свойство break-inside которое гарантирует, что элемент не будет разделен на несколько страниц. Если вы хотите быть уверены, что ваши кавычки никогда не будут разделены, напишите это:

  blockquote  {
     взлом : избегать;
} 

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

Для создания таких элементов, как указатель или оглавление, функция экспорта должна находить страницы, на которых соответствующие элементы появляются внутри книги. Для этого спецификации переносимых носителей включают свойство target-counter .

Для перекрестных ссылок используются ссылки, нацеленные на якоря в книге:

 
 см.  Название главы  
 

Позже в книге появится заголовок главы с привязкой, установленной с помощью свойства ID .

 
 название главы 
 

Свойство target-counter используется в псевдоэлементах :: before и :: after и устанавливается в содержимое свойство. В качестве счетчика страниц он может содержать текст:

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

В PDF этот код будет представлен как «см. Заголовок главы, стр. 12».

   class   MyHandler   расширяет   Paged .  Обработчик  [19459
     конструктор  (чанкер, полировщик, абонент) {
         super  (чанкер, полировщик, абонент);
    }
} 

   class   MyHandler   расширяет   Paged .  Обработчик  [19459
     конструктор  (чанкер, полировщик, абонент) {
         super  (чанкер, полировщик, абонент);
    }

    afterPageLayout (pageFragment, page, breakToken) {
         console  .log (pageFragment, page, breakToken);
    }
} 

 Paged.registerHandlers (MyHandler); 

  пусть  обещать =  новый   обещать  ((разрешить, отклонить) {
  someLongTask (решительность);
});

 окно  .PagedConfig = {
   до :   ()  =>  {
       вернуть  обещание;
  }
}; 

  окно  .PagedConfig = {
     auto :  false 
};

 окно  .PagedPolyfill.preview ();