Zum Textbeginn springen Zur Navigation springen

CSS 2.1 ::Tutorials

Druck-Layouts mit CSS

Einführung

In der Anfangszeit des Internets waren Webseiten relativ einfach aufgebaut: sie bestanden meistens aus einem schlicht formatierten Text und einer Liste mit einigen einfachen Navigationslinks, der sich problemlos drucken ließ. Mit steigender Popularität des Netzes nahm auch die Anzahl der Onlineanzeigen zu, die beim Druck auf dem Papier ebenfalls ihren Platz beanspruchten. Das Ergebnis waren oft Ausdrucke mit einer schmalen Spalte Text, die über viele Seiten lief, und viel leerer Raum rechts und links. Webautoren suchten deshalb nach Wegen, Anzeigen und Banner nicht mitzudrucken.

In dem Zusammenhang stellte sich auch die Frage nach dem Sinn von Druckversionen für Webseiten. Sind sie nicht ein Schritt weg vom angestrebten 'papierlosen Büro' hin zu mehr 'losem Papier'? Schon, aber das papierlose Büro wird es bis auf weiteres nicht geben. Das liegt allein an dem Nutzen und der Flexibilität der Papierausdrucke.

Sicherlich werden die meisten Webseiten nicht in der Absicht ausgedruckt, sie als Teil eines Gesamtwerks schön säuberlich abzuheften. In den meisten Fällen erstellt der User die Hardcopy, um den Inhalt später in Ruhe zu lesen oder als Unterlage für Besprechungen, usw. In jedem Fall macht es einen positiven Eindruck, wenn von einer Webseite eine leicht lesbare Druckversion zur Verfügung steht.

Bevor die konsequente Trennung von Gestaltung und Inhalt zum Allgemeingut wurde, war das jedoch ein schwieriges Unterfangen. Webentwickler erstellten oft spezielle Druckversionen der Seiten, die beim Klick auf einen Button 'Druckausgabe' durch serverseitige Anwendungen oder eine Scriptsprache präsentiert wurden.

Dank CSS haben wir heute die Möglichkeit, die Informationen für Struktur und Präsentation einer Webseite zur Ausgabe in verschiedenen Medien klar voneinander zu trennen. Damit können wir nicht nur die Druckversion unserer Seite völlig anders als die Bildschirmversion gestalten und sie an die speziellen Anforderungen des gedruckten Mediums anpassen. Viel wichtiger ist der Vorteil, dass der Browser aufgrund des medienspezifischen Stylesheets beim Druck direkt auf die Druckversion umschaltet, ohne dass vorher eine druckoptimierte Version zur Bildschirmausgabe abgerufen werden muss.

Vorbereitung

Druckversion ist nicht gleich Druckversion

Bevor wir anfangen, müssen wir uns darüber klar werden, wie die Druckausgabe unserer Seiten aussehen soll. Oft wird oben auf der ersten Seite noch ein Firmenlogo erscheinen müssen und gelegentlich verlangt ein Anzeigenkunde, dass seine Anzeige auch in der Druckversion erscheint. Das lässt sich aber alles problemlos berücksichtigen.

Medienspezifische Stylesheets, Printmedien

Als ersten Schritt legen wir ein spezielles Stylesheet an, in dem später alle Regeln für die Druckausgabe notiert werden. Bei der Einbindung in das HTML- Dokument müssen wir das Medium print spezifizieren. Hierfür verwendet man meistens eine von zwei Möglichkeiten.

Die Angabe des Medientyps in Stylesheet-Bereich einer Datei:

Oder das Attribut media im Element LINK:

Unser vorhandenes Stylesheet, das bisher für alle Medien galt, schränken wir durch das Attribut media="screen" für die Ausgabe am Bildschirm ein.

Kleinere Stylesheets kann man gemeinsam in einer Datei lagern und durch die @media-Regel voneinander trennen:

@media screen { selektor { deklaration } } @media print { selektor { deklaration } }

Druckspezifische Eigenschaften

Die Inhalte einer Webseite werden am Bildschirm fortlaufend dargestellt. Durch die Scrollfunktion ist es möglich, dass sie theoretisch unbegrenzt lang ein können. Beim Ausdruck werden diese Inhalte in eine Anzahl Vierecke (=Seiten) mit festgelegter Größe aufgeteilt.

