Перейти к содержанию

@page

Правило @page используется для модификации некоторых свойств CSS при печати документа. Вы не можете изменить все CSS свойства с @page. Вы можете изменить только margin, orphans, widows, и разрывы страницы документа. Попытки изменить любые другие свойства CSS будут игнорироваться.

Правило @page доступно через интерфейс объектной модели CSS CSSPageRule.

@-правила
Страницы

Синтаксис

@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}

size

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

/* Keyword values for scalable size */
size: auto;
size: portrait;
size: landscape;

/* <length> values */
/* 1 value: height = width */
size: 6in;

/* 2 values: width then height */
size: 4in 6in;

/* Keyword values for absolute size */
size: A4;
size: B5;
size: JIS-B4;
size: letter;

/* Mixing size and orientation */
size: A4 portrait;

Значения:

auto
Браузер сам выбирает размер листа.
landscape
Содержимое страницы отображается в альбомной ориентации
portrait
Содержимое страницы отображается в портретном режиме. Это ориентация по умолчанию.
<length>
Любое значение длины. Первое значение соответствует ширине поля страницы, а второе соответствует его высоте. Если указано только одно значение, оно используется как для ширины, так и для высоты.
<page-size>
A5 (148mm x 210mm), A4 (210mm x 297mm), A3 (297mm x 420mm), B5 (176mm x 250mm), B4 (250mm x 353mm), JIS-B5 (182mm x 257mm), JIS-B4 (257mm x 364mm), letter (8.5in x 11in), legal (8.5in x 14in), ledger (11in x 17in).

marks

Добавляет обрезку и/или регистрационные отметки в документ.

@page {
  /* Keyword values */
  marks: none;
  marks: crop;
  marks: cross;
  marks: crop cross;
}

Значения:

crop
Будут напечатаны отметки для обрезки
cross
Будут напечатаны крестики
none
Никаких отметок не будет напечатано

bleed

Определяет степень заступа за пределы поля страницы, при котором отображаемая область страницы отрезается.

/* Keyword values */
bleed: auto;

/* <length> values */
bleed: 8pt;
bleed: 1cm;

Пример

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>@page</title>
    <link
      rel="stylesheet"
      href="/example/css/print.css"
      media="print"
    />
  </head>
  <body>
    <h1>Метод ловли льва в пустыне</h1>
    <h2>Метод последовательного перебора</h2>
    <p>
      Пусть лев имеет габаритные размеры LxWxH, где L —
      длина льва от кончика носа до кисточки хвоста, W —
      ширина льва, а H — его высота. После чего пустыню
      разбиваем на ряд элементарных прямоугольников, размер
      которых совпадает с шириной и длиной льва. Учитывая,
      что лев может находиться не строго на заданном
      участке, а одновременно на двух из них, клетку для
      ловли следует делать повышенной площади, а именно
      2Lx2W. Благодаря этому мы избежим ошибки, когда в
      клетке окажется пойманным лишь половина льва или, что
      хуже, только его хвост.
    </p>
    <p>
      Далее последовательно накрываем каждый из размеченных
      прямоугольников пустыни клеткой и проверяем, пойман
      лев или нет. Как только лев окажется в клетке,
      процедура поимки считается завершенной.
    </p>
  </body>
</html>

body {
  font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
}
h1,
h2,
p {
  color: #000; /* Черный цвет текста */
}
@page :first {
  margin: 1cm; /* Отступы для первой страницы */
}
@page :left {
  margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех левых страниц */
}
@page :right {
  margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех правых страниц */
}

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

См. также

Ссылки