Crop Marks und Bleed fuer Druckvorstufen in CSS

1. Was Crop Marks und Bleed in der Druckvorstufe überhaupt bedeuten

In der professionellen Druckvorstufe bezeichnet Bleed (Beschnittzugabe) einen zusätzlichen Rand um das eigentliche Druckformat herum, der über die spätere Schnittkante hinausragt, damit beim mechanischen Beschneiden des Papiers keine ungewollten weißen Kanten entstehen, wenn die Schneidemaschine minimal ungenau arbeitet. Crop Marks (Schnittmarken) sind kleine Linien außerhalb dieses Beschnittbereichs, die der Druckerei exakt zeigen, wo geschnitten werden muss.

Beide Konzepte stammen ursprünglich aus dem klassischen Print-Design mit Werkzeugen wie InDesign oder Illustrator, sind inzwischen aber auch Teil der CSS-Spezifikation für generierte Inhalte (@page-Regeln), weil Web-Entwickler zunehmend druckfertige PDFs direkt aus HTML und CSS erzeugen wollen, ohne den Umweg über ein separates Layoutprogramm zu gehen.

2. marks: crop in der @page-Regel

Der Deskriptor marks: crop innerhalb einer @page-Regel weist unterstützende Rendering-Engines an, an den vier Ecken der definierten Seitengröße kleine Schnittmarken einzuzeichnen. Ergänzend existiert marks: cross für Passkreuze, die bei mehrfarbigem Druck helfen, verschiedene Farbauszüge exakt übereinander zu registrieren, sowie die kombinierte Schreibweise marks: crop cross für beide gleichzeitig.

In gewöhnlichen Web-Browsern werden diese Marken beim normalen Drucken über den Browser-Dialog in der Praxis meist ignoriert oder nur unvollständig dargestellt, weil Browser-Druckengines primär für alltägliche Ausdrucke optimiert sind, nicht für professionelle Druckvorstufe. Volle Unterstützung findet sich zuverlässiger in spezialisierten HTML-zu-PDF-Renderern, die gezielt für Print-CSS entwickelt wurden.

@page {
  size: 210mm 297mm; /* A4 als Endformat nach dem Schnitt */
  marks: crop cross;
  bleed: 3mm;
}

3. Der bleed-Deskriptor: wie viel Rand wirklich nötig ist

Der bleed-Deskriptor definiert die Breite der Beschnittzugabe rund um das in size angegebene Endformat. Ein üblicher Wert in der Druckindustrie liegt bei 3 bis 5 Millimeter pro Kante, abhängig von der Präzision der jeweiligen Druckmaschine und den Vorgaben der Druckerei, weshalb dieser Wert im Zweifel immer mit der ausführenden Druckerei abgestimmt werden sollte, statt einen allgemeinen Standardwert blind zu übernehmen.

Wichtig ist, dass Hintergrundfarben, Bilder oder Flächen, die bis zum Rand der Seite reichen sollen, tatsächlich bis in den Bleed-Bereich hineinreichen müssen, nicht nur bis zur sichtbaren Endformatgrenze. Endet eine farbige Fläche exakt an der Schnittkante statt im Bleed-Bereich, entsteht bei minimalen Schnittungenauigkeiten ein schmaler weißer Papierrand, genau das Problem, das Bleed eigentlich verhindern soll.

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

/* Vollflaechige Hintergrundgrafik muss bis in den Bleed reichen */
.business-card-bg {
  position: absolute;
  inset: -3mm; /* deckt den Bleed-Bereich vollstaendig ab */
  background: url("/print/card-background.svg") center/cover;
}

4. Safe Zone: der sichere Innenabstand für wichtigen Inhalt

Analog zum Bleed am äußeren Rand definiert die Safe Zone einen Sicherheitsabstand nach innen, typischerweise ebenfalls 3 bis 5 Millimeter, innerhalb dessen kein wichtiger Inhalt wie Text oder Logo platziert werden sollte. Der Grund ist derselbe wie beim Bleed, nur umgekehrt: Schneidet die Maschine minimal ungenau nach innen statt nach außen, dürfen wichtige Elemente nicht plötzlich angeschnitten werden.

Anders als Bleed und Crop Marks kennt CSS für die Safe Zone keine eingebaute Property, sie muss manuell über einen zusätzlichen Innenabstand im eigenen Layout abgebildet werden, etwa durch ein Padding auf dem Inhaltscontainer, das um die Bleed-Breite größer ist als der geplante Sicherheitsabstand. Diese Logik gehört ins eigene Stylesheet, nicht in eine Browser-native Property.

5. Wo die Browser-Unterstützung für Crop Marks endet

Die praktische Erfahrung zeigt, dass marks und bleed in den gängigen Desktop-Browsern beim direkten Ausdrucken über den System-Druckdialog kaum zuverlässig sichtbar werden, weil die Browser-Druckengines diese Deskriptoren entweder gar nicht implementieren oder nur rudimentär umsetzen. Für alltägliche PDF-Exporte über den Browser-eigenen Speichern-als-PDF-Dialog gilt dasselbe: Die Marken erscheinen dort in der Regel nicht.

