Druckversion und print.css einer Website
Von Jonas Mit der Medienabfrage »print« können Stylesheets für die Druckdarstellung geladen werden. Mit spezifischen Print-CSS-Befehlen kann das Drucklayout angepasst werden.
Eine optimierte Druckausgabe gehört auch in Zeiten von Responsive Design zum Standardrepertoire einer professionellen Website. Wenn der Code der Website »Mobile First« geschrieben wurde, ist die Anpassung des Layouts für den Druck sogar besonders einfach, da die Smartphone-Ansicht i.d.R. linear aufgebaut ist. Diese Darstellung wird auch in der Druckausgabe häufig gewünscht, weshalb weniger Anpassungen notwendig sind als bei »Desktop-First« geschriebenem Quellcode.
Druckausgabe herstellen
Um die Druckausgabe zu steuern werden heute meist Media Queries eingesetzt. Innerhalb des Stylesheets sieht die entsprechende Passage dann z. B. so aus:
@media print {
/* Druckausgabe */
}Alternativ kann auch der Link-Tag im HTML-<head> verwendet werden. In diesem Fall verwendet ihr folgenden Code:
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>Inhalte in der Druckversion ausblenden
In der Druckausgabe machen einige Elemente keinen Sinn. Normalerweise sind das interaktive Elemente die auf Papier nicht benutzt werden können. Um Elemente dieser Art nicht zu drucken, wird normalerweise eine zusätzliche CSS-Klasse verwendet.
@media print {
.hide-in-print {display:none;}
}Link-Ziele anzeigen
Damit Links erkennbar bleiben und auch in der Druckversion einen Mehrwert bieten, sollte das Link-Ziel angezeigt werden. Dies geschieht mit Hilfe des Pseudoelements :after. Folgender Code fügt die URLs in Klammern hinter jedem Link ein.
a:after {
content:' - ' attr(href);
}Umbrüche verhindern oder erzwingen
Damit in der Druckversion keine unschönen Seitenumbrüche entstehen, lohnt es sich Regeln für die betroffenen Elemente festzulegen. Dazu verwendet man die page-break-Eigenschaften in CSS.
page-break-inside
Mit page-break-inside steuert ihr den Seitenumbruch innerhalb eines Elements. Um den Umbruch zu verhindern, verwendet man den Wert avoid. Innerhalb von Bildern oder Tabellen soll üblicherweise kein Umbruch erfolgen, der Code sieht dann so aus:
table, img {
page-break-inside: avoid;
}page-break-before
Mit page-break-before wir der Umbruch vor einem Element gesteuert. Um einen Umbruch vor jedem <h1>-Element zu erzwingen, verwendet folgenden Code:
h1 {
page-break-before: always;
}page-break-after
Mit page-break-after steuert ihr den Umbruch direkt nach einem Element. Auch hier bietet es sich an, den Umbruch für bestimmte Elemente zu erzwingen, für andere zu verbieten. Wenn keine Umbrüche direkt nach Überschriften entstehen sollen, verwendet folgenden Code:
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid;
}Um nach jeder Tabelle einen Seitenumbruch zu erzeugen, verwendet folgenden CSS-Code:
table {
page-break-after: always;
}Kompatibilitätsprobleme bei page-break
Die page-break-Eigenschaften funktionieren nicht in allen Browsern. Insbesondere der Chrome-Browser hat in einigen Versionen Probleme mit der korrekten Darstellung. Sollte Ihr Probleme bemerken, versucht folgendes Workaround bzw. achtet auf folgende Punkte:
- Setzt alle Eltern-Elemente auf
float:none - Vermeidet
page-breakin Tabellen - Vermeidet
page-breakin gefloateten Elemente - Vermeidet
page-breakininline-block-Elementen - Vermeidet
page-breakin Block-Elementen denen einborderzugewiesen wurde
Beispiel-Website mit Druckversion
Das folgende Beispiel verwendet Media Queries um die Druckausgabe anzupassen. Es werden die Link-Ziele eingeblendet, das Layout umstrukturiert und überflüssige Elemente versteckt. Öffnet das Beispiel und aktiviert die Druck-Vorschau des Browsers.
Geschrieben von Jonas
Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.
