Druck-Stylesheets für eine persönliche Website — Seiten auf Papier sinnvoll gestalten

Vor einiger Zeit druckte ich einen meiner eigenen Artikel aus und stellte fest, dass die Papierversion beinahe alles enthielt, nur kein angenehmes Leseerlebnis. Die Navigation belegte den oberen Bereich, Share-Buttons schwebten neben dem Text, dunkle Farben verbrauchten Tinte und auf der letzten Seite stand kaum mehr als der Footer.

Drucken mag altmodisch klingen, doch Menschen speichern Rezepte, Workshop-Anleitungen, Rechnungen, Lernnotizen und lange Essays weiterhin auf Papier oder als PDF. Ein kleines Druck-Stylesheet respektiert dieses Verhalten. Es ist wie das Aufräumen eines Zimmers vor dem Besuch eines Gastes: Der Inhalt bleibt unverändert, aber unnötige Gegenstände stehen nicht mehr im Weg.

Print ist ein weiterer Responsive-Kontext

Responsive Design beschreiben wir meist als Anpassung einer Seite an Smartphones, Tablets und Desktop-Computer. Papier ist ein weiterer Viewport, allerdings mit ungewöhnlichen Regeln. Es hat eine feste physische Größe, harte Seitengrenzen, kein Scrolling, keine Animation und keine verlässliche Möglichkeit, einen Link anzuklicken. Hintergrundfarben können deaktiviert sein, Ränder unterscheiden sich je nach Drucker und ein schönes Bildschirm-Layout kann ungeschickt auf zwei Blätter verteilt werden.

Deshalb sollte ein Druck-Stylesheet nicht als Miniatur-Redesign verstanden werden. Seine Aufgabe besteht darin, die Bedeutung des Dokuments zu bewahren und gleichzeitig Interface-Elemente zu entfernen, die nur auf einem Bildschirm sinnvoll sind. Artikeltitel, Autor, Veröffentlichungsdatum, Überschriften, Absätze, Bilder, Tabellen, Zitate und Codebeispiele sind normalerweise wichtig. Ein Hamburger-Menü, Cookie-Banner, Suchfeld, Karussell mit verwandten Beiträgen und eine fixierte Newsletter-Box sind es meist nicht.

Der Unterschied ähnelt dem Packen für eine kurze Zugreise. Man verkleinert nicht das gesamte Haus, damit es in einen Koffer passt, sondern wählt aus, was am Ziel tatsächlich nützlich bleibt.

Mit einem Inhaltsinventar beginnen

Bevor du CSS schreibst, öffne einen repräsentativen Artikel und rufe die Druckvorschau des Browsers auf. Wähle möglichst eine Seite mit einem Bild, einem langen Codeblock, einer Tabelle und mehreren Überschriften. Notiere anschließend, was erhalten bleiben, was verschwinden und was anders behandelt werden soll. Dieses kurze Inventar verhindert einen häufigen Fehler: einen großen Container auszublenden, der zugleich wesentliche Inhalte umfasst.

Bevorzuge semantisches HTML und stabile Utility-Klassen. Elemente wie <article>, <nav>, <aside> und <footer> machen Druckregeln leichter verständlich. Eine Klasse wie .no-print ist für einzelne Bedienelemente nützlich, sollte aber keine bedeutungsvolle Struktur ersetzen.

Entscheide außerdem, ob das gedruckte Ergebnis vor allem ein Artikel, ein Beleg oder ein Referenzdokument ist. Ein Essay profitiert von angenehmer Typografie und sichtbaren Linkzielen. Ein Beleg benötigt kompakte Abstände und vollständige Transaktionsdetails. Ein generisches Regelwerk kann eine Basis liefern, doch der Inhaltstyp sollte die endgültigen Entscheidungen bestimmen.

Eine praktische CSS-Basis