Wer produktionsreife PDFs mit sichtbaren Schnittmarken direkt aus HTML und CSS erzeugen will, braucht deshalb einen spezialisierten Renderer wie Prince, WeasyPrint oder eine Headless-Chrome-Instanz mit dediziertem Print-CSS-Support, statt sich auf den normalen interaktiven Browser-Druckdialog zu verlassen. Diese Werkzeuge implementieren die CSS-Paged-Media-Spezifikation deutlich vollständiger als ein alltäglicher Web-Browser.

6. Grenzen von CSS gegenüber echter Druck-Software

Professionelle Druckereien verlangen für viele Aufträge ein PDF im PDF/X-Standard, der unter anderem eingebettete Schriften, einen definierten Farbraum wie CMYK statt RGB und exakt eingebettete ICC-Profile vorschreibt. CSS und Browser-Rendering arbeiten grundsätzlich im RGB-Farbraum, eine native CMYK-Konvertierung mit korrekter Farbseparation ist mit reinem CSS nicht möglich, dafür braucht es immer ein zusätzliches Werkzeug in der Verarbeitungskette.

Auch Überfüllung (Trapping), also das bewusste minimale Überlappen benachbarter Farbflächen, um Passerungenauigkeiten der Druckmaschine unsichtbar zu machen, sowie eingebettete ICC-Farbprofile liegen komplett außerhalb dessen, was CSS abbilden kann. Für hochwertige, mehrfarbige Print-Produkte wie Verpackungen oder Kataloge bleibt eine dedizierte Druck-Software oder zumindest ein spezialisierter PDF/X-Export-Schritt deshalb unverzichtbar.

7. Wo CSS-basierte Crop Marks trotzdem sinnvoll sind

Für einfache, einfarbige oder RGB-taugliche Druckstücke wie interne Visitenkarten, Namensschilder für Veranstaltungen oder schnelle Prototyp-Layouts, die anschließend an einem gewöhnlichen Bürodrucker mit manuellem Beschnitt entstehen, reicht die CSS-basierte Lösung mit marks: crop und bleed oft völlig aus, besonders in Kombination mit einem der spezialisierten Print-CSS-Renderer statt des normalen Browser-Druckdialogs.

Der entscheidende Vorteil liegt in der Entwicklungsgeschwindigkeit: Ein Layout, das bereits als HTML- und CSS-Vorlage existiert, etwa für automatisch generierte Namensschilder aus einer Teilnehmerliste, lässt sich ohne zusätzliche Layout-Software direkt mit Schnittmarken versehen, was für interne oder wenig kritische Druckstücke oft schneller zum Ergebnis führt als der Umweg über ein separates DTP-Programm. Gerade bei wiederkehrenden Veranstaltungen zahlt sich diese Vorlage mehrfach aus, weil nur noch die Teilnehmerdaten ausgetauscht werden müssen.

8. Praxisbeispiel: eine Visitenkarten-Vorlage mit Bleed und Crop Marks

Eine typische Visitenkarten-Vorlage definiert das Endformat über size, addiert den benötigten Bleed über den bleed-Deskriptor und stellt sicher, dass jede bis zum Rand reichende Fläche tatsächlich in den Bleed-Bereich hineingezogen wird, während Text und Logo innerhalb einer eigens definierten Safe Zone bleiben, die als Innenabstand im Layout selbst berücksichtigt wird.

Für den finalen Export sollte diese Vorlage nicht über den normalen Browser-Druckdialog, sondern über einen dedizierten Print-CSS-Renderer verarbeitet werden, damit die Schnittmarken tatsächlich im erzeugten PDF sichtbar sind und die Druckerei sie als verlässliche Schnittreferenz nutzen kann.

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

.card {
  width: 85mm;
  height: 55mm;
  position: relative;
  overflow: visible;
}

.card__bg {
  position: absolute;
  inset: -3mm; /* Hintergrund bis in den Bleed hinein */
}

.card__content {
  position: absolute;
  inset: 5mm; /* Safe Zone: 5mm Abstand fuer Text und Logo */
}

9. Checkliste: CSS-Ansatz oder dedizierte Druck-Software

Vor der Entscheidung für den reinen CSS-Weg lohnt sich die Frage, ob das Ergebnis in RGB an einer professionellen Druckmaschine akzeptiert wird, ob Trapping oder ICC-Profile gefordert sind, und ob die Zielumgebung ein spezialisierter Print-CSS-Renderer ist statt des normalen Browser-Druckdialogs.

Wird mindestens eine dieser Fragen mit einer klaren Anforderung an CMYK, eingebettete ICC-Profile oder PDF/X-Konformität beantwortet, führt kein Weg an dedizierter Druck-Software oder einem spezialisierten Export-Schritt außerhalb von CSS vorbei, egal wie sauber die @page-Regel selbst geschrieben ist. Für interne Projekte mit geringem Risiko lohnt es sich trotzdem, zuerst den einfacheren CSS-Weg zu prüfen, bevor gleich zu Beginn eine vollständige Druck-Pipeline mit zusätzlicher Software aufgebaut wird.

10. Zusammenfassung

11. FAQ: Crop Marks und Bleed in CSS: Das Wichtigste auf einen Blick