Für Druckausgaben lassen sich alle Eigenschaften nutzen, die auch für fortlaufende Medien gelten. CSS definiert darüber hinaus Eigenschaften für Seitenumbruch, Seitengröße und -formatierung, Seitenzahlen usw. Leider ist Opera 8+ der einzige Browser, der diese Eigenschaften heute in einem nutzbaren Umfang praktisch verwirklicht hat. Deshalb bleibt es einer zukünftigen Ergänzung vorbehalten, darauf näher einzugehen. Der Artikel CSS-Regeln für Seitenumbrüche erläutert zumindest die Theorie der page-break-Regeln.

Die Eigenschaft `display`

Eine der wichtigsten Eigenschaften, wenn Webseiten in unterschiedlichen Medien ausgegeben werden sollen, ist die Eigenschaft display. Durch die Deklaration display:none lassen sich für jedes Medium alle Teile der Seite ausblenden, die nicht ausgegeben werden sollen. Der Wert none hat immer höchste Piorität und andere Werte spielen in diesem Fall keine Rolle.

Einteilung der Seite in ID-Bereiche

Hier gehen wir davon aus, dass das Stylesheet für die Bildschirmausgabe bereits fertig erstellt ist. Unser Layout kann auf fixen Positionierungen oder auf den Eigenschaften float und clear basieren. Oder auf einer Mischung aus beiden.

Aus vielen Gründen hat es sich als gute Praxis erwiesen, ein Webdokument zu strukturieren, d. h. in verschiedene Bereiche aufzuteilen, z. B. Kopfteil (evtl. mit Firmenlogo oder Anzeigenbanner), Fußteil, Navigation, Copyright, Haupt- oder Textteil usw. Jedes Segment wird dabei konsequent in eine eigene Box (div) mit eigenem Identifizierer eingefasst. Diese Segmente können verschachtelt sein, dürfen sich aber nicht überschneiden.

Sobald wir die Aufteilung in einzelne Container vorgenommen haben, können wir unterscheiden, welche der Container in welchem Medium ausgegeben werden:

Das Segment, das den Hauptinhalt der Seite enthält, soll auf jeden Fall im Druck wie am Bildschirm vollständig ausgegeben werden. Oft verlangen Kunden, dass ein Logo oder Anzeigenbanner auch in der Druckausgabe erscheinen soll. In diesem Fall würden sie analog zur Bildschirmausgabe gedruckt werden.
Welche Abschnitte sollen am Bildschirm und im Druck erscheinen, aber mit unterschiedlichem Inhalt? Dies sind Teile, deren Inhalte sich im Druck von den Inhalten der Bildschirmausgabe unterscheiden, z. B. spezielle Kopfzeilen oder Fußteile für die Druckausgabe. Da CSS keine Inhalte verändern kann, müssen wir diese unterschiedlichen Inhalte in zwei verschiedenen Containern mit unterschiedlichen IDs unterbringen.
Welche am Bildschirm sichtbaren Teile sind im Druck irrelevant, sollen also nicht gedruckt werden? Hier handelt es sich um Dinge wie Navigation, Anzeigenbanner etc.
Gibt es Segmente auf der Seite, die nur zum Teil im Druck ausgegeben werden sollen? In dem Fall unterteilen wir einfach den entsprechenden Container weiter in kleinere Container, von denen einer nur am Bildschirm, ein anderer in beiden Medien ausgegeben wird. Enthält der Header z. B. einen Menübalken und ein Firmenlogo, fassen wir beide in getrennte Container ein. Der Container mit dem Menübalken wird dann nur am Bildschirm ausgegeben, der andere am Schirm und im Druck.

Erstellen des Druck-Stylesheets

Bei der Erstellung des Print-Stylesheets kann man grundsätzlich zwei Arbeitsschritte unterscheiden. Der erste Schritt ist die Umstellung des Bildschirmlayouts, bei der man die im Druck unerwünschten Teile ausblendet. Im Schritt zwei nimmt man die Anpassung der Textformatierung, Farben, Abstände usw. vor. Zum besseren Verständnis sind beide Schritte hier strikt getrennt dargestellt. Wer mehr Erfahrung hat, wird beide Schritte mehr oder weniger in einem Arbeitsgang zusammenfassen.

