CSS bleed Property

Die CSS-Eigenschaft bleed gibt an, wie weit der druckbare Inhalt über den Rand des Seitenrahmens hinausreicht – in den Bereich, der beim Zuschneiden auf das endgültige Format abgeschnitten wird. Sie ist Teil des CSS Paged Media-Moduls und spielt daher nur eine Rolle, wenn Sie eine physische Seite oder ein PDF erzeugen – auf einem normalen Bildschirm hat sie keine Wirkung.

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

Diese Eigenschaft ist eine Kurzschreibweise: Sie legt den Beschnittzugaben-Wert auf allen vier Seiten gleichzeitig fest und entspricht dem einzelnen Setzen von bleed-top, bleed-right, bleed-bottom und bleed-left.

Was „bleed" beim Druck bedeutet

In der Druckproduktion bezeichnet bleed (Beschnitt) Gestaltungselemente, die absichtlich über den Seitenrand hinausgehen. Schneidemaschinen haben eine kleine Fehlertoleranz, daher verlängern Designer Hintergrundfarben und Bilder einige Millimeter über die Schnittlinie hinaus. Nachdem der Bogen gedruckt wurde, wird er auf das endgültige Format zugeschnitten – und weil die Tinte bereits über den Schnitt hinausreichte, entstehen keine dünnen weißen Streifen an den Rändern.

Die Eigenschaft bleed teilt der Druck-Engine mit, wie groß dieser zusätzliche Rand sein soll. Sie platziert den Seitenrahmen auf einem größeren Bogen und lässt den Inhalt in den umliegenden Beschnittbereich überlaufen, wo die Schnittmarken (gesetzt mit der Eigenschaft marks) der Schneidemaschine zeigen, wo geschnitten werden soll.

Syntax

bleed: auto | <length>;

Die Eigenschaft akzeptiert einen von zwei Wertetypen:

• auto – der Browser entscheidet. Sie wird zu 6pt aufgelöst, wenn marks: crop aktiv ist, andernfalls zu 0.
• <length> – ein expliziter Abstand (zum Beispiel 3mm, 0.125in, 9pt), um den der Beschnittbereich in jede Richtung über den Seitenrahmen hinausragt.

Die Abhängigkeit von marks

bleed hat nur dann eine Wirkung, wenn Schnittmarken aktiviert sind. Ohne marks: crop wird die Seite auf die angegebene Größe zugeschnitten und es gibt keinen Raum für den Beschnittbereich, sodass der Wert zu 0 aufgelöst wird.

/* 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;
}

Beispiele

Ein standardmäßiges druckfertiges Setup mit einem gebräuchlichen Beschnitt von 3 mm:

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

Den Browser den Standard-Beschnitt bei vorhandenen Schnittmarken wählen lassen (wird zu 6pt aufgelöst):

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

Damit Hintergrundgrafik die zugeschnittene Seite randlos ausfüllt, muss das Element ebenfalls in den Beschnittbereich reichen, nicht nur in den Seitenrahmen:

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

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

Werte

Wann sollte ich das verwenden?

Greifen Sie auf bleed nur zurück, wenn Sie druckqualitativ hochwertige Ausgaben erstellen – Bücher, Flyer, Visitenkarten oder beliebige PDFs, die ein Druckdienstleister zuschneiden wird. Für das alltägliche Web-Layout ist es irrelevant; steuern Sie Seitenumbrüche auf dem Bildschirm stattdessen mit page-break-before, page-break-after und page-break-inside, und verwenden Sie für Druckstile Media Queries.

Browser-Unterstützung

Die Unterstützung für seitenbasierte Medieneigenschaften wie bleed ist begrenzt. Sie ist hauptsächlich in dedizierten Druck-/PDF-Engines (wie Prince, WeasyPrint und Antenna House) und teilweise in Safari implementiert, wird jedoch von den gängigen Browsern für das Live-Bildschirm-Rendering nicht weitgehend unterstützt. Wenn präzise Beschnittkontrolle erforderlich ist, erzeugen Sie das Dokument mit einer druckorientierten Engine, anstatt sich auf den integrierten Druck des Browsers zu verlassen.

Übung