print.css erstellen

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:

Ausdruck einer Website ohne eine print.css
Ausdruck einer Website ohne eine print.css
Ausdruck einer Website mit einer print.css
Ausdruck einer Website mit einer print.css

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.

Veröffentlicht von

Cujo

Die Webmaster-Zentrale wurde im Januar 2010 von mir gegründet. Dabei haben mich 3 Internetauftritte maßgeblich beeinflusst. Zum einen die Website des t3n-Magazins, www.t3n.de, auf der immer sehr interessante Artikel zum Thema Webseitenerstellung gepostet wurden. Genau solche Artikel wollte ich auch schreiben. Dann bin ich schon seit mehreren Jahren im Homepage-Forum, www.homepage-forum.de, aktiv. Im Laufe der Zeit stellte ich fest, dass dort immer die gleichen Fragen gestellt wurden. Jedesmal darauf die gleichen Antworten zu geben, war erstens langweilig, zweitens zeitraubend und drittens hat es sich nicht gelohnt, die Fragen ausführlich zu beantworten. In der Webmaster-Zentrale greife ich jetzt oft Fragen auf, die im Homepage-Forum gestellt wurden und habe die Möglichkeit die angesprochenen Themen viel detaillierter zu behandeln. Bei wiederkehrenden Fragen poste ich dann einen Link zu einem Artikel in der Webmaster-Zentrale. Dadurch erhalten die User ausführlichere Antworten als normalerweise in einem Forum üblich. Die Idee, Informationen bereitzustellen und diese im Forum zu verlinken, habe ich von Daniel, www.homepage-faqs.de, übernommen. Daniel bezeichnet sich selbst als Forenhelfer und ist sehr aktiv im Homepage-Forum. Er hat schon zahllosen Usern mit seinen Informationen geholfen und ihnen die Grundlagen der Webseitenerstellung erklärt. Diese 3 Webauftritte hatten einen so großen Einfluss auf mich, dass ich sicher behaupten kann, dass es ohne sie die Webmaster-Zentrale nicht geben würde.

9 thoughts on “Print.css für Webseiten erstellen”

  1. Bis dato verwende ich noch keine print.css für meine Blogs. Die Frage ist auch, wie oft so eine Blogseite eigentlich ausgedruckt wird. Was meinst Du?

  2. @Tanja Es ging mir bei diesem Artikel weniger um Blogs, sondern um statische Webseiten. Hier im Blog gibt es auch noch keine print.css. Mache ich vielleicht auch noch. Da muss ich mich aber auch erst ein bisschen einlesen, welche Klassen ich verwenden kann usw.

    Wie oft meine Seiten ausgedruckt werden, kann ich natürlich nicht sagen. Ich bin auf das Thema gekommen, weil ich vor ein paar Tagen gefragt wurde, ob meine Logicals für einen Elternabend ausgedruckt werden dürfen.

    @Patrick Versuche es ruhig. Viel falsch machen kann man eigentlich nicht und es ist auch kein großer Zeitaufwand eine print.css zu erstellen.

  3. Uninteressant ist das Thema auf keinen Fall und ich habe auch mal ein dickes Plugin dafür gesehen. Eigentlich ja keine schwere Sache für die man ein Plugin benötigen würde… außer es sind viel zu viele Klassen da…

  4. Eine Datei nur für media screen ist doppelt problematisch. Zum einen bekommt Opera im Vollbildmodus AFAIK so gar kein CSS (da projection) und zum anderen ist es sehr müßig, alles doppelt anzugeben.

    Sinnvoller finde ich das generelle CSS ohne media-Angabe und lediglich die (meist wenigen) Änderungen für den Druck in eine Datei für den Ausdruck oder auch einfach nur @media print im normalen CSS anzugeben.

    Ich bin auch kein Freund überflüssiger Klassen. So verwende ich noprint nur im Einzelfall und selektiere i.d.R. lieber die vorhandenen IDs oder Klassen. Für diesen Blog z.B. wäre dies:

    @media print {
    #top_rss, #twitter, #menu, #board,
    .banner_left, .tt, .banner, .aehnlich, .navigation,
    #respond, .posts-footer1, .posts-footer2,
    #body_right, #footer, #seoFooterTitle
    {
    display:none;
    }
    }

    Übrigens eignet sich em auch gut für den Ausdruck…

    Gruß
    Ingo

  5. Hallo, bisher verwende ich sowas noch nicht. Macht meiner Meinung nach auch nur Sinn, wenn Informationen aus dem Besucherprozess heraus in der offline Kommunikation benötigt werden.

    Ein Beispiel wo ich diese Druckanpassung besonders mag sind mobile.de usw. Denn hier wird fast immer per Telefon kommuniziert und wenn man dann zum Händler fährt nimmt man den Ausdruck mit um keine Details zu verpassen.

    In typischen Blogs halte ich das eher weniger nötig, wenngleich sich der doch recht geringe Aufwand auch hier lohnen würde. Doch kann hier meistens auch der Artikel einfach einmal komplett kopiert werden. Da spart sich der normalo Besucher die Mühe um herauszufinden ob überhaupt einen print.css genutzt wird.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.