Ein ordentliches Stylesheet zum Drucken

Der Weg zu einem Print-Stylesheet

media=“screen“ oder lieber überschreiben?

Die Zeile im Head-Bereich unseres (X)HTML-Dokuments, in der das Stylesheet aufgerufen wird schaut für gewöhnlich so aus:
<link type=“text/css href=“style.css“ rel=“stylesheet.
Das bedeutet, es wird eine CSS-Datei aufgerufen, die für ALLE Medien verwendet wird. Mit folgender Zeile rufen wir eine CSS-Datei auf, die sich nur auf das Medium „Print“ bezieht:
<link type=“text/css href=“print.css rel=“stylesheet“ media=“print“>
Achtung: Haben wir diese 2 Zeilen in der selben Reihenfolge wie oben in unserer (X)HTML-Datei stehen, wird erst style.css für alle Medien aufgerufen, da das Attribut „media“ nicht genutzt wird und standardmäßig auf „all“ gesetzt ist, dann wird print.css aufgerufen, und überschreibt für den Druck alle Style-Anweisungen, die vorher schon in style.css aufgerufen wurden. Man könnte es auch anders machen: wäre die erste Zeile
<link type=“text/css href=“style.css rel=“stylesheet“ media=“screen“>,
so würde style.css garkeine Style-Anweisungen für den Druck zu vergeben haben. Wir müssten also theoretisch jeden einzelnen Selektor, den wir auf dem Medium Druck ansprechen möchten nochmals seinen „Style“ geben.

Bevor wir mit unserer print.css anfangen sollten wir also gut überlegen, was hier für uns einfacher ist; gegebene Styles überschreiben oder alle neu anlegen.

@print – Anweisungen

Als allererstes, ganz oben in unsere Datei print.css müssen die Anweisungen für das Medium print erscheinen. Bei mir sieht das so aus:
@page {
size: auto;
margin: 0.5cm 0.5cm 1cm 1.5cm;
}

Diese Zeilen helfen dem Browser, die Seite einzurichten und geben einen Rand zum Inhalt an – dieses Beispiel zeigt einen Satzspiegel mit 0,5cm Kopf- und Außensteg, 1cm Fußsteg und 1,5cm Innensteg. Aber Achtung! Wir können keine Angaben über Außen- und Innensteg machen. Ich gehe bei dem Beispiel davon aus, das Außensteg rechts und Innensteg links ist.

Display:none;

#navi {
display:none;
}

Diese Eigenschaft lässt ein Element von der Ausgabe verschwinden. Im Gegensatz zur Eigenschaft „visibility“ wird auch der Platz an dem das Element steht für andere Elemente freigemacht. Auf diese Weise können Menu und andere Bereiche auf der Seite ausgeblendet werden.

Brauchbar trotz S/W-Drucker

Viele Gestalter setzen bei typografischen Auszeichnungen im Internet auf Farbe. Doch nicht jeder druckt in Farbe, farbige Links würden somit grau gedruckt – die Links sind schlechter lesbar und Hervorhebungen evtl. überhaupt nicht erkennbar. Daher sollten die Auszeichnungen für den Druck angepasst werden! Geeignet sind die CSS-Eigenschaften font-weight, letter-spacing, font-variant, text-decoration oder auch border und background (z.B. grau). Auf SELFHTML wird gezeigt, wie man die Attribute der HTML-Elemente im Druck visualisieren kann, beispielsweise gibt es Stylesheet-Anweisungen, die das Ziel für einen Hyperlink nach selbigem anzeigen lassen.

nur für den Druck!

Auf den Seiten agentur-lindner.com und taschenkalender.org haben wir Elemente untergebracht, die nur im Druck angezeigt werden. Dies erreichen wir indem wir dem Element auf dem Medium „Screen“ die Eigenschaft display:none; und auf dem Medium „Print“ display:inline oder block geben. Auf diesem Weg kann man beispielsweise am Rande darauf hinweisen, dass die Seite gedruckte Seite für die Druckausgabe optimiert und nicht mit dem Screendesign identisch ist.

Positionierung anders als sonst

Auf Seiten wie www.agentur-lindner.com werden beim Layout absolut positionierte Elemente eingesetzt. Sie „kleben“ an den Rändern des Browserfensters oder haben einen festen Abstand zu den Rändern oben, unten rechts, oder links, egal wie man das Fenster vergrößert oder verkleinert. Im Druck wird sowas jedoch ziemlich witzlos: „position:absolute;“ bedeutet für den Druck, dass das Element auf jeder gedruckten Seite auf seiner Position angezeigt wird und kann somit auf der 2ten und folgenden Seiten den Inhalt überdecken. Layouts, die von der absoluten Positionierung leben müssen komplett überdacht werden, möchte man ein absolut positioniertes Element auch auf dem bedruckten Blatt Papier zu sehen bekommen.
Dieses Verhalten der Browser bei der Druckausgabe bietet allerdings auch neue Möglichkeiten: ein Wasserzeichen auf jede gedruckte Seite zu setzen oder ein Layoutelement auf jeder gedruckten Seite am unteren Rand anzuzeigen. Wer kreativ ist, dem fallen bestimmt noch weitere Möglichkeiten ein.

Schreibe einen Kommentar

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