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

Internet Professionell Weblog

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.