Design für den Druck mit CSS

Print Beispiel

Leider ist es immer noch nicht selbstverständlich, dass Webseiten ein entsprechendes Layout für den Printbereich, zum Drucken der Seite in Papierform, bereit stellen. Bei der Umsetzung einer Seite gehört es meines Erachtens zum guten Ton und Qualität, dass ein Stylesheet für den Druck bereit gestellt wird.

Um das Thema mal wieder ein wenig aktuell zu machen, stelle ich hier mal als Download ein Stylesheet bereit, mit dem man man schon eine ganze Menge an Optimierung für den Druck abdecken kann. Die einzelnen Abschnitte sind dokumentiert, so dass auch der Laie den Einstieg findet und entsprechende Anpassungen für die Verwendung im jeweiligen Projekt vornehmen kann. Weitere Hinweise und Einbindungssyntax im folgenden Artikel.

Eine druck-freundliche Version der Webseite sorgt für Genuss beim Leser, gerade wenn es umfassende Texte oder Tutorials geht, ist dass Ausdrucken keine Seltenheit. CSS hat dafür wunderbare Eigenschaften und macht es dem Entwickler leicht, eine optimierte Ausgabe für den Druck bereit zu stellen. Bitte nutze diese Möglichkeit auch!

Ganz besonders sind Links zu Händeln, denn nach dem Druck sind diese Informationen noch immer relevant und so sollten sie auch bestehen bleiben. Daher zeige ich alle Pseudeklassen an und gebe sie in abweichender Form aus. Damit gehen Sie dem Leser nicht verloren und man kann beim Lesen der Papierform darauf zurück greifen. Ein typisches Beispiel in HTML sieht so aus ...
<a href="https://bueltge.de/" title="Klick, um zur Startseite zu gelangen.">Link zu Startseite</a>

... und wird in der Druckform wie folgt ausgegeben.
Link zu Startseite (Link zu: https://bueltge.de/)

Einbinden des Stylesheet

Der Schlüssel für die Nutzung des Stylesheet als Drucklayout ist das Attribut media mit dem Wert print. Der folgende Beispielcode bindet das Stylesheet print.css ein und sorgt dafür, dass man es gezogen wird, wenn die Ausgabe Druck erfolgt. Diese wird unter anderem auch gezogen, wenn man im Browser Druckvorschau wählt, was das Testen sehr angenehm gestaltet.


<link rel="stylesheet" href="http://example.com/css/print.css" type="text/css" media="print" />

Bei der Nutzung von WordPress gehört es ebenso zum guten Ton, dass man ein Print-Stylesheet anbietet. leider stellen nur sehr wenige Themes dieses bereit. Dahingehend der Aufruf an Theme-Entwickler - bitte macht euch die Mühe und erweitert euer Theme um ein Stylesheet für den Druck!
Ablegen sollte man das Stylesheet dann im Theme-Ordner, so dass es nur Verwendung findet, wenn das Theme aktiv ist und der Verweis in die header.php des Themes hinterlegen.


<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" type="text/css" media="print" />

Alternativ kann man auch mit meinem Basis-Theme arbeiten, bei dem es ein Druck-Stylesheet gibt. Das Theme ist für den Start in ein neues Theme für WordPress ausgelegt und bringt einige Vorgaben mit.

Download:










Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.
Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.

Download als zip-Datei: print.css - 2 kByte


Weitere Infos zum Thema

Historie

  • 0.1 - erster Wurf
  • 0.2 - Abbrevations aufgenommen, #header verfeinert, so dass der Blogtitle bleibt, Links optimiert, ...

Comments are closed.