Das folgende Stylesheet ist bewusst zurückhaltend. Es entfernt reine Bildschirmkomponenten, wechselt zu einer tintenfreundlichen Farbgebung, lässt den Artikel die verfügbare Breite nutzen, druckt nützliche Linkziele und reduziert störende Seitenumbrüche.

@media print {
  @page {
    margin: 18mm;
  }

  *, *::before, *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html {
    font-size: 11pt;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.5;
  }

  nav,
  aside,
  .site-header,
  .site-footer,
  .share-buttons,
  .comments,
  .newsletter,
  .no-print {
    display: none !important;
  }

  main,
  article {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  h1, h2, h3 {
    break-after: avoid-page;
    page-break-after: avoid;
  }

  p, blockquote, figure, pre, table {
    orphans: 3;
    widows: 3;
  }

  figure, pre, table, blockquote {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border: 1px solid #999;
    padding: 8pt;
  }

  article a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    overflow-wrap: anywhere;
  }
}

Übernimm die Selektorliste nicht ungeprüft. Untersuche dein Theme und ersetze die Klassennamen durch die tatsächlich vorhandenen Bildschirmkomponenten deiner Website. Gutes Print CSS ist häufig kurz, weil das zugrunde liegende HTML Inhalt und Interface bereits sauber trennt.

Links, Bilder und Code sorgfältig behandeln

Eine blau unterstrichene Formulierung vermittelt auf dem Bildschirm, dass etwas anklickbar ist. Auf Papier bleibt diese Information unvollständig. Das Anhängen des Ziels macht externe Referenzen wieder auffindbar. Wenn jedoch jede URL gedruckt wird, kann ein Absatz unruhig wirken, besonders bei interner Navigation oder verlinkten Überschriften. Begrenze die Regel auf den Artikelinhalt und schließe gegebenenfalls Anker, Fußnotenlinks und Links aus, deren sichtbarer Text bereits die URL enthält.

Auch Bilder erfordern Abwägung. Informative Diagramme, Screenshots und Fotos, auf die der Text eingeht, sollten erhalten bleiben. Dekorative Verläufe, wiederholte Avatare in Kommentaren und übergroße Hero-Bilder können Tinte verschwenden, ohne Bedeutung hinzuzufügen. Wenn ein Bild von Farbe abhängt, prüfe seine Verständlichkeit in Graustufen. Gehe nicht davon aus, dass erzwungenes print-color-adjust: exact die Lösung ist; Leser können Hintergründe bewusst deaktivieren, um Tinte zu sparen.

Codeblöcke sind besonders gefährdet, weil eine einzige lange Zeile über den druckbaren Bereich hinaus abgeschnitten werden kann. white-space: pre-wrap hält den gesamten Inhalt sichtbar, auch wenn der Umbruch kopierbare Befehle weniger eindeutig machen kann. Verkleinere Code nicht bis zur Unlesbarkeit. Wenn unveränderte Zeilen entscheidend sind, kürze die Beispiele oder weise darauf hin, dass der kanonische Befehl online verfügbar bleibt.

Seitenumbrüche steuern, ohne gegen den Drucker zu kämpfen

Die Aufteilung auf Seiten ist der weniger vorhersehbare Teil von Print CSS. Die modernen Properties heißen break-before, break-after und break-inside, während ältere page-break-*-Properties weiterhin die Kompatibilität verbessern. Für eine kleine persönliche Website ist es sinnvoll, beide Varianten zu verwenden.

Halte eine Überschrift zumindest mit einem Teil des nachfolgenden Absatzes zusammen. Versuche, kompakte Abbildungen, Zitate oder Codebeispiele auf einer Seite zu halten. Die Properties orphans und widows bitten den Browser, keine einzelne Zeile am unteren oder oberen Seitenrand zurückzulassen. Es sind Wünsche, keine absoluten Befehle: Ein Block, der höher als ein Blatt ist, muss trotzdem getrennt werden.

