Webdesign, Tutorials und mehr - Webmasterpro.de

CSS für den Druck

Auf vielen Seiten findet man immer noch links auf spezielle "Druckversionen" einer Webseite. Dort werden meist die Hintergrundfarbe, Werbebanner und Menüs entfernt. Viel einfacher und für den Benutzer unkomplizierter erreicht man dies über spezielle Druck-Stylesheets. Also CSS-Dateien oder CSS-Regeln, die nur auf gedruckte Medien angewendet werden. Dazu muss der Browser Stylesheets für verschiedene Medientypen unterstützen (im speziellen "print"), was bei allen aktuellen Browsern der Fall ist.

Vorteile

Vorteile spezieller Druckversionen

• Übersichtlicherer Ausdruck
• Mehr Platz für den eigentlichen Inhalt
• Geringere Druckkosten

Vorteile der CSS-Lösung

• Geringerer Aufwand: Es müssen nicht für alle Seiten extra Druckversionen erstellt werden - ein CSS ist für die ganze Webseite benutzbar
• Lauffähig in allen aktuellen Browsern
• Der Besucher hat einen Schritt weniger beim Ausdrucken

Was kann ein Druck-Stylesheet?

Unnötige Seitenelemente verstecken

Dem Benutzer helfen auf einer ausgedruckten Seite Navigationen und vor allem Werbebanner sehr wenig. Aus Gründen der Druckkostenersparnis, der Übersichtlichkeit und des Platzbedarfs sollten die genannten Elemente nicht angezeigt werden.

Angenommen, die Menüs haben die CSS-Klassen menu und wir verpacken alle Werbung in die Klasse werbung. Dann können wir diese Blöcke durch folgende CSS-Regel ganz einfach verstecken:

1
2
3
4
5

@media print { 
    .menu, .werbung { 
        display: none; 
    }
}

Farben minimieren

Farbige Tinte kostet einiges mehr als schwarze. Deshalb ist es schlau Text, Überschriften und Rahmen im Druckstylsheet die Farbe schwarz zuzuweisen. Mit folgender Regel werden alle Links schwarz eingefärbt, dafür aber unterstrichen:

1
2
3
4
5
6

@media print {
    a { 
        color: #000;
        text-decoration: underline
    }
}

Quelle hervorheben

Es bietet sich an, auf dem Ausdruck noch einmal explizit auf die Quelle(n) eines Artikels hinzuweisen. Ein Beispiel ist hierfür der Text unterhalb der Überschrift auf dem Ausdruck einer Wikipedia-Seite:

oder auch ein Verweis auf die eigene Adresse

Wir fügen dazu in der Seite einen Block ein...

1

<div class="printOnly"> Artikel von webmasterpro.de </div>

.. und legen fest, dass er im Allgemeinen unsichtbar, im Druck aber sichtbar sein soll.

1
2
3
4
5
6
7
8

.printOnly {
    display: none; 
}
@media print {
    .printOnly {
        display: block;
    }
}

Unsichtbare Informationen visualisieren

Da die ausgedruckte Webseite kein interaktives Medium mehr ist, gehen viele Informationen verloren, wie z.B. Verlinkungen.

Diese können in modernen Browsern (Firefox, Opera, Safari, IE8) mit CSS aber visualisiert werden.

Links

Links, das zentrale Prinzip des "World Wide Web" (WWW), gehen beim Ausdrucken der Seite verloren, da sie dort ja nicht mehr anklickbar sind. Über "Generierte Inhalte" / "generated content" kann diese Information aber auch beim Ausdrucken gerettet werden:

Mit der folgenden Regel wird hinter jeden Link die Adresse, auf die er zeigt, in eckigen Klammern dargestellt:

1
2
3

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

Abkürzungen

Abkürzungen, die normalerweise nur sichtbar werden, wenn man mit der Maus über sie fährt, können mit folgendem CSS ausgeschrieben werden:

1
2
3

abbr[title]:after {
    content: ' (' attr(title) ')';
}

Hintergrundfaben / -bilder entfernen

Dies machen die Browser in der Regel automatisch.

Typografische Verschönerungen

Auf dem Papier gelten andere Rahmenbedingungen als auf dem Monitor. Deshalb kann es sich lohnen die Schriftartenwahl, Schriftgröße oder andere typografische Einstellungen noch einmal zu überdenken.

An Bildschirmen sind wegen der geringen Auflösung Texte in einer serifenlosen Schrift wie Verdana, Arial oder Helvetica einfacher zu lesen. Für gedruckte längere Texten sind jedoch Schriften mit Serifen meist besser geeignet, da sie die Linienführung des Auges in der Zeile unterstützen sollen.

Absätze werden im Internet meist durch Abstände voneinander getrennt. In Druckmedien wird hierfür die erste Zeile eingerückt:

1
2
3
4

p+p {
    text-indent: 3em;
    margin-top: -1em;
} 

Hochformat / Querformat

Ob eine Seite im Hoch- oder Querformat bedruckt werden soll, kann mit der Eigenschaft size eingestellt werden.

