Druck-Layout mit CSS
Druckerfreundliche Stylesheets
Stylesheet für den Druck
Druck-Layout mit CSS
Bildschirm und Papier sind zwei Medien mit unterschiedlichen Layout-Anforderungen. Deswegen sollten Sie Vorkehrungen treffen, dass Ihre Webseiten auch ausgedruckt gut aussehen und benutzbar sind. Hat man früher noch häufig eine Extraversion der HTML-Seite für den Ausdruck erstellt, die serverseitig generiert oder händisch erstellt wurde, ist das heute dank der verbesserten CSS-Unterstützung durch die Browser nicht mehr notwendig: Ein Stylesheet für den Druck erledigt die Aufgabe ganz nach Wunsch.
Einbindung
Um anzugeben, für welches Ausgabemedium das jeweilige Stylesheet gelten soll, ist seit CSS 2 das media-Attribut vorgesehen. Es kann unter anderem die Werte print (Ausdruck), screen (Bildschirm), projection (Vorführmodus), handheld (Handheld) oder all (alle Ausgabemedien) annehmen. Geben Sie nichts an, gelten die Stylesheet-Angaben für alle Ausgabemedien. Im link-Element zur Einbindung eines externen Stylesheets lautet die Syntax:
Übrigens brauchen Sie den Slash vor der spitzen schließenden Klammer nur, wenn Sie XHTML einsetzen, bei HTML sollten Sie ihn weglassen. Wenn Sie @import zum Einbinden externer Stylesheets benutzen, geben Sie das Ausgabemedium am Schluss direkt an:
@import 'druck.css' print;
Auch bei im HTML-Kopf eingebetteten Stylesheets können Sie festlegen, dass sie für den Druck gelten sollen:
Wenn Sie nicht ein eigenes Stylesheet für den Ausdruck erstellen möchten, sondern einzelne spezielle Formatierungen für den Druck innerhalb eines allgemeinen Stylesheets machen wollen, steht Ihnen die vierte Möglichkeit offen – eine @-Regel innerhalb eines Stylesheets:
@media print {
/* CSS-Angaben für den Ausdruck */
Von den vier verschiedenen Möglichkeiten unterstützen die Browser am besten das media-Attribut im link-Element. Damit können alle modernen Browser umgehen, allein der uralte Netscape 4.x ignoriert hier andere Angaben als media=”screen”.
Vorsicht hingegen bei @import-Anweisungen mit Angabe des Ausgabemediums: Diese werden von allen Internet-Explorer-Versionen ignoriert, selbst der neue Internet Explorer 7 streicht hier die Segel. Dass alte Browser wie Netscape 4.x andere Angaben als media=”screen” im link-Element ignorieren, ist natürlich nicht unbedingt ein Nachteil, sondern kann gezielt eingesetzt werden, um Stylesheet-Angaben vor diesen Internet-Dinosauriern zu verbergen. Wer mit so einem alten Browser surft, erhält immerhin eine benutzbare, aber ungestylte Webseite.
Aufteilung
Sie können auch eine Liste von Ausgabemedien angeben, die durch Kommas getrennt werden. Wenn Sie ein eigenes Stylesheet für den Ausdruck erstellen, werden Sie meist auch gesonderte Angaben für den Bildschirm machen. Hier sollten Sie nicht nur media=”screen” angeben, sondern media=”screen, projection” schreiben, und zwar Opera zuliebe: Der norwegische Browser Opera hat einen Vollbild- oder Vorführmodus, den Sie in Opera über das Menü Ansicht oder die Taste [F11] ein- und ausschalten. Wenn Sie media=”screen, projection” schreiben, ist sichergestellt, dass Opera kleiner als Version 9 auch in diesem Vollbildmodus die Angaben im screen-Stylesheet verwendet. Und die anderen Browser stören sich nicht daran. Bei der Aufteilung der einzelnen Formatierungen auf die Stylesheets für den Bildschirm und für den Ausdruck gibt es prinzipiell zwei Herangehensweisen. Sie können ein allgemeines Stylesheet erstellen, das Angaben für alle Ausgabemedien enthält, und dieses, wo notwendig, durch speziellere Stylesheets überschreiben:
Bei dieser Methode müssen Sie aufpassen, dass Sie wirklich alle Angaben der allgemeinen CSS-Datei auch im Druck-Stylesheet überschreiben.
Alternativ dazu können Sie für jedes Ausgabemedium ein eigenes Stylesheet erstellen, das Sie sozusagen von Null beginnen müssen:
Bildschirm vs. Papier
Druck-Layout mit CSS
Bildschirm und Papier könnten kaum unterschiedlicher sein: Ein dunkles Hintergrundbild mit heller Schrift zum Beispiel kann am Bildschirm angenehm zu lesen sein, für den Ausdruck passt es nicht. So gibt es einige allgemeine Regeln für geeignete Formatierungen in Druck-Stylesheets.
Am Bildschirm liest man im Allgemeinen lieber Text in serifenlosen Schriften wie Verdana oder Arial, ausgedruckt sind aber auch Schriften mit Serifen wie Georgia oder Times gebräuchlich. Bei der Wahl einer geeigneten Einheit für die Schriftgröße gibt es ebenfalls Unterschiede: Für den Bildschirm sind feste Schrifteinheiten wie Punkt als nicht mediengerecht verpönt. Anders sieht es beim Druck-Stylesheet aus: Hier können Sie auch die Schriftgröße in Punkt angeben (font-size: 12pt).
Wie schon erwähnt sind farbige Hintergründe im Web keine Seltenheit, würden jedoch bei einer gedruckten Version nur stören: Ausgedruckt liest es sich am besten Schwarz auf Weiß. Zwar ignorieren die meisten Browser beim Ausdruck automatisch Hintergründe und Hintergrundfarben, trotzdem sollten Sie weiße Hintergrundfarbe und schwarze Textfarbe in Ihrem Druck-Stylesheet selbst angeben. Apropos Farben: Wichtige Informationen, die nur über Farben vermittelt werden, sollten im Druck-Stylesheet auch anders hervorgehoben werden. Wenn ein Textteil nur durch Farbe betont wird, sollten Sie diese Hervorhebung beim Ausdruck durch Schriftgröße, dickere Schrift, Kursivstellung, Kapitälchen oder Ähnliches vornehmen, damit die Hervorhebung auch beim Schwarz-Weiß-Ausdruck sichtbar ist. Die Änderungen im Druck-Stylesheet gehen aber noch weiter. Auf Webseiten gibt es Bedienelemente, die ausgedruckt keine Funktion mehr haben, wie Suchfelder für die Site-interne Suche oder auch Navigationsleisten: Diese können Sie im Druck-Stylesheet einfach per CSS ausblenden.
Haben Sie in Ihrem HTML-Dokument ein Element für die Suche
so können Sie durch folgenden CSS-Code im Druck-Stylesheet verhindern, dass es ausgedruckt wird:
#suche { display: none; }
Das Ausblenden von einzelnen Elementen beim Druck-Stylesheet spart Platz, und das ist von Vorteil: Ausgedruckt wird üblicherweise im Hochformat, während der Bildschirm eher dem Querformat entspricht. Das heißt, ein Dreispalter passt problemlos auf den Bildschirm, auf dem Papier im Hochformat wird?s dagegen eventuell knapp.
URLs von Links ausgeben lassen
Navigationsleisten und Suchfelder sind Beispiele für Informationen, die ausgedruckt nur stören würden. Umgekehrt sollten manche Informationen beim Ausdruck explizit hinzugefügt werden, die in dieser Form am Bildschirm nicht benötigt werden.
So empfiehlt es sich beispielsweise, bei Links den dazugehörigen URL einzufügen. Verwenden Sie in Ihrer HTML-Datei folgenden Link
dann liest man im Ausdruck nur »Internet Professionell Weblog«, erfährt den dazugehörigem URL aber nicht. Diesen können Sie jedoch automatisch per CSS einfügen lassen.
Dazu dient das Pseudoelement :after. Mit :after legen Sie fest, dass hinter einem Element ein weiterer Inhalt eingefügt werden soll. Was eingefügt wird, bestimmt die Eigenschaft content, der Sie für das Beispiel als Wert attr() geben. attr() ermöglicht den Zugriff auf den Inhalt eines Attributs: In die runden Klammern schreiben Sie den Namen des Attributs, das Sie ausgeben lassen möchten.
Soll nun hinter den Links der URL angegeben werden, notieren Sie in Ihrem Druck-Stylesheet:
a[href]:after {
content: attr(href);
}
Damit bestimmen Sie, dass hinter allen a-Elementen mit dem Attribut href der Inhalt des Attributs href eingefügt werden soll. Derzeit würde der URL noch direkt am Link-Text kleben. Das ließe sich beispielsweise so ändern:
a[href]:after {
content: " [" attr(href) "] ";
color: #999;
font-size: 90%;
}
Hier bewirken die Leerzeichen in den Anführungszeichen, dass der URL in Klammern ebenfalls mit Leerzeichen dargestellt wird. Außerdem erhält der URL eine graue Textfarbe und eine verkleinerte Schrift. Leider unterstützt der Internet Explorer so generierte Inhalte noch nicht. Benutzer dieses Browsers müssen sich mit der Standardversion begnügen. Surfer mit Browsern wie Firefox, Opera oder Safari kommen in den Genuss des attraktiven Features. Apropos Browserunterschiede: Bei Gecko-Browsern wie Firefox schlägt bei Druck-Stylesheets gelegentlich ein Bug zu, der im Zusammenhang mit der Verwendung der CSS-Eigenschaft float auftritt. Er bewirkt, dass bei mehrseitigen Webseiten nur die erste Seite ausgedruckt wird. Abhilfe schaffen Sie, indem Sie im Druck-Stylesheet per float: none das Floaten aller Elemente abschalten.
Browser-Einstellungen
Druck-Layout mit CSS
Auch wenn Sie hierzulande davon ausgehen können, dass Webseiten auf A4-Papier ausgedruckt werden, haben Sie trotzdem bei Druck-Stylesheets keine volle Kontrolle über die Ausgabe. Alle Browser haben Default-Einstellungen für den Ausdruck: Das betrifft die Ränder, das Papierformat (quer, hoch) und den Ausdruck von Hintergrundbildern und Farben. Außerdem ergänzen Browser Kopf- und Fußzeilen mit dem URL der Webseite, dem aktuellem Datum, der Seitenzahl et cetera. Diese Einstellungen kann der Benutzer jederzeit anpassen. Für die Gestaltung von Druck-Stylesheets bedeutet das, dass Sie die Ränder auf 0 setzen können, weil die Standardeinstellungen im Browser für einen Rand sorgen. Den durch den Browser für den Ausdruck festgelegten Rand können Sie über CSS nicht kleiner machen.
Tipps für die Erstellung
Wenn Sie ein Druck-Stylesheet erstellen, müssen Sie nicht jeden Schritt durch Ausdrucken austesten, sondern können während der Arbeit am Druck-Stylesheet den Medientyp in media=”screen” ändern: Dann sehen Sie die einzelnen Schritte im Browser als Vorschau. Praktisch ist hier die Webdeveloper-Toolbar, eine Erweiterung für Firefox. Sie bietet über den Menüpunkt CSS, CSS nach Medientypen darstellen, Druck die Option, die Ausgabe des Druck-Stylesheets am Bildschirm anzuzeigen. Damit können Sie sich auch Druck-Stylesheets anderer Webseiten ansehen und sich Ideen holen.
Wollen Sie prüfen, wie die Seite im Ausdruck mit den vom Browser eingefügten Kopf- und Fußzeilen aussieht, wählen Sie die Druckvorschau. Sie finden sie im Internet Explorer 6 und im Firefox unter Datei, Druckvorschau. Im Internet Explorer 7 ist sie beim Druckersymbol untergebracht.
Mehr CSS-Optionen
Eigentlich wäre es praktisch, wenn man bei unterschiedlichen Stylesheets nicht nur grob nach dem allgemeinen Medientyp wie Ausdruck und Bildschirm unterscheiden könnte, sondern Feineinstellungen je nach der Art des Ausgabemediums vornehmen könnte: beispielsweise ein eigenes Stylesheet für den Farbdruck, ein anderes für den Schwarz-Weiß-Druck. Genau das erlauben die in CSS 3 vorgesehenen Media Queries. Und so erstellen Sie Stylesheets je nach Drucker:
Derzeit werden Media Queries nur von Opera unterstützt. Opera bietet auch als einziger Browser eine weitgehende Unterstützung der in CSS 2.1 vorgesehenen speziellen Eigenschaften für den Ausdruck, wie @page für das Seiten-Layout oder size für Quer- oder Hochformat. Für alles weitere bleibt ein sehnsüchtiger Blick in die Zukunft: Wann werden wohl all diese schönen erweiterten Eigenschaften von CSS 2.1 und CSS 3.0 auch in der Browser-Realität ankommen?