Anpassung des Layouts

Als praktisches Beispiel für die Druckformatierung bietet sich eine etwas vereinfachte Seite dieser Website, The StyleWorks.de, an. Dem Stylesheet im Ausgangsbeispiel ist der Medientyp all zugeordnet, dadurch erscheint als Druckvorschau ein verzerrtes Abbild der Bildschirmdarstellung. (Darstellung von Hintergründen sollte im Browser eingeschaltet sein.) Das reflektiert in etwa die Druckausgaben von Internetseiten um 1998 oder die Ausgabe am Bildschirm mit alten Browsern wie NN 4.

Das im Beispiel gezeigte Stylesheet ist noch recht lang, da alle für den Bildschirm notierten Regeln ebenso für die Druckausgabe verwendet werden. Deshalb legen wir als ersten Schritt jetzt fest, dass unser Bildschirmdesign nur noch für die Bildschirmausgabe verwendet wird:

Das Beispiel 2 sieht am Bildschirm genauso aus wie Beispiel 1. Der Unterschied macht sich erst beim Druck bzw. in der Druckvorschau bemerkbar. Dort sieht man jetzt, wie der Browser das Dokument ganz ohne Formatierung von außen darstellt. Er verwendet nur sein eigenes, browser-internes Stylesheet (siehe auch Stufe 2 der Kaskade).

Im Normalfall würden wir jetzt das Stylesheet für den Druck einbinden:

Für die Beispielseiten wurden hier jedoch interne Stylesheets verwendet, um die Anzahl der verwendeten CSS-Dateien überschaubar zu halten.

Wir beginnen mit der Umstellung, indem wir zuerst Schritt für Schritt die ID-Bereiche im Druck ausblenden:

Beispiel 03: Druck ohne Kopfteil und Primärnavigation,

Beispiel 04: ohne Seitennavigation,

Beispiel 05: Fußteil mit Textnavigation unten ausgeblendet,

Beispiel 06: die Grundeinstellungen für body und #main-text wurden eingefügt.

In allen vorangegangenen Beispielen ist die Druckversion des Fußteils, #printbottom, bereits im Quellcode der Seite vorhanden. Er wurde aber bisher durch Deklaration von display:none unterdrückt. Im Beispiel 07 ist diese Deklaration entfernt, sodass auch der letzte Teil des Ausdrucks sichtbar wird.

Auf diese Weise kann man mit allen Elementen der Seite verfahren: jedes beliebige Element lässt sich mit Hilfe der Eigenschaft display einzeln ausblenden, z.B. Werbebanner im Text, Anzeigen im Seitenpaneel, usw.

Tipps:

An dieser Stelle sind zwei generelle Tipps angebracht: Wenn es nicht unbedingt notwendig ist, sollte man absolut positionierte Elemente in der Druckausgabe vermeiden. Die Vorgabe, dass absolute Positionierung die Elemente aus dem normalen Fluss herauslöst, gilt auch hier und schnell ist ein Teil des Textes von einem Banner oder einer Grafik verdeckt. Am einfachsten ist es, wenn man solche Elemente im Text per float nach rechts oder links verschiebt.

Wenn man die Werte für padding, Rahmenstärke und margin aller div-Container zunächst auf '0' setzt, hat man mehr Platz und vermeidet unnötige Zwischenräume. Die Breite des äußeren Randes einer Seite kann der Nutzer im Browser selbst festlegen und über den endgültigen Abstand zwischen den Containern auf dem Papier kann man später noch entscheiden.

Firmenlogo

Wie gehen wir nun aber vor, wenn oben auf der Seite noch ein Logo dargestellt ist, das auf der Druckseite ebenfalls erscheinen soll? Um das einmal zu zeigen, wurde unser Webdokument fiktional um ein 'Firmenlogo' erweitert. Es gibt mehrere Möglichkeiten, ein Logo innerhalb der Seite zu codieren. In unserem Fall haben wir den Kopfteil in zwei kleinere Container aufgeteilt, von denen einer das Logo enthält und einer die Navigation. Der Kopfteil darf dabei nicht mehr als Ganzes beim Druck unterdrückt werden, sondern wird ohne Rahmen und Hintergrund dargestellt. Hier ist das Beispiel: Beispiel 08a