1

@page { size:landscape; }

Leider wird dies nur vom Opera-Browser unterstützt. Wegen mangelnder Browserunterstützung wurde die Eigenschaft auch wieder aus CSS 2.1 entfernt.

Seitenumbrüche

Seitenumbrüche können an bestimmten Stellen eingefügt oder verhindert werden.

Es ist zum Beispiel wünschenswert, dass nicht direkt nach einer Überschrift ein neue Seite anfängt. Damit die Überschrift dann mit auf die nächste Seite genommen wird kann man folgenden CSS Code benutzen.

1
2
3

h1, h2, h3, h4 {
    page-break-after:avoid;
}

page-break-after

Einbinden über separate CSS-Datei

Es bietet sich auch an, alle Regeln für den Druck in eine separate CSS-Datei zu packen. Dann kann man diese beim Einbinden mit media="print" versehen.

1

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

Der Vorteil ist hierbei, dass der Browser das Stylesheet nur lädt, wenn es wirklich gebraucht wird. Da die Druckregeln aber in der Regel sehr wenige sind, dürfte das nur einen geringen Geschwindigkeitsgewinn bringen.

Wer auf einen "Drucken"-Knopf nicht verzichten will...

... kann ja auf den Knopf einfach ein Javascript legen, dass den Drucken-Dialog des Browsers öffnet:

1

<a href="javascript:window.print()">Diese Seite drucken</a>

Und eventuell davor auch noch eine Nachricht einbauen, dass der Besucher sich über die Qualität des Ausdrucks keine sorgen machen muss.

1

<a href="javascript:alert('Lieber Besucher:\n Der Ausdruck wird automatisch so umformatiert, dass unnötige Teile weggelassen und Tinte gespart wird!');window.print()">Diese Seite drucken</a>

Druck-Stylesheets testen

Um die Änderungen an einem Druck-Stylesheet zu testen, muss die Seite nicht unbedingt ausgedruckt werden: Die meisten Browser besitzen eine Druckvorschau, in der man das Resultat auch auf dem Monitor betrachten kann.

Kommentare: CSS für den Druck

Neuen Kommentar schreiben

Seite auf Querformat stellen

Beantworten

Seite auf Querformat stellen

Leider wird dies nur vom Opera-Browser unterstützt. Wegen mangelnder Browserunterstützung wurde die Eigenschaft auch wieder aus CSS 2.1 entfernt.

Ich bin dafür, diesen Teil des Artikels zu entfernen, sollte wirklich nur Opera die Einstellung unterstützen und sollte die Eigenschaft wirklich aus CSS 2.1 entfernt worden sein. Eine kurze Recherche in der Sitepoint CSS-Referenz brachte keinen Eintrag zu Tage.

Ein "Spezialität" eines "Nischenbrowsers" - so gut er auch sein mag, Opera rockt -, die es nicht in die Specs geschafft hat, sollte meiner Meinung nach nicht in dem Artikel stehen und sendet ein falsches Zeichen an Lernende,

Thorsten Panknin am 21.10.2008 um 09:54

Re: Seite auf Querformat stellen

Beantworten

Ich habe nochmals die akutelle Unterstützung angeschaut: da hat sich nichts getan. Da die Eigenschaft in CSS3 aber wieder eingeführt werden soll, würde ich sie hier drin lassen. (Hier ist der FF bug der dran arbeitet)

Ich habe eine Kompatibilitätsliste daneben getan, auf der man dann auch gleich sieht, dass die Eigenschaft nur sehr eingeschränkt benutzt werden kann. Ist das so ok?

Thomas H am 21.10.2008 um 13:25

Re: Seite auf Querformat stellen

Beantworten

Danke für Deine Antwort, Thomas! Im Hinblick auf eine mögliche erneute Verwendung in CSS3 und dass die Eigenschaft vermutlich in Browser eingebaut wird, kann man das schon drinlassen, denke ich. Sollte man aber vielleicht im Text kurz erwähnen?

Thorsten Panknin am 21.10.2008 um 13:37

Zu "Unsichtbare Informationen visualisieren"

Beantworten

Wärs nicht geschickter solche Informationen über die content-Eigenschaft vom CSS einzubetten? Ist das nicht sogar semantisch besser? Beispielsweise über body:before { display: block; content: "Artikel von Webmasterpro.de"; font-size: 1.4em; border-bottom: 2px solid #000; }

Hoff das klappt bei <body>, grad nur eine Idee....also nicht ausprobiert oder so. Füg das aber gerne in den Artikel ein, wenns klappt. ;-)

David Danier am 25.04.2008 um 19:57

Re: Zu "Unsichtbare Informationen visualisieren"

Beantworten

Nein. Das wäre semantisch schlechter, da in ein Stylesheet kein Inhalt gehört. Würde da z.B. Probleme mit Internationalisierung machen. Style und Inhalt soll getrennt sein.

Außerdem können das dann viel weniger Browser (IE6/7 nicht).

Thomas H am 27.04.2008 um 14:38