@page

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

Страница сайта напечатается на горизонтальном листе формата А4, у которого справа внизу будет номер:

        
          
          @page {  size: A4 landscape;  @bottom-right {    content: counter(page, decimal-leading-zero);  }}
          @page {
  size: A4 landscape;

  @bottom-right {
    content: counter(page, decimal-leading-zero);
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Существуют несколько популярных форматов листов бумаги: ISO 216, североамериканский и японские стандарты.

ISO 216 легко узнать по буквам A, B или C в названии. Например, A4. Ещё эти размеры удобно делятся пополам. Например, половина A4 – это A5.

Также форматы на печати отличают по положению листа: горизонтальному и вертикальному.

Всё это можно задать в свойстве size директивы @page, но можно установить и кастомные значения.

У директивы @page есть правила для отступов на полях. Туда можно поместить номер страницы или название документа.

У директивы есть псевдоклассы:

• :blank – если надо задать пустую страницу для печати;
• :first – если надо задать титульную страницу;
• :left и :right – для вёрстки разворотов.

Директива поддерживает свойство margin, которое управляет шириной полей от края листа до контента. Похоже на работу padding.

Чтобы разделить страницы, нужно воспользоваться свойством break-after, дальше сработают правила @page.