Print-Stylesheets: eine Webseite auf Papier und als PDF nutzbar machen

Ziel

Eine Seite, die beim Drucken oder Speichern als PDF nur den Inhalt enthält und sonst nichts, 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 Druck-Leitfaden von MDN beschreibt: @media print für Regeln, die nur beim Drucken gelten, 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 (Spezifität gilt weiterhin). Das Chrome ausblenden: nav, header, footer, aside, .toolbar, button { display: none }; fixierte und klebende Positionierung entfernen, da sie sonst auf jeder Seite wiederholt wird.
2. Die Seite zurücksetzen: weisser Hintergrund, schwarzer Text, eine Serifenschrift oder die Fliesstextschrift in einer für Papier gewählten Grösse, max-width: none auf der Inhaltsspalte, damit sie die volle 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. Wo CSS nicht hinreicht (z. B. virtualisierte Listen, die nur sichtbare Zeilen rendern), das Ereignis beforeprint verwenden.
4. Linkziele anzeigen: a[href^="http"]::after { content: " (" attr(href) ")" }, wobei interne Anker und Links, deren Text bereits die URL ist, ausgenommen werden. abbr-Titel auf dieselbe Weise anzeigen, falls sie relevant sind.
5. Umbrüche steuern: break-inside: avoid auf Tabellen, Abbildungen, Codeblöcke und kartenartige Gruppen; break-after: avoid auf Überschriften, damit sie nicht verwaist am Fuss einer Seite stehen; break-before: page bei Bedarf vor grösseren Abschnitten; thead bei seinem Standardwert display: table-header-group belassen (nicht überschreiben), weil Druck-Engines die Kopfzeile auf jeder Seite wiederholen können, über die sich eine Tabelle erstreckt.
6. @page { size: A4; margin: 2cm } setzen (oder letter) und für einen abweichenden Rand der ersten Seite @page :first in Betracht ziehen.
7. Farbe: Browser lassen beim Drucken Hintergrundfarben und -bilder häufig 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 in zwei Browsern testen, sowohl im Hoch- als auch im Querformat, und einmal als «Als PDF speichern»; die Seitenzahl prüfen und sicherstellen, dass kein zu breit gefasster Selektor etwas Wichtiges ausgeblendet hat.

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 eigene Standardwerte. Interaktive Inhalte (Karten, auf Canvas gezeichnete Diagramme) brauchen ein separat bereitgestelltes statisches Ersatzbild.

Nur das Chrome der Website ausblenden, nicht jeden Header

header, footer und aside beziehen sich auf ihren nächstgelegenen Abschnitt, sodass ein blosses header { display: none } auch den Titelblock eines Artikels, die Fussnoten eines Abschnitts und die Quellenangabe eines Zitats entfernt. Das Chrome 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. Schritt 8 anschliessend mit umgekehrter Fragestellung durchführen: auflisten, was die Druckansicht enthalten soll, und für jeden Punkt bestätigen, dass er vorhanden ist, statt nach dem zu suchen, was fehlt.