Druckfreundliche Webseiten mit CSS

Eigene „Druckversionen“ unter separaten Adressen waren lange üblich. Heute genügen ein paar Zeilen CSS, damit dieselbe Seite auf Papier ordentlich aussieht – ohne zweite Adresse und ohne doppelte Pflege.

T. 1Warum überhaupt drucken?

Gedruckt wird seltener als früher, aber nicht selten: Kochrezepte, Bastelanleitungen, Anfahrtsbeschreibungen, Formulare, Fachartikel zum Anstreichen. Auch das Speichern als PDF über den Druckdialog ist nichts anderes als ein Ausdruck. Ohne Vorbereitung landen dabei Menüs, Werbebanner, Cookie-Hinweise und leere Seiten auf dem Papier.

T. 2Das Druck-Stylesheet

CSS unterscheidet zwischen Ausgabemedien. Regeln in einem @media print-Block gelten nur beim Drucken:

@media print {
  header nav, aside, footer, .werbung { display: none; }
  body { font: 11pt/1.45 Georgia, serif; color: #000; background: none; }
  main { width: auto; margin: 0; }
}

Alternativ lässt sich ein eigenes Stylesheet mit media="print" einbinden. Für kleine Anpassungen ist der Block im Haupt-Stylesheet praktischer.

T. 3Was ausgeblendet gehört

• Hauptnavigation, Brotkrumen und Suchfelder
• Seitenleisten, Werbung, Hinweise auf Newsletter
• Schaltflächen zum Teilen, Kommentarformulare
• Hintergrundbilder und Farbflächen, die nur Toner verbrauchen

T. 4Links sichtbar machen

Auf Papier kann man nicht klicken. Damit die Verweise nicht verloren gehen, lässt sich die Zieladresse hinter den Linktext schreiben:

@media print {
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }
}

Bei internen Links mit relativen Adressen ist das weniger hilfreich; dort genügt oft die Unterstreichung.

T. 5Umbrüche steuern

Ärgerlich sind Überschriften, die allein am Seitenende stehen, oder Bilder, die mitten durchgeschnitten werden. Dafür gibt es eigene Eigenschaften:

h2, h3 { break-after: avoid; }
figure, table, pre { break-inside: avoid; }
p { orphans: 3; widows: 3; }

Die Browser setzen diese Angaben unterschiedlich gründlich um, aber sie schaden nie. Mit @page lassen sich außerdem die Seitenränder festlegen.

T. 6Warum keine eigene Druckseite?

Separate Druckfassungen unter eigenen Adressen verdoppeln die Pflege und erzeugen doppelte Inhalte, die Suchmaschinen erst aussortieren müssen – ein Thema, das der Beitrag Duplicate Content vermeiden ausführlicher behandelt. Ein Druck-Stylesheet vermeidet beides.

Eine Übersicht über die Eigenschaften für Seitenumbrüche bietet das MDN. Allgemeine Regeln zur Gestaltung am Bildschirm stehen im Beitrag Gestaltung von Webseiten.