RalphGL blogt

In die­sem Arti­kel möchte ich hel­fen, ein ordent­li­ches Print-Stylesheet zu bauen und richte mich an Anfän­ger und Fort­ge­schrit­tene in Sachen HTML & CSS. Nicht alle Tricks die man ver­wen­den kann wer­den hier gelis­tet, jedoch bestimmt wis­sens­wer­tes, was man nicht unbe­dingt beim W3C oder SELFHTML erfährt.

Du hast eine Web­seite ohne Print-Stylesheet und willst deine Seite für die Druck­aus­gabe opti­mie­ren. Gehen wir es an!

Der Weg zu einem Print-Stylesheet

media=„screen“ oder lie­ber überschreiben?

Die Zeile im Head-Bereich unse­res (X)HTML-Dokuments, in der das Style­s­heet auf­ge­ru­fen wird schaut für gewöhn­lich so aus:
<link type=„text/css“ href=„style.css“ rel=„style­s­heet“.
Das bedeu­tet, es wird eine CSS-Datei auf­ge­ru­fen, die für ALLE Medien ver­wen­det wird. Mit fol­gen­der Zeile rufen wir eine CSS-Datei auf, die sich nur auf das Medium „Print“ bezieht:
<link type=„text/css“ href=„print.css“ rel=„style­s­heet“ media=„print“>
Ach­tung: Haben wir diese 2 Zei­len in der sel­ben Rei­hen­folge wie oben in unse­rer (X)HTML-Datei ste­hen, wird erst style.css für alle Medien auf­ge­ru­fen, da das Attri­but „media“ nicht genutzt wird und stan­dart­mä­ßig auf „all“ gesetzt ist, dann wird print.css auf­ge­ru­fen, und über­schreibt für den Druck alle Style-Anweisungen, die vor­her schon in style.css auf­ge­ru­fen wur­den. Man könnte es auch anders machen: wäre die erste Zeile
<link type=„text/css“ href=„style.css“ rel=„style­s­heet“ media=„screen“>,
so würde style.css garkeine Style-Anweisungen für den Druck zu ver­ge­ben haben. Wir müss­ten also theo­re­tisch jeden ein­zel­nen Selek­tor, den wir auf dem Medium Druck anspre­chen möch­ten noch­mals sei­nen „Style“ geben.

Bevor wir mit unse­rer print.css anfan­gen soll­ten wir also gut über­le­gen, was hier für uns ein­fa­cher ist; gege­bene Styles über­schrei­ben oder alle neu anlegen.

@print — Anwei­sun­gen

Als aller­ers­tes, ganz oben in unsere Datei print.css müs­sen die Anwei­sun­gen für das Medium print erschei­nen. Bei mir sieht das so aus:
@page {
size: auto;
mar­gin: 0.5cm 0.5cm 1cm 1.5cm;
}

Diese Zei­len hel­fen dem Brow­ser, die Seite ein­zu­rich­ten und geben einen Rand zum Inhalt an — die­ses Bei­spiel zeigt einen Satz­spie­gel mit 0,5cm Kopf– und Außen­steg, 1cm Fuß­steg und 1,5cm Innensteg. Aber Ach­tung! Wir kön­nen keine Anga­ben über Außen– und Innensteg machen. Ich gehe bei dem Bei­spiel davon aus, das Außen­steg rechts und Innensteg links ist.

Display:none;

#navi {
display:none;
}

Diese Eigen­schaft lässt ein Ele­ment von der Aus­gabe ver­schwin­den. Im Gegen­satz zur Eigen­schaft „visi­bi­lity“ wird auch der Platz an dem das Ele­ment steht für andere Ele­mente frei­ge­macht. Auf diese Weise kön­nen Menu und andere Berei­che auf der Seite aus­ge­blen­det werden.

Brauch­bar trotz S/W-Drucker

Viele Gestal­ter set­zen bei typo­gra­fi­schen Aus­zeich­nun­gen im Inter­net auf Farbe — wie wir in die­sem Blog — bei­spiels­weise Hyper­links wer­den im knal­li­gen Orange oder Blau ange­zeigt. Doch viele Inter­net­sur­fer haben kei­nen Farb­dru­cker, far­bige Links wür­den somit Grau aus dem Dru­cker kom­men — die Links sind schlech­ter les­bar und Her­vor­he­bun­gen evtl. über­haupt nicht erkenn­bar. Daher soll­ten die Aus­zeich­nun­gen für den Druck ange­passt wer­den! Geeig­net sind die CSS-Eigenschaften font-weight, letter-spacing, font-variant, text-decoration oder auch bor­der und back­ground (z.B. grau). Auf SELFHTML wird gezeigt, wie man die Attri­bute der HTML-Elemente im Druck visua­li­sie­ren kann, bei­spiels­weise gibt es Stylesheet-Anweisungen, die das Ziel für einen Hyper­link nach sel­bi­gem anzei­gen lassen.

nur für den Druck!

Auf den Sei­ten agentur-lindner.com und taschenkalender.org haben wir Ele­mente unter­ge­bracht, die nur im Druck ange­zeigt wer­den. Dies errei­chen wir indem wir dem Ele­ment auf dem Medium „Screen“ die Eigen­schaft display:none; und auf dem Medium „Print“ display:inline oder block geben. Auf die­sem Weg kann man bei­spiels­weise am Rande dar­auf hin­wei­sen, dass die Seite gedruckte Seite für die Druck­aus­gabe opti­miert und nicht mit dem Screen­de­sign iden­tisch ist.

Posi­tio­nie­rung anders als sonst

Auf Sei­ten wie www.agentur-lindner.com wer­den beim Lay­out abso­lut posi­tio­nierte Ele­mente ein­ge­setzt. Sie „kle­ben“ an den Rän­dern des Brow­ser­fens­ters oder haben einen fes­ten Abstand zu den Rän­dern oben, unten rechts, oder links, egal wie man das Fens­ter ver­grö­ßert oder ver­klei­nert. Im Druck wird sowas jedoch ziem­lich witz­los: „position:absolute;“ bedeu­tet für den Druck, dass das Ele­ment auf jeder gedruck­ten Seite auf sei­ner Posi­tion ange­zeigt wird und kann somit auf der 2ten und fol­gen­den Sei­ten den Inhalt über­de­cken. Lay­outs, die von der abso­lu­ten Posi­tio­nie­rung leben müs­sen kom­plett über­dacht wer­den, möchte man ein abso­lut posi­tio­nier­tes Ele­ment auch auf dem bedruck­ten Blatt Papier zu sehen bekom­men.
Die­ses Ver­hal­ten der Brow­ser bei der Druck­aus­gabe bie­tet aller­dings auch neue Mög­lich­kei­ten: ein Was­ser­zei­chen auf jede gedruckte Seite zu set­zen oder ein Lay­ou­t­e­le­ment auf jeder gedruck­ten Seite am unte­ren Rand anzu­zei­gen. Wer krea­tiv ist, dem fal­len bestimmt noch wei­tere Mög­lich­kei­ten ein.