kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Druckversion und print.css einer Website

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.
In diesem Artikel findet ihr einige hilfreiche CSS-Befehle für die Anpassung der Druckausgabe.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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-break in Tabellen
  • Vermeidet page-break in gefloateten Elemente
  • Vermeidet page-break in inline-block-Elementen
  • Vermeidet page-break in Block-Elementen denen ein border zugewiesen wurde

Beispiel-Website mit Durckversion

Das folgende Beispiel einer »Mobile First« entwickelten Website verwendet Media Queries um die Druckausgabe anzupassen. Es werden die Link-Ziele eingeblendet, das Layout umstrukturiert und überflüssige Elemente versteckt.

Beispiel-Website öffnen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.