Print.css für Webseiten erstellen

„Denn was man schwarz auf weiß besitzt, kann man getrost nach Hause tragen.“ Im Zeitalter von Terabyte-Festplatten, Online-Webspace und Netbooks mit WLAN mag dieser Satz, den Goethe vor über 200 Jahren seinem Faust in den Mund gelegt hat, etwas anachronistisch klingen. Wer druckt heute noch Informationen aus, auf die man ganz leicht online zugreifen kann?

Nun ja, ein paar Leute gibt es schon noch, die keinen Internetzugang haben und sich über einen Ausdruck freuen. Und lange Artikel lesen sich auf Papier einfach besser als auf dem Monitor. Auch bei Anleitungen ist es praktischer, wenn man sie ausgedruckt vor sich liegen hat, anstatt ständig von einem Tab zum anderen wechseln zu müssen.

Screenshot-Tools sind kein Ersatz für eine print.css

Andererseits ist es auch verständlich, dass viele Leute eine gewisse Scheu davor haben, Webseiten auszudrucken. Viele Webmaster kommen nämlich gar nicht auf die Idee, eine Druckversion ihrer Webseiten zu erstellen. Schließlich können die User sich ja auch mit einem Screenshotprogramm die Inhalte der Website ausdrucken.

Das ist allerdings ein wenig zu kurz gedacht, denn so praktisch ein solches Tool in vielen Fällen sein kann, zum Ausdrucken von Webseiten ist es eigentlich nicht gedacht. So wird zum Beispiel die Hintergrundfarbe mit ausgedruckt, was bei den hohen Preisen, die man für eine Tintenpatrone zahlen muss, wohl eher selten erwünscht ist.

Eine print.css in die Webseite einbinden

Eine Druckversion einer Webseite zu erstellen macht also schon Sinn und es ist auch gar nicht so schwierig, wie man im ersten Moment vielleicht glauben könnte. Am einfachsten ist es, wenn man eine eigene CSS-Datei nur für den Ausdruck erstellt und diese in alle Webseiten integriert. Normalerweise bindet man eine CSS-Datei ja so ein:

<link rel="stylesheet" type="text/css" href="style.css" />

Wenn man die CSS-Datei so aufruft, wird sie für alle möglichen Zwecke genutzt, also auch für’s Drucken. Da wir dafür aber eine eigene CSS-Datei erstellen wollen, ist es wichtig, dem Browser zu sagen, dass er die bisherige CSS-Datei nur für die Monitordarstellung nutzen soll. Dafür setzen wir das media-Attribut auf „screen“:

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

Und bei Bei unserer CSS-Datei, die wir für den Druck nutzen wollen, setzen wir das media-Attribut auf „print“:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Wenn wir diese beiden Zeilen in eine Webseite einbinden, verwendet der Browser automatisch die richtige Version, abhängig davon, ob sie auf dem Monitor angezeigt oder ausgedruckt werden soll.

Was schreiben wir nun in unsere print.css rein (der Dateiname kann übrigens beliebig gewählt werden)?

Die passende Schrift für eine print.css

Zuerst ist es mal wichtig, dass wir die Schriftart ändern. Während auf dem Monitor serifenlose Schriften besser zu lesen sind, werden diese beim Druck nur für die Überschriften verwendet und beim normalen Fließtext greift man auf Schriften mit Serifen zurück. Für eine bessere Lesbarkeit empfiehlt es sich, die Schriftfarbe auf Schwarz zu setzen. Die Schriftgröße sollte man in pt angeben.

body {font-family:Georgia,Times,serif;font-size:11pt;color:black;}
h1,h2,h3 {font-family:Verdana,Helvetica,sans-serif;text-align:center;}
h1 {font-size:22pt;}
h2 {font-size:16pt;padding-top:6pt;}

Bei der Überschrift h2 habe ich hier noch ein padding-top eingebaut, um einen Abstand zum vorhergehenden Text zu erzeugen. Und mit „text-align:center“ werden die ersten 3 Überschriftsebenen automatisch zentriert.

Wer möchte, kann mit „background-color:#fff“ auch noch die Hintergrundfarbe auf weiß setzen. Bei modernen Browsern ist das aber eigentlich nicht notwendig, da bei diesen der Hintergrund standardmäßig nicht mitgedruckt wird.

Überflüssige Inhalte nicht ausdrucken

Wie ich bereits weiter oben angesprochen habe, gibt es bestimmte Inhalte einer Website, auf die man beim Druck verzichten kann. Dazu zählen z. B. das Logo, die Navigation, die Werbung, Formulare, Ziergrafiken und der Footer. Am einfachsten ist es, wenn man diesen Inhalten eine eigene Klasse zuweist (z. B. mit class=“noprint“) und sie dann für den Druck ausschließt:

.noprint {display:none;}

Bilder und Links zentrieren

Bei Fotos und Bildern ist es sinnvoll, diese zu zentrieren:

img{display:block;margin:0 auto;}

Links braucht man eigentlich nicht besonders zu kennzeichnen, da sie auf dem Papier ja keinen Nutzen haben. Deshalb ist es sinnvoll, sie als normalen Text darzustellen:

a{color:black;text-decoration:none;}

Wer möchte, kann aber auch hinter jedem Link die Linkadresse anzeigen lassen:

a[href]:after {content:" [Link: "attr(href)"] ";}

Diese Form der Ausgabe wird allerdings nicht vom Internet Explorer unterstützt. Außerdem erschwert sie bei vielen Links auf der Webseite das Lesen, weshalb ich persönlich diesen Code nicht verwende.

Die fertige print.css

Das war’s auch schon. Am Ende kann unsere print.css dann z. B. so aussehen:

body {font-family:Georgia,Times,serif;font-size:11pt;color:black;}
h1,h2,h3 {font-family:Verdana,Helvetica,sans-serif;text-align:center;}
h1 {font-size:22pt;}
h2 {font-size:16pt;padding-top:6pt;}
.noprint {display:none;}
img{display:block;margin:0 auto;}
a{color:black;text-decoration:none;}

Mit nur sieben Zeilen Code haben wir eine print.css erstellt, die eine saubere Druckversion unserer Webseite darstellt. Den Unterschied sieht man deutlich:

Ohne die Verwendung einer print.css werden für den Druck 2 Seiten benötigt, da die Navigation auf einem extra Blatt ausgedruckt wird und durch die Anzeige von weiteren überflüssigen Elementen wirkt der Ausdruck ziemlich unübersichtlich. Die zweite Variante, die auf eine angepasste print.css zurückgreift, konzentriert sich dagegen auf das Wichtige und zeigt die Website dadurch wesentlich übersichtlicher an.

Verwendet ihr eine print.css?

Wie sieht es bei euch aus? Stellt ihr euren Besuchern eine Druckversion zur Verfügung und falls ja, wie sieht diese aus? Wie immer würde ich mich freuen, wenn ihr in den Kommentaren etwas dazu schreibt.