Anzeigenspalte

Auch Anzeigen, die auf dem Bildschirm neben dem Haupttext erscheinen, können mit ausgedruckt werden. Solche Anzeigen haben in der Regel den Nebeneffekt, dass der Platz unter ihnen leer bleibt. Dies ist am Bildschirm nicht unbedingt ein Nachteil, denn kürzere Zeilen im Fließtext bedeuten dort meistens bessere Lesbarkeit. Auf dem Papier bedeutet dies aber einen unnötig verbreiterten weißen Rand, der sich über alle Seiten hinzieht.

Wir vermeiden das, indem wir die Anzeige im Druck einfach mit float formatieren. Dadurch kann der Fließtext unterhalb der Anzeige wieder die ganze druckbare Breite des Papiers annehmen.

Im Beispiel 08b ist rechts eine kleine 'Anzeigenspalte' eingefügt. Der Raum darunter ist auf dem Bildschirm frei. Für die Papierausgabe erhält diese Box eine ganz neue Formatierung. An die Stelle der absoluten Positionierung tritt nun die Floatierung und auch Außen- und Innenabstände werden auf ein für den Ausdruck passendes Maß zurechtgetrimmt.

Da das Betreiberlogo oben ebenfalls floatiert ist, beeinflussen sich beide floatierten Boxen und können beim Druck in ungewollten Situationen zueinander stehen. Wir vermeiden das durch eine unsichtbare Linie unterhalb des Logos. Sie besteht aus einem einfachen dimensionslosen div-Container, der nach beiden Seiten mit clear freigestellt ist.

Textformate, Farben, Abstände usw.

Nachdem wir nun das Hin- und Herschieben der Container beendet und uns entschieden haben, welche Segmente unseres Webdokuments an welcher Stelle der Druckseite ausgegeben werden sollen, haben wir unser Druck-Stylesheet ganz für die Druckausgabe eingestellt.

Ganz?

Nicht ganz!

Ein paar unbeugsame Kleinigkeiten hören nicht auf, wie am Bildschirm auszusehen: wir müssen natürlich auch den Inhalt der Container angemessen formatieren.

Schriftarten:

Am Bildschirm sind Grotesqueschriftarten (ohne Serifen) im Fließtext einfacher zu lesen, auf dem Papier kann das Auge den Antiquaschriftarten (mit Serifen) besser folgen. Deshalb sollten die Angaben zur Fontfamilie für den Druck geändert werden.
Im Beispiel 09 wurden zusätzlich die Schriftarten der Überschriften geändert.

Längeneinheiten, Rahmen und Abstände:

Die zur Bildschirmdarstellung verwendeten Einheiten Em und Pixel sind relative Längenwerte, die nicht zur Verwendung für einen Papierausdruck geeignet sind. Besser sind absolute Werte. Für gedruckten Text sind Points oder Picas am besten geeignet, alle Abstände sollten auf metrischer Basis angegeben werden. Mehr dazu finden Sie im Artikel Längenwerte.

Als Faustregel für die Umrechnung gilt: für gedruckten Text wird meistens eine Schriftgröße von etwa 12 Points bzw. 1 Pica verwendet. Damit ist eine Zeile Text 1/6 Inch oder etwa 4,2 mm hoch. Dieser Wert ist für eine grobe Umrechnung von relativen in absolute Einheiten ausreichend, die Proportionen der Rahmen und Abstände sollten jedoch anhand von Probeausdrucken nachjustiert werden.
Beispiel 10 zeigt das Druck-Stylesheet mit absoluten Längenwerten.

Farben und Hintergründe:

Bedingt durch die unterschiedliche Auflösung werden Grafiken durch den Drucker oft in anderer relativer Größe als am Bildschirm ausgegeben, d. h. im Verhältnis zu Breite und Höhe der Absätze erscheinen sie oft zu groß oder zu klein. Auch erscheinen Farben auf dem Papier weniger kräftig als am (selbst leuchtenden) Bildschirm.

