Druck-Stylesheets: eine Webseite auf Papier und als PDF brauchbar machen

Ziel

Eine Seite, die beim Drucken oder Speichern als PDF den Inhalt und sonst nichts enthält, mit lesbarer Schrift, intakten Tabellen, sichtbaren Linkzielen und Seitenumbrüchen an sinnvollen Stellen.

Voraussetzungen

Semantisches Markup (die Druckregeln sprechen nav, header, footer, aside, main an), eine Druckvorschau des Browsers zum Testen sowie Kenntnis der Mechanismen, die der Druckleitfaden von MDN beschreibt: @media print für druckspezifische Regeln, die At-Regel @page für Seitenmasse, Ausrichtung und Ränder, die Ereignisse beforeprint/afterprint, um das Dokument rund um eine Druckanfrage anzupassen, sowie window.print(), um den Dialog auszulösen.

Schritte

1. Am Ende des Stylesheets einen @media print-Block hinzufügen (die Spezifität gilt weiterhin). Bedienoberfläche ausblenden: nav, header, footer, aside, .toolbar, button { display: none }; fixierte und sticky Positionierung entfernen, da sie sonst auf jeder Seite wiederholt wird.
2. Die Seite zurücksetzen: weisser Hintergrund, schwarzer Text, eine Serifenschrift oder die Textkörperschrift in einer für Papier gewählten Grösse, max-width: none auf der Inhaltsspalte, damit sie die Seitenbreite nutzt.
3. Aufklappen, was der Bildschirm verbirgt: details-Elemente öffnen, alle Tab-Panels und Akkordeon-Inhalte anzeigen und gekürzten Text vollständig drucken. Das beforeprint-Ereignis dort einsetzen, wo CSS nicht hinreicht (etwa bei virtualisierten Listen, die nur sichtbare Zeilen rendern).
4. Linkziele anzeigen: a[href^="http"]::after { content: " (" attr(href) ")" }, wobei interne Anker und Links, deren Text bereits die URL ist, ausgeschlossen werden. abbr-Titel auf dieselbe Weise anzeigen, falls sie relevant sind.
5. Umbrüche steuern: break-inside: avoid auf Tabellen, Abbildungen, Codeblöcken und kartenartigen Gruppen; break-after: avoid auf Überschriften, damit sie nicht als Waisen am Seitenende stehen; break-before: page vor grösseren Abschnitten, wo sinnvoll; thead bei seinem Standardwert display: table-header-group belassen (nicht überschreiben), da Druck-Engines Kopfzeilen auf jeder Seite wiederholen können, über die sich eine Tabelle erstreckt.
6. @page { size: A4; margin: 2cm } festlegen (oder letter) und @page :first für einen abweichenden Rand auf der ersten Seite erwägen.
7. Farbe: Browser lassen beim Drucken üblicherweise Hintergrundfarben und -bilder weg; wo ein Hintergrund eine Bedeutung trägt (Status-Chips, Syntax-Highlighting), print-color-adjust: exact nur auf diesem Element setzen und dem Rest stattdessen einen Rahmen oder eine Textbeschriftung geben.
8. In der Druckvorschau zweier Browser testen, jeweils in Hoch- und Querformat, sowie einmal als „Als PDF speichern“; Seitenzahl prüfen und sicherstellen, dass nichts Wichtiges durch einen zu breit gefassten Selektor ausgeblendet wurde.

Erwartetes Ergebnis

Der Druck ergibt ein kompaktes Dokument mit dem gesamten Inhalt, ohne Navigation, mit lesbarem Code und lesbaren Tabellen sowie URLs, die sich von Papier abtippen lassen.

Grenzen und Prüfbasis

Das Verhalten folgt der zitierten MDN-Dokumentation; die Unterstützung von Seitenumbrüchen und die Funktionen von @page unterscheiden sich zwischen den Engines, und Headless-PDF-Generatoren haben ihre eigenen Standardwerte. Interaktive Inhalte (Karten, auf Canvas gezeichnete Diagramme) brauchen ein separat bereitgestelltes statisches Ersatzbild.

Die Bedienoberfläche der Seite ausblenden, nicht jeden header

header, footer und aside beziehen sich auf ihren jeweils nächstgelegenen Abschnitt; ein blankes header { display: none } entfernt daher auch den Titelblock eines Artikels, die Fussnoten eines Abschnitts und die Quellenangabe eines Zitats. Die Bedienoberfläche auf Seitenebene stattdessen über Position oder Klasse ansprechen:

@media print {
  body > header, body > footer, body > nav,
  .site-sidebar, .toolbar { display: none; }
  article header, article footer { display: block; }
}

Schaltflächen, die einen Zustand anzeigen (ein gedrückter Umschalter, der ausgewählte Tab), beibehalten und nur Bedienelemente ausblenden, die im Druck keine Bedeutung haben. Anschliessend Schritt 8 mit umgekehrter Fragestellung wiederholen: auflisten, was die Druckansicht enthalten soll, und für jeden Punkt bestätigen, dass er vorhanden ist, statt nach dem zu suchen, was fehlt.