CSS für den Druck

0 | 31298 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "CSS für den Druck" mit Ihrem Wissen!

Anzeige Hier werben

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:

 
css
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:

 
css
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:

aus Wikipedia, der freien Enzyklopädie

oder auch ein Verweis auf die eigene Adresse

Artikel von webmasterpro.de

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

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

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

 
css
1
2
3
4
5
6
7
8
.printOnly {
    display: none; 
}
@media print {
    .printOnly {
        display: block;
    }
}

Unsichtbare Informationen visualisieren

Firefox2Unterstützt3Unterstützt3.5Unbekannt
IE6Nein7Nein8Unterstützt
Opera9.5Unterstützt10Unbekannt
Safari3Unterstützt4Unterstützt
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, 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:

 
css
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:

 
css
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:

Zeilen einrücken  
HTML
1
2
3
4
p+p {
    text-indent: 3em;
    margin-top: -1em;
} 

Hochformat / Querformat

Firefox2Nein3Nein3.5Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unterstützt10Unbekannt
Safari3Nein4Unbekannt
CSS-Eigenschaft size

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

Seite auf Querformat stellen  
css
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.

kein Seitenumbruch nach Überschriften  
css
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.

 
HTML
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:

 
HTML
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.

 
HTML
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.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 4 Personen an der Seite "CSS für den Druck" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "CSS für den Druck" hier bearbeiten.

Mitarbeiter