- Responsives Design als Kern der Web-Erfahrung sollte nicht nur Geräte, sondern auch die Ausgabe auf Druckmedien berücksichtigen
- Aus Gründen der Barrierefreiheit, rechtlichen Anforderungen, auf Reisen und mehr bleiben Druckqualität und Nutzbarkeit von Webseiten weiterhin wichtig
- Mit den druckspezifischen CSS-Funktionen
@media print, @page, absoluten Einheiten, Seitenumbrüchen usw. lassen sich saubere Layouts, sinnvolle Aufteilungen und effizientes Drucken umsetzen
- Unnötige Elemente wie Navigation und Footer sollten ausgeblendet werden, während bei Links, Abkürzungen usw. Informationen für Papier ergänzt werden sollten
- Mit Blick auf Schwarzweißdruck, Tintensparen und Lesbarkeit sollten Farben und Hintergründe sparsam eingesetzt werden, um Druck und Bildschirmdarstellung wechselseitig zu verbessern
Warum Webdesign für den Druck wichtig ist
- Unter dem Aspekt der Barrierefreiheit können auch Menschen, die nicht lange auf einen Bildschirm schauen können, Informationen über gedruckte Inhalte erhalten
- Ohne Internetzugang auf Reisen, gesetzliche oder organisatorische Aufbewahrungspflichten und weitere Szenarien zeigen, dass gedruckte Materialien weiterhin in vielen Situationen genutzt werden
- Es gibt viele Gemeinsamkeiten mit digitalen Publikationsformaten wie EPUB, daher sind Erfahrungen mit Print-Styles eine gut skalierbare Technik
- Da Menschen Webseiten tatsächlich ausdrucken und nutzen, trägt die Druckoptimierung zur Verbesserung der gesamten User Experience bei
So wendet man Print-Styles an
- Mit CSS
@media print lassen sich eigene Styles nur für den Druck definieren
- Es gibt mehrere Wege, etwa
<link rel="stylesheet" media="print">, @import url("...") print oder internes CSS mit @media print { ... }
- Für reine Bildschirmdarstellung verwendet man
@media screen
Print-Styles testen
- Browser wie Edge, Chrome, Firefox und Safari bieten Funktionen zur Simulation von Druckmedien
- Die Simulation kann sich vom tatsächlichen Ausdruck unterscheiden; die meisten Browser deaktivieren Hintergründe standardmäßig (zum Tintensparen)
- Empfohlen werden Tests unter realen Druckbedingungen
Absolute Einheiten und die @page-Regel
- CSS bietet verschiedene absolute Einheiten wie cm, mm, in, pt und px; beim tatsächlichen Drucken sind sie für präzise Größenanpassungen nützlich
- Mit der Regel
@page lassen sich Papierformat (A4, A5 usw.), Ränder, Ausrichtung und mehr festlegen
- Zu berücksichtigen sind auch die Druckbereichsgrenzen des Druckers sowie automatisch hinzugefügte Footer/Header des Browsers
Seitenumbrüche und Absatzsteuerung
- Bei langen Inhalten sind Seitenumbrüche unverzichtbar; mit
break-before, break-after, break-inside lässt sich die Position passend steuern
- Die ältere Syntax
page-break-* ist weiterhin kompatibel
- Mit den Eigenschaften
orphans, widows lassen sich einzelne alleinstehende Zeilen am Anfang oder Ende eines Absatzes minimieren (allerdings ohne Unterstützung in manchen Browsern)
- Mit
box-decoration-break lässt sich die Konsistenz von UI-Elementen wie Rahmen bei Seitenumbrüchen sichern
Interaktive Elemente für den Druck anpassen
- Auf Papier sind Links, Abkürzungen und andere interaktive Elemente nicht nutzbar; daher können mit
a[href]:after, abbr[title]:after usw. URLs und Zusatzinformationen im Ausdruck ergänzt werden
- Formularelemente können als Eingabefelder für den Druck angeordnet werden, Scroll-Container sollten etwa mit
overflow: visible erweitert werden
- Unnötige Elemente wie Navigation und Footer werden mit
display: none entfernt, sodass sich das Drucken auf main beschränken lässt
Farbe, Tinte und Lesbarkeit
- Unter der Grundannahme von Schwarzweißdruck und Tintensparen kann visuelle Hervorhebung statt über Hintergrundfarben etwa über Rahmen erfolgen
- Mit
print-color-adjust: exact lässt sich die Farberhaltung für bestimmte Elemente erzwingen (nur bei Bedarf einsetzen)
- Bilder sollten auf das Nötigste reduziert, tintenintensive Elemente wie Werbung möglichst entfernt werden
Fazit
- Das Web existiert nicht nur auf dem Bildschirm, sondern auch in der physischen Welt des Papiers
- CSS-Print-Styles sind ein zentrales Element, um Barrierefreiheit und die Qualität der User Experience zu verbessern
- Damit alle Nutzer Inhalte auf unterschiedliche Weise konsumieren können, gehört die Druckoptimierung zu den unverzichtbaren Kompetenzen moderner Webentwicklung
2 Kommentare
Andererseits ist dieser Beitrag selbst nicht druckfreundlich.
UI-Elemente wie
COPY TO CLIPBOARD, die beim Drucken nutzlos sind, werden mit ausgedruckt,Code-Snippets werden abgeschnitten und horizontale Scrollbalken mitgedruckt.
Siehe dazu auch die zuvor erschienene CSS-Zusammenfassung zum Drucken auf Papier.
Das Drucken von Webseiten auf Papier und die Ausgabe als PDF sind wiederum unterschiedliche Dinge (etwa weil man ohne Tintenverbrauch Farben nutzen kann oder Hyperlinks verwendbar bleiben); eine passende Bibliothek dafür ist zum Beispiel paged.js.
Es lohnt sich, dies bei der Erstellung von Handbüchern, Schulungsunterlagen und Arbeitsblättern zu berücksichtigen!