CSS-свойство bleed

CSS-свойство bleed указывает, насколько далеко печатаемое содержимое выходит за край страничного блока, в область, которая обрезается при финальной подрезке страницы. Оно является частью модуля CSS Paged Media, поэтому применяется только при создании физических страниц или PDF — на обычном экране браузера оно не оказывает никакого эффекта.

@page {
  marks: crop;
  bleed: 5mm;
}

Это свойство является сокращённым: оно задаёт величину вылета сразу по всем четырём сторонам, что эквивалентно отдельной установке bleed-top, bleed-right, bleed-bottom и bleed-left.

Что означает «bleed» в печати

В полиграфическом производстве bleed (вылет) — это изображение или фон, намеренно выходящий за край страницы. Резальные машины имеют небольшую погрешность, поэтому дизайнеры продлевают фоновые цвета и изображения на несколько миллиметров за линию обрезки. После печати лист обрезается до финального размера, и поскольку краска уже вышла за линию реза, белые полосы по краям не появляются.

Свойство bleed сообщает принтеру, какой должна быть величина этого дополнительного поля. Оно помещает страничный блок на лист большего размера и позволяет содержимому выходить в окружающую область вылета, где метки обрезки (задаваемые свойством marks) указывают резчику, где делать обрезку.

Синтаксис

bleed: auto | <length>;

Свойство принимает одно из двух типов значений:

• auto — браузер решает сам. Вычисляется в 6pt, когда действует marks: crop, и в 0 в остальных случаях.
• <length> — явное расстояние (например 3mm, 0.125in, 9pt), на которое область вылета выходит за страничный блок в каждом направлении.

Зависимость от marks

bleed вступает в действие только при включённых метках обрезки. Без marks: crop страница обрезается до своего объявленного размера, и области вылета просто негде разместиться, поэтому значение вычисляется в 0.

/* No effect: marks are off, so bleed computes to 0 */
@page {
  bleed: 5mm;
}

/* Works: crop marks define the trim line, bleed extends past it */
@page {
  marks: crop;
  bleed: 5mm;
}

Примеры

Стандартная настройка для полиграфии с распространённым вылетом 3 мм:

@page {
  size: A4;
  marks: crop;
  bleed: 3mm;
}

Предоставить браузеру выбор вылета по умолчанию при наличии меток обрезки (разрешается в 6pt):

@page {
  marks: crop;
  bleed: auto;
}

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

@page {
  size: A4;
  marks: crop;
  bleed: 3mm;
}

body {
  margin: 0;
  background: #1f6feb; /* extends to the page edge so it survives trimming */
}

Значения

Когда применять это свойство?

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

Поддержка браузерами

Поддержка свойств постраничных медиа, таких как bleed, ограничена. Оно реализовано главным образом в специализированных движках для печати/PDF (таких как Prince, WeasyPrint и Antenna House) и частично в Safari, но широкой поддержки в основных браузерах для экранного рендеринга нет. Если точное управление вылетом принципиально важно, формируйте документ с помощью специализированного инструмента для печати, а не встроенными средствами браузера.

Практика