print.css

Warum sollte man heute immer noch ein print.css, also ein Stylesheet damit die Website beim Drucken schön aussieht, anbieten?

1. Es gibt immer noch Orte oder Leute, die kein Internet haben.
2. Es ist auch ganz praktisch, um aus einer Website eine pdf-Datei zu erstellen.

Sucht man im Internet nach passenden Artikeln, findet sich wiedermal eine schiere Masse:

• The Styleworks – „Druck-Layouts mit CSS“
• Smashin Magazine – „How To Set Up A Print Style Sheet“
• Webmasterpro.de – „CSS für den Druck“
• WebDesign by mts – „Anleitung für die Print.css, denn Datei → Drucken ist nach wie vor sehr beliebt – das Drucklayout“
• Peter Rozek – „CSS-Design: Grundlagen Druck-Stylesheets“

Ich finde allesamt lesewürdig, allerdings dauert das doch ein wenig. Deswegen habe ich mal ein stichpunktartige Liste erstellt, was man alles anpassen sollte: (das ist mehr eine Gedächtnisstütze, wer ausführlichere Beschreibungen will → verlinkte Artikel lesen)

• allgemeines Seitenlayout
  • margin,padding entfernen
  • statt min-midth oder max-width generell width: 100%
• für Druck unnötige Elemente verstecken mit display: none
  • betrifft Navigation, Header oder Footer
  • „interaktive Elemente“ wie video, audio, embed, object
• Schriften
  • nur schwarze oder dunkelgraue Schriftfarbe
  • serifen-Schrift statt sans-serife → bessere Lesbarkeit
  • Schriftgröße z.B. auf 12 pt setzten (pt ist wegen variablen Druckerauflösung zu bevorzugen)
  • Hintergrundfarben entfernen, stattdessen z.B. farbige Umrahmungen mit 1pt oder 2pt Dicke

  • Links sind auf Papier nicht klickbar; zwei Möglichkeiten:

    • per CSS :after href-Attribute hinter den Text ausgeben
      Beispielbasisimplementierung

      1	p a:after { content: "["attr(href)"]"; font-size: 90%;}

    • per JavaScript Fußnoten erstellen

    • Bilder
      • maximale Breite und Höhe einstellen, z.B. 500px → verbraucht weniger Tinte und erhält Lesbarkeit
      • background-images (via CSS) werden von den Browsern standardmäßig nicht gedruckt! (nur änderbar über Einstellungen des Clients, nicht CSS)
    • Umbrüche verschönern (unterstützt aber leider nicht jeder Browser)
      • widows und orphans
      • page-break Damit man auch den Unterschied zwischen overflow: auto und ohne wrapping sieht, hab ich hier einen kleinen Vergleich gebastelt.
    • Text vollständig lesbar machen (betrifft beispielsweise pre)
      Lösungen heißen word-wrap und white-space, ein vollständig kugelsicherer Codeblock findet sich auf CSS-Tricks
    • Quelle ggf. mit Lizenzhinweis ans Ende des Ausdrucks

Ob man das Ganze dann letztendlich von Grund auf neu baut oder vorhandene Regeln überschreibt, bleibt jedem selbst überlassen. Ebenso, ob man das in einen eigene CSS-Datei packt und via

1

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

einbindet oder einfach

1

@media print { … Druck-CSS hierher … }

verwendet. Nur eine Anmerkung: Die allermeisten Browser laden automatisch ein Stylesheet mit media="print" – nach der Regel „man könnte es ja ggf. drucken wollen“.