Print Styles für den Druck – Webseiten drucken

@media print – 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 durch die @media-Regel eingebunden oder als separate CSS-Datei.

/* ======================================
   PRINT STYLES
====================================== */

@media print {
	body {
		font-size: 11pt;
	}

	form,
	button,
	#undo {
		display: none !important;
	}

	table {
		break-inside: avoid;
	}
}

In der CSS-Datei: So ist alles an einem Ort, kein zusätzlicher Request erforderlich, das CSS ist leichter wartbar und die Print-Styles funktionieren auch mit Build-Tools.

Variante 2: In großen Enterprise-Projekten sind Print-Stile in einer speparaten CSS-Datei sinnvoll, denn hier entsteht eine komplett andere Layoutstruktur als im Web. Auch in CMS-Systemen wie WordPress können die Print-Styles sehr umfangreich werden.

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Die modernen Browser laden CSS sehr effizient und media="print" wirkt nicht render-blockierend für den Screen. Darüber hinaus minimieren HTTP/2 und HTTP/3 den Request-Overhead.

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

@page-Regel – Papiergröße

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.

Die Seitenregel @page enthält die Ränder der Seite, z.B.

@media print {
	@page { 
		margin: 2cm;
		size: A4 landscape;
	}
}

@page ist wichtig bei Tabellen, Berichten, Rechnungen und beim Export als PDF.

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. Das ist typisch für Titelseiten, Briefkopf und Berichten.

@page :left {
  margin-left: 4cm;
  margin-right: 3cm;
}

CSS Paged Media Module Level 3
W3C Working Draft, 14 September 2023

Bis heute wird das automatische Einfügen von Header / Footer nicht unterstützt, Seitenzahlen sind praktisch nicht nutzbar. Auch wenn die Paged-Media-Spezifikation theoretisch mehr hergibt: Die Browser unterstützen nur einen kleinen Teil. EPUBs (Apple Books, Google Play Books) sind quasi noch eingeschränkter.

break-after – Seitenumbruch nach einem Element

break-after steuert, ob ein Umbruch nach einem Element stattfindet – etwa ein Seiten-, Spalten- oder Regionen-Umbruch.

element {
	break-after: value;
}

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).

Wie und wann darf eine gedruckte Seite oder eine Überschrift im Spaltensatz umbrechen? Per Vorgabe bricht die Seite / Spalte um, wenn der bedruckbare Bereich gefüllt ist. Wenn das ausgerechnet nach einer Überschrift passiert, steht die Überschrift noch auf der leitenden Seite / Spalte, aber der Inhalt zur Überschrift fließt in die Folgeseite / nächste Spalte. Sowohl in Büchern als auch im Spaltensatz gilt es, derart ungewollte Unterbrechungen 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-before / page-break-after gelten heute als veraltet und sollten 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.

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 – Seitenumbruch vor einem Element erzwingen

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

h2.chapter {
	break-before: page;
}

break-inside – Seitenumbruch innerhalb von Elementen verbieten

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.

Verhindern, dass eine Überschrift innerhalb einer Spalte unterbrochen wird:

h2 {
  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:

Fehler beim Seitenumbruch: Hurenkinder und Schusterjungen (orphans | widows)

Einzelne Zeilen ab Anfang oder am Ende einer Seite oder in einer Spalte beim Spaltensatz werden als Hurenkinder und Schusterjungen bezeichnet.

Erblich: Ja

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 haben früher u.U. Bilder mit dem HTML-Attribut loading="lazy" gemacht. Wenn der Benutzer nicht bis zum Ende der Webseite gescrollt hatte, sondern früher den Druckbefehl absendet, waren 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. Heute werden Lazy Images automatisch beim Druck nachgeladen. Selbst in Safari, das traditionell zickig ist, funktioniert das Nachladen der Bilder für den Druck heute.

Schief gehen kann das Laden der Bilder bei aggressiven ImageObserver-Lösungen, bei Custom Lazy-Loader anstelle des nativen loading="lazy". Natives Lazy Loading ist stabiler als all die alten JavaScript-Lösungen.

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.