Die meisten modernen Systeme erlauben, den Druck von Hintergründen abzuschalten. Wir müssen also darauf achten, dass unsere Druckversion mit und ohne Hintergründe akzeptabel aussieht. Deshalb sollten wir einerseits auf farbintensive Hintergrundfarben und -Grafiken verzichten. Das spart dem Nutzer Zeit und Druckertinte und vermeidet besonders auf schwarz-weißen Drucken Beeinträchtigungen der Lesbarkeit. Andererseits sollte auch ein Ausdruck, auf dem die Hintergründe fehlen, leicht lesbar und erkennbar sein.
Beispiel 11 zeigt Hintergründe an der Überschrift und der Tabelle.

Links `<a>`, Abkürzungen `<abbr>`:

Diese Elemente werden in der Regel durch Unterstreichung, andere Farbgebung oder eine kleine vorangestellte Grafik kenntlich gemacht. Im Druck ist das alles nicht mehr notwendig, da die besondere Funktionalität dieser Elemente beim Ausdruck verloren geht. Es gibt geteilte Meinungen darüber, ob Links für den Leser des Papierdrucks erkennbar gemacht werden sollten.

Mit Hilfe des Pseudoelementes :after und des Attributselektors lassen sich auch die Bedeutungen der Abbkürzungen oder die URLs der Links im Druck ausgeben:

abbr[title]:after { content: '(' attr(title) ')'; }

a[href]:after { content: '(' attr[href] ')'; }

Leider sind ganze URLs oft sehr lang und können nicht umgebrochen werden. Zudem sind bisher nur die auf der Gecko-Engine basierenden Browser in der Lage, den Attribut-Selektor korrekt darzustellen.

Wenn man Links in der Bildschirmausgabe durch eine vorangestellte kleine Grafik gekennzeichnet hat, braucht man darauf im Ausdruck nicht zu verzichten. Man könnte diese Grafik z. B. durch einen kleinen Pfeil wie im Lexikon ersetzen: siehe Beispiel 12.

Unterstützung spezieller Druckeigenschaften

CSS stellt eine Reihe spezieller Eigenschaften zur Ausgabe auf seitenorientierten Medien zur Verfügung. Die sinnvollsten dieser Eigenschaften sind page-break-after, page-break-before, page-break-inside, orphans und widows zur Kontrolle der Seitenumbrüche. Darüber hinaus sind auch die Seiten- Pseudoklassen :first, :right und :left interessant, wenn man doppelseitige Druckausgaben ansteuern will.

Keine dieser Eigenschaften wird aber bis jetzt in einer für die Produktion akzeptablen Breite durch die Browser unterstützt. Es ist dennoch nicht falsch, wenn wir bereits heute einige dieser Eigenschaften im Stylesheet notieren. Für die Browser, die sie nicht unterstützen, spielt es keine Rolle und für die Browser, die sie unterstützen, ist es nur vorteilhaft.
Beispiel 13 zeigt einige mögliche Verwendungen seitenorientierter Eigenschaften.

Abschluss

Zum Schluss soll noch die Frage nach der 'Billigvariante' angesprochen werden, die gelegentlich gestellt wird: ob es möglich ist, ein vorhandenes, altes Webdokument, dass noch auf Tabellenlayout aufgebaut ist, einfach mit einem Druck-Stylesheet zu ergänzen und es damit für den Druck zu optimieren?

Das ist nicht unmöglich, es erfordert aber einen relativ großen Aufwand und ein akzeptables Ergebnis ist so nicht erreichbar. Es lassen sich nämlich Präsentation und Inhalt, die in einem Tabellenlayout prinzipiell vermengt sind, nicht einfach durch ein zusätzliches Stylesheet voneinander trennen. Der effektivste Weg ist immer, zuerst ein technisch zeitgemäßes Layout zu erstellen, das dann an verschiedene Medien angepasst werden kann.

An die auf dieser Seite vorgestellten Beispiele könnte man sicher noch Verfeinerungen anbringen. Wichtig ist aber hier, dass es durch das Grundprinzip der Trennung von Information und Gestaltung möglich ist, dasselbe Webdokument in der Ausgabe problemlos an ganz unterschiedliche Medien anzupassen.
TOP