Setze break-inside: avoid nicht auf jeden Absatz oder große Container. Der Browser kann sonst weite leere Flächen hinterlassen, ähnlich wie jemand beim Packen von Kartons, der sich weigert, irgendeine Gruppe von Dingen aufzuteilen. Nutze Umbruchkontrollen nur dort, wo eine Trennung das Verständnis wirklich beeinträchtigen würde.

Mehr als einen perfekten Artikel testen

Öffne in Chromium oder Firefox die Druckvorschau und teste A4 und Letter, Hochformat, mehrere Randeinstellungen sowie farbige und monochrome Ausgabe. Speichere ein PDF und kontrolliere jede Seite. Das PDF ist nicht deshalb hilfreich, weil es jeden physischen Drucker perfekt abbildet, sondern weil es abgeschnittene Inhalte, leere Seiten, übergroße Medien und verwaiste Überschriften schnell sichtbar macht.

Teste danach Grenzfälle: einen kurzen Beitrag, einen sehr langen Beitrag, eine Seite ohne Bilder, eine breite Tabelle, eine lange URL, verschachtelte Listen und ein Codebeispiel mit einem ununterbrochenen Token. Erhöhe vor der Vorschau den Browser-Zoom oder die Standardschriftgröße, um Annahmen über feste Abmessungen aufzudecken. Unterstützt deine Website Dark Mode, teste bei aktiviertem Modus und stelle sicher, dass die Druckregeln weiterhin dunklen Text auf hellem Hintergrund erzeugen.

Du kannst Print Media außerdem in den Browser-Entwicklertools emulieren. Dadurch bleibt die Seite bei aktiven Druckregeln untersuchbar, was das Debugging von Selektoren deutlich beschleunigt. Die abschließende Druckvorschau bleibt dennoch unverzichtbar, weil die Emulation in den Entwicklertools keine echte Seiteneinteilung zeigt.

Die gedruckte Seite ehrlich halten

Ein nützlicher gedruckter Artikel sollte genügend Kontext enthalten, um eigenständig verständlich zu sein. Erwäge, den Namen der Website, den Artikeltitel, den Autor, das Veröffentlichungs- oder Aktualisierungsdatum und die kanonische URL in einem kompakten druckspezifischen Header oder Footer anzuzeigen. Das ist wichtig, wenn ein PDF heute heruntergeladen und Monate später in einem unbeschrifteten Ordner wiedergefunden wird.

Füge wesentlichen Kontext nicht ausschließlich über CSS Generated Content ein, da Unterstützung und Accessibility variieren können. Lege aussagekräftige Metadaten im HTML ab und nutze CSS, um deren Darstellung zu ändern. Wenn sich ein Artikel häufig ändert, gib ein Aktualisierungsdatum an, statt so zu tun, als bliebe der Ausdruck für immer aktuell.

Denke zuletzt an Privacy. Eine gedruckte Kontoseite darf nicht versehentlich verborgene Bedienelemente, Tokens, E-Mail-Adressen oder Debugging-Daten offenlegen. Die Druckvorschau ist eine weitere Ausgabeoberfläche und verdient deshalb dieselbe Sorgfalt wie ein öffentlicher Screenshot.

Fazit: Eine kleine Funktion mit langem Leben

Ein Druck-Stylesheet erscheint selten auf einer Feature-Roadmap, kann eine persönliche Website aber langlebiger und großzügiger machen. Mit einem fokussierten @media print-Block lassen sich störende Interface-Elemente entfernen, lesbare Typografie schützen, Referenzen bewahren und die schlimmsten Überraschungen bei Seitenumbrüchen vermeiden.

Beginne mit einem echten Artikel statt mit einem theoretischen Design-System. Drucke ihn aus, markiere verschwenderische oder verwirrende Stellen, passe das CSS an und wiederhole den Vorgang mit einigen Grenzfällen. Wenn du Print Styles für deine eigene Website erstellt hast, teile das merkwürdigste Problem in den Kommentaren; gerade die kleinen Eigenheiten von Browsern und Druckern vermitteln oft die nützlichsten Lektionen.