Das Thema
Media Typen
Zunächst müssen die speziellen Druck-Stylesheets eingebunden werden (Codebeispiele finden sich in Peter Rozeks Artikel).
- Über eine separate CSS-Datei mit dem Mediatyp print
- Mit nur einer CSS-Datei über
@media printoderimport url(print.css)(Beachten: Druckstylesheets werden auch mitgeladen, wenn die Seite auf dem Bildschirm ausgegeben wird).
Entfernen von Inhaltselementen
Welche Inhaltselemente gehören in die Druckausgabe?
- In erster Linie der eigentliche Content.
- Navigation, Suchmasken, Werbebanner brauchen nicht dargestellt werden. Entfernen über die Deklaration
display: none;. - Letztlich sollte man im Einzelfall entscheiden.
Wichtig für ein gutes Printstylesheets ist die Beachtung von Standards. Bereits beim Aufbau eines gut strukturierten Webdokuments ist die Vergabe von standardisierten ID-Klassen sinnvoll:
Header, Content, Footer, Sidebar, Search, Branding, Keyvisual, Banner etc.
Gestaltung von Elementen
- Standardschriftgröße auf 12pt setzen – absolute Größe für die Druckversion. Pixel als Größenangabe zu verwenden liegt zwar nahe, ist aber nicht zu empfehlen.
- Einfaches Beispiel: Bei einem 1200 dpi -Drucker würde z. B. eine 12 Pixel große Schrift 0.01 Zoll groß gedruckt werden.
- (Hintergrund-)Farben anpassen und gegebenenfalls Blocksatz einsetzen.
- Seitenbreite und Abstände für ein gutes Schriftbild wählen. Dabei möglichst cm oder mm nutzen.
- Links sollte man je nach Bedarf unterstreichen, fett drucken oder farblich anpassen.
CSS-Pseudoelemente
- Mit den Pseudoelementen
:afterund:beforekönnen Elemente via CSS nur für die Printausgabe angezeigt werden. So kann man beispielsweise Linkziele, Titel, Zitatquellen oder Alterativtexte von Grafiken ausgeben. (Codebeispiele finden sich in Peter Rozeks Artikel) - Nachteil: IE bis zur Version 7 unterstützt dies nicht.
- Zusätzlich gibt es noch CSS-Regeln, die nur rudimentär oder gar nicht unterstützt werden. Dazu gehören beispielsweise @page für das Seitenlayout und orphans / widows zur Vermeidung von Schusterjungen und Hurenkindern.
- page-break-before und page-break-after funktioniert hingegen sogar im Interne Explorer 4+.
Alternativen bzw. Erweiterungen
Der Artikel Improving Link Display for Print zeigt wie mit JavaScript eine Druckausgabe erstellt werden kann, die mit Verweisen und Zitaten umgeht, wie wir es aus ein Buch oder Fachartikel her kennen.
- Links und Zitate werden als Fußnote gekennzeichnet,
- in der Druckausgabe werden die Fußnoten in einer geordneten Liste angezeigt und stören somit nicht den Lesefluss
- Funktioniert auch mit dem IE 6, ist aber natürlich auf aktiviertes JavaScript angewiesen.
Beispiele
Die Biene Preistäger 2008
- Hauptbahnhof Wien
Leider etwas klein und deutlich zu wenig Platz genutzt. - Darmkrebs
Im Gegensatz zum Hauptbahnhof Wien, wird der gesamte Platz genutzt. Druckausgabe sieht OK aus. - Gemeinde Schönefeld
Schöne Druckversion. Besonders positiv: Schriftgröße in pt (Punkt) und Abstände in cm angegeben.
Druckversion auf den Seiten der Moderatoren
Sonstige Beispiel
- A List apart
Im ganzen sehr schön gelöst - Webstandard Magazin
Auf Windows OK, dafür auf dem MAC zu klein. An bestimmten Stellen fehlerhaft (z.B. Logo). - Five Simple Steps
Keine wirklich gelungen Druckversion.
