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

@page

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

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

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

Синтаксис

1
2
3
4
5
6
7
@page {
    margin: 1cm;
}

@page :first {
    margin: 2cm;
}

size

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
/* 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

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

1
2
3
4
5
6
7
@page {
    /* Keyword values */
    marks: none;
    marks: crop;
    marks: cross;
    marks: crop cross;
}

Значения:

crop

Будут напечатаны отметки для обрезки

cross

Будут напечатаны крестики

none

Никаких отметок не будет напечатано

bleed

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

1
2
3
4
5
6
/* Keyword values */
bleed: auto;

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

Пример

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
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; /* Отступы для всех правых страниц */
}

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

См. также

Ссылки

Комментарии