Paged Media – Webseiten drucken
Die speziellen Regeln für den Druck werden im Druck und bei EPUBs angewendet, aber auch beim mehrspaltigem Layout.
Wichtige Aspekte sind: Welche Bereiche und Elemente machen im Druck keinen Sinn? Wo sollten Seitenumbrüche verhindert werden? Dabei ist das CSS für den Druck der Seite nicht annähernd so komplex wie für die Webseite, denn viele Elemente der Webseite sind im Druck schlichtweg überflüßig. Stylesheets für den Druck werden als separate CSS-Datei oder durch die @media-Regel eingebunden.
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
oder
@media print {
p {
font-family: Georgia, serif;
font-size: 12pt;
}
h1 { font-family: Georgia, serif;
font-size: 28pt;
}
}
Da das Drucker-Stylesheet für die Darstellung der Seite auf dem Monitor nicht benötigt wird, ist die externe CSS die bessere Wahl. Aber damit das CSS für den Druck nicht bei jedem Aufruf der Seite den Ladevorgang ausbremst, kommt es in den Fuß der Seite.
<head>
</head>
<body>
…
<link rel="stylesheet" type="text/css" href="print.css">
<body>
Da stört es nicht einmal den Validator, ein Link-Element am Ende des body-Tags ist durchaus erlaubt.
Print-Stile importieren?
@import url("print.css") print;
Nicht empfehlenswert, denn so wird das Drucker-Stylesheet immer geladen, auch wenn die Seite nicht gedruckt wird.
Ausblenden, was für den Druck (nicht) gebraucht wird
Für den Druck der Webseite gelten dieselben CSS-Eigenschaften, aber viele Elemente einer Webseite machen im Druck wenig Sinn: z.B. Navigationsleisten, Slideshows, Video, Audio-Elemente, Werbung und Formulare. Sie werden am besten ausgeblendet, um Papier und Tinten effizient zu nutzen.
@media print {
nav, footer, aside, .ads, .comments, .sidebar, .menu {
display: none !important;
}
}
Schriftgrößen und Schriftfamilie
Auf dem Papier herrscht die Schriftangabe in Punkt – pt. Die Schriftfamilie durch eine Systemschrift ersetzen und evt. auf eine Serifenschrift umsteigen. Ebenfalls sinnvoll: schwarze Schrift statt grauer Absätze und bunter Header.
body {
font-family: Times, serif;
font-size: 12pt;
line-height: 1.5;
/* Keine Grautöne, um Tintensparmodus zu nutzen */
color: #000;
/* Keine Hintergrundfarben drucken */
background: none;
}
Gedruckte Links sind ohne URL ihr Papier nicht wert, aber die URL lässt sich leicht sichtbar machen.
a:after { content: "( " attr(href) ") ";}
Der Seitenfuß oder footer-Elemente werden durch die URL der Seite ersetzt – nie vergessen, dass auf dem Papier keine klickbaren Links existieren. Content Management Systeme führen eine Kurzform der URL, z.B.:
https://myhomepage.de/node/137 // Drupal https://www.mediaevent.de/?p=25 // WordPress
CSS für den Druck von Webseiten
Das CSS für den Druck einer Webseite ist im Grunde genommen einfach. Was ein Drucker-Stylesheet komplex macht, ist die feste Seitengröße des Papiers. Während die Ausgabe auf dem Monitor und die Sprachausgabe fortlaufende Ausgaben sind, muss der Druck die Webseite meist auf mehrere Seiten aufteilen. Darum wurde CSS um Eigenschaften für Seitenbrüche erweitert.
Das CSS Box-Modell legt fest, wie ein Dokument innerhalb eines rechteckigen Bereichs – der Seitenbox – zu formatieren ist. Die Seitenbox ergänzt das Boxmodell, damit Autoren Papiergrößen, Ränder, Ausrichtung des Papiers und Seitenumbrüche angeben können.
Der Inhalt kann über die Seitenbox hinausgehen, wenn z.B. Bilder oder andere Elemente der Seite angeschnitten werden. Ein Anschnitt von Bildern, die über den Seitenrand hinausgehen sollen, wird durch einen negativen Abstand von der Seitenbox (margin) umgesetzt. Die jeweilige Realisierung ist dem User Agent – dem Druckertreiber – und einem Seitenschneider überlassen.
Autoren geben die Maße, die Orientierung, Ränder usw. der Seitenbox in der @page-Regel an. Eine @page-Regel besteht aus dem Schlüsselwort @page, einem optionalen Seitenselektor (gefolgt ohne Leerraum von einer optionalen Seitenpseudoklasse) und einem Block von Deklarationen (dem Seitenkontext). Die Seitenregel @page enthält die Ränder der Seite, z.B.
@page { margin: 2cm }
Die Eigenschaften border und padding können nicht auf die Seite einer Druckausgabe angewendet werden.
Die Pseudoklassen :first, :left und :right wurden für die Seitenausgabe definiert, um dem doppelseitigen Druck gerecht zu werden.
Der Seitenselektor gibt an, auf welche Seiten die Deklarationen anzuwenden sind. Ein Seitenselektor kann z.B. die erste Seite, alle linken Seiten oder eine Seite mit einem spezifizierten Namen ansprechen.
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
CSS Paged Media Module Level 3
W3C Working Draft, 14 September 2023
break-after
break-after steuert, ob ein Umbruch nach einem Element stattfindet – etwa ein Seiten-, Spalten- oder Regionen-Umbruch.
| Wert | Bedeutung |
|---|---|
auto |
Standardverhalten – der Browser entscheidet, ob ein Umbruch erfolgt. |
avoid |
Vermeidet einen Umbruch nach dem Element. |
always |
Erzwingt immer einen Umbruch nach dem Element. |
page |
Seite umbrechen nach dem Element. |
left |
Nächste Seite soll linke Seite sein. |
right |
Nächste Seite soll rechte Seite sein. |
recto / verso |
(Spezifischer für Bücher: Vorder-/Rückseite) |
column |
Erzwingt einen Spaltenumbruch danach. |
region |
Erzwingt einen Regionen-Umbruch danach. |
element {
break-after: value;
}
Am Rande: Der Begriff »Region« taucht im Zusammenhang mit Paged Media auf. CSS Regions sollten Inhalte aus einer Quelle in mehrere Layout-Bereiche (Regionen) verteilen, so dass der Inhalt von einem Element in das nächste fließt, ähnlich wie in InDesign oder Word-Textboxen. Regions wurde von Firefox nie implementiert, Chrome hatte sie mittlerweile wieder entfernt, nur Safari (WebKit) unterstützt sie noch rudimentär. Regionen sind also kein praxistaugliches Konzept, aber manche CSS-Eigenschaften wie break-after: region tragen den Namen noch aus dieser Zeit.
break-before
break-before bestimmt, ob ein Element vor seinem Beginn einen Umbruch erzwingen oder verhindern soll – zum Beispiel:
- Seitenumbruch beim Drucken
- Spaltenumbruch in einem mehrspaltigen Layout
- Abschnittswechsel in einem EPUB
| Begriff | Bedeutung |
|---|---|
auto | Standardverhalten |
avoid | Vermeidet einen Umbruch vor dem Element |
page | Erzwingt einen Seitenumbruch (z. B. beim Drucken) |
column | Erzwingt einen Spaltenumbruch |
left / right | Beginnt auf linker oder rechter Seite (für Bücher) |
recto / verso | Für doppelseitige Layouts (Recto = rechts, Verso = links) |
always | Immer ein Umbruch, egal was |
h2.chapter {
break-before: page;
}
break-inside
break-inside steuert, ob und wie Seiten-, Spalten- oder Regionsumbrüche innerhalb eines Elements auftreten. break-inside ersetzt die ältere Eigenschaft page-break-inside und bietet eine einheitlichere Kontrolle über Umbrüche in verschiedenen Umgebungen.
| Begriff | Erklärung |
|---|---|
| auto | Standardwert; erlaubt automatische Umbrüche innerhalb des Elements. |
| avoid | Vermeidet Umbrüche innerhalb des Elements. |
| avoid-page | Vermeidet Seitenumbrüche innerhalb des Elements. |
| avoid-column | Vermeidet Spaltenumbrüche innerhalb des Elements. |
| avoid-region | Vermeidet Regionsumbrüche innerhalb des Elements. |
Verhindern, dass ein Absatz innerhalb einer Spalte unterbrochen wird:
p {
break-inside: avoid-column;
}
break-inside, break-after und break-before ersetzen mehrere frühere spezialisierte Eigenschaften wie page-break-* und column-break-* und gilt in verschiedenen Umgebungen:
| Kontext | Beschreibung |
|---|---|
| Mehrspaltig | Verhindert / Erzwingt Spaltenumbruch |
| Paginierung | Verhindert / Erzwingt Seitenumbruch |
| Fragmentierung | Auch in EPUB/PDF wichtig |
Fehler beim Seitenumbruch: orphans | widows
Einzelne Zeilen ab Anfang oder am Ende einer Seite wurden früher auch als Hurenkinder und Schusterjungen bezeichnet. Heute zieht man den Begriff »Seitenüberlauf« und die englischen Begriffe Waisen (orphans) und Witwen (widows) vor.
Erblich: Ja
| Wert | Erklärung |
|---|---|
| orphans | gibt an, wie viele Zeilen ein Absatz am Ende einer Seite enthalten muss und soll eine »verlassene« Zeile am Seitenanfang verhindern. |
| widows | gibt an, wie viele Zeilen ein Absatz am Anfang einer Seite enthalten muss und soll eine »verlassene Zeile am Seitenende verhindern. |
Wenn ein Absatz am Ende einer Seite weniger als integer Zeilen aufweist, wird ein Seitenumbruch eingefügt und der Absatz wird vollständig auf der nächsten Seite gesetzt.
Wenn ein Absatz am Anfang einer Seite weniger als zwei Zeilen aufweist, wird ein Seitenumbruch am Beginn des Absatzes eingefügt und der Absatz wird vollständig an den Beginn der nächsten Seite gesetzt.
p {
widows: 2;
orphans: 2;
}
Ein Absatz muss mindestens 2 Zeilen am Seitenende (widows) und mindestens 2 Zeilen am Seitenanfang (orphans) haben. Wenn das nicht möglich ist, wird der Umbruch an einer besseren Stelle durchgeführt.
:first |:left |:right
Erblich: Ja
Beim Druck von doppelseitigen Dokumenten wie Büchern oder Zeitschriften gibt es grundsätzlich drei Arten von Seiten: die erste, die linke und die rechte Seite.
first | left | right
first Einrichtung der Deckseite.
left linken Druckseiten eines Dokuments
right Formatierung der rechten Seiten
:first wird von allen modernen Browsern unterstützt (z. B. Chrome, Firefox, Safari), :left und :right hingegen werden kaum unterstützt. EPUB-Reader wie Apple Books oder Thorium können intern auf diese Pseudoklassen reagieren – aber es ist nicht garantiert. Der modernere, CSS3-basierte Ersatz ist die Kombination mit break-before, break-after usw..
Bilder für den Druck der Webseite
Das CSS für den Druck muss viele Eigenschaften überschreiben oder zurücksetzen, denn Papier und Monitor haben entgegengesetzte Anforderungen. Bilder werden mit display:none verborgen oder auf eine geringe Größe gesetzt, um Papier, Zeit und Druckkosten im Rahmen zu halten.
img {
max-width: 10cm;
}
Kummer bereiten u.U. Bilder mit dem HTML-Attribut loading="lazy". Wenn der Benutzer nicht bis zum Ende der Webseite scrollt, sondern früher den Druckbefehl absendet, sind Bilder eventuell noch nicht geladen.
Wer nicht zuvor bis zu dieser Stelle der Webseite gescrollt hat, wird diese Bilder im Druck oder beim Speichern als PDF nicht sehen.
Bilder werden asynchron geladen – d.h. der Text ist schon da, während die Bilder noch nach und nach geladen werden. U.U. könnte Javascript den Druck verzögern und die Bilder laden, wenn der Benutzer einen Druckbefehl absetzt (How to lazy load images and make them available for print).
In dieser Hinsicht ist decoding="async" flexibler, denn die Bilder werden auch auf diese Weise auch asynchron geladen, aber bereits wenn der Browser »zwischendurch« die Zeit dafür findet.
Das folgende CSS könnte zwar dafür sorgen, dass Bilder im Druck geladen werden, wird aber nicht von allen Browsern zuverlässig unterstützt.
@media print {
img[loading="lazy"] {
content: attr(src);
}
}
Zuverlässiger wird der Druck von Bildern mit ein paar Zeilen Javascript, die beim Drucken das eifrige Laden von Bildern erzwingen.
window.addEventListener("beforeprint", () => {
document.querySelectorAll("img[loading='lazy']").forEach(img => {
img.loading = "eager";
img.src = img.src;
});
});
PDF der Webseite erzeugen
Wenn der Druck exakten Vorgaben folgen soll (z.B. für Rechnungen, Preislisten), ist es angebracht, HTML und CSS in ein PDF zu transferieren. Das geht z.B. mit jsPDF, einer JavaScript-Bibliothek, die HTML in ein PDF-Dokument umwandeln kann.
document.getElementById("savePDF").addEventListener("click", () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.text("Wenn der Druck exakt sein soll!", 10, 10);
doc.save("dokument.pdf");
});
Weniger aufwändig ist der die Erzeugung von PDF mit html2pdf.js, einer Kombination aus html2canvas und jsPDF, die HTML und CSS fast originalgetreu als PDF speichert.
size / marks
CSS size und marks für den Druck von Webseiten sind nicht nicht mehr Teil von CSS Level 4. Das Interesse war zu gering, die Implementierung in den Browsern nur unzuverlässig.
Seitenumbruch: page-break-before / page-break-after
page-break-before / page-break-after gelten heute als veraltet und sollte nicht mehr verwendet werden. Obwohl einige Browser page-break-inside noch unterstützen, wurde es vielleicht bereits aus den Webstandards entfernt, wird vielleicht gelöscht oder wird nur aus Kompatibilitätsgründen aufbewahrt.
Wie und wann darf eine gedruckte Seite umbrechen? Per Vorgabe bricht die Seite um, wenn der bedruckbare Bereich gefüllt ist. Wenn das ausgerechnet nach einer Überschrift passiert, steht die Überschrift noch auf der leitenden Seite, aber der Inhalt zur Überschrift fließt in die Folgeseite. Gerade in Büchern gilt es, derart ungewollte Seitenumbrüche zu vermeiden. Ebenso unerwünscht sind natürlich auch Umrüche in der Mitte einer Tabelle, zwischen einem figure-Element und der Unterschrift bzw. Überschrift per figcaption.
page-break bestimmt, ob ein Seitenumbruch vor (before) oder nach (after) einem Element durchgeführt werden soll.
- auto
- ist die Voreinstellung und erzwingt keinen Seitenumbruch.
- always
- erzwingt stets einen Seitenumbruch vor/nach dem Element. >
- avoid
- vermeidet Seitenumbrüche vor/nach dem Element. >
- left
- >veranlasst ein oder zwei Seitenumbrüche, so dass ein Element stets vor/auf der linken Seite ausgegeben wird. >
- right
- veranlasst ein oder zwei Seitenumbrüche, so dass ein Element stets vor/auf der rechten Seite ausgegeben wird. >
Nicht alle Browser unterstützen alle Werte: avoid fällt bei allen Browsern unter den Tisch, bei Firefox wirken zudem left und right nicht (doppelseitiges Drucken).
Seitenumbruch vor jeder Kapitelüberschrift
h1 {
page-break-before: always;
}
Kein Seitenumbruch direkt nach einer Überschrift
h1, h2, h3, h4, h5 {
page-break-after: avoid;
}
page-break-inside: Seitenumbruch innerhalb von Elementen vermeiden
page-break-inside gilt als veraltet und sollte nicht mehr verwendet werden. Obwohl einige Browser page-break-inside noch unterstützen, wurde es vielleicht bereits aus den Webstandards entfernt, wird vielleicht gelöscht oder wird nur aus Kompatibilitätsgründen aufbewahrt.
page-break-inside bestimmt, ob innerhalb eines Elements ein Seitenumbruch stattfinden kann.
Kein Seitenbruch innerhalb von figure und table
table, figure {
page-break-inside: avoid;
}
