Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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 Druckversion

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

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: