CSS Struktur
3.8 Anpassung des Layouts für Printmedien
Nachdem für die Darstellung am Bildschirm alles soweit fertig ist, geht es nun an die Anpassung des Layouts für Printmedien. Die Ausgabe der Seiteninhalte auf Papier bedeutet den Übergang von einem interaktiven zu einem passiven Medium. Hyperlinks sind auf Papier nicht mehr anklickbar, die Seitenlänge eines A4-Blattes ist begrenzt und gelegentlich wird aus einer farbigen Webseite ein schwarz/weiß Ausdruck. Dennoch sollen die Inhalte der Webseite möglichst ohne Informationsverlust zu Papier gebracht werden.
Textformatierung allgemein
Monitore haben eine deutlich geringere Pixel-Auflösung als das Druckbild. Am Bildschirm sind daher serifenlose Schriften (z.B. Verdana oder Arial) besser lesbar. Auf dem Papier und insbesondere bei längeren Texten sind jedoch Schriften mit Serifen (z.B. Times) besser lesbar. Aus diesem Grund wird im Drucklayout die Schriftfamilie auf eine serifenbehaftete Schrift umgestellt.
Auch bei der Angabe von Schriftgrößen gibt es Unterschiede. Am Bildschirm ist die Skalierbarkeit wichtig, daher werden zur Größenangabe em oder Prozent verwendet. Für den Druck hingegen werden Punkt oder Pica-Angaben verwendet. Normaler Text sollte nicht kleiner als 12pt gesetzt werden. Die erforderlichen Formatanweisungen sind am Beginn jedes Druck-Stylsheets zu finden.
body * {
font-size: 12pt;
font-family: "Times New Roman",
Times, serif;
}
blockquote {
font-family: "Times New Roman", Times,
serif;
}
code.css, code.xhtml, em.file {
font-family: "Courier New",
Courier, mono;
}
Wahl der zu druckenden Spalten
Dabei gilt es zunächst eine Frage zu klären: Was sind wichtige Informationen und was ist nur zusätzliches Beiwerk?
Die Angaben der Fußzeile, Werbung in den Randspalten oder eine Suchmaske sind auf Papier nutzlos. Auch die Navigationselemente der Seite sind auf Papier nicht mehr bedienbar. Es ist daher nicht erforderlich, alle auf dem Bildschirm dargestellten Inhalte auch wirklich auszudrucken. In den Druck-Stylesheets werden daher die Fußzeile, sowie die Navigationselemente display: none; abgeschaltet.
Die Reihenfolge, in der die einzelnen Spalten im Browser ausgedruckt werden, richtet sich nach der Reihenfolge der Spalten im Quelltext. Das Layout soll universell einsetzbar sein, daher muss jede Kombination der drei Spalten für den Druck an- bzw. abschaltbar sein. Dazu werden insgesamt sieben Stylesheets definiert. Diese Stylesheets befinden sich im Verzeichnis css/print:
- print_100.css druckt die Spalte #col1
- print_020.css druckt die Spalte #col2
- print_003.css druckt die Spalte #col3
- print_120.css druckt die Spalten #col1 & #col2
- print_023.css druckt die Spalten #col2 & #col3
- print_103.css druckt die Spalten #col1 & #col3
- print_123.css druckt die Spalten #col1, #col2 & #col3
Die Spalten erhalten gegenüber der Darstellung am Bildschirm eine angepasste Formatierung. Es ist nicht sinnvoll, die Spalten wie am Bildschirm nebeneinander auszudrucken. Abhängig von der Menge der Inhalte in den einzelnen Spalten würden unnötig große Freiflächen auf dem Papier entstehen. Es ist daher besser, die Spalten für den Druck untereinander und mit voller Seitenbreite darzustellen. In Verbindung mit der oben bereits erwähnten Mindestschriftgröße von 12pt wird damit zudem die Lesbarkeit verbessert.
Kennzeichnung der Spalten (falls erforderlich)
Hinweis: Die nachfolgenden Anpassungen der Druckausgabe erfordern die volle CSS2-Funktionalität des Browsers. Der Internet Explorer erfüllt bis zur aktuellen Version 6.0 diese Anforderungen leider nicht und stellt diese zusätzlichen Anpassungen daher nicht dar. Während jedoch die korrekte Bildschirmausgabe des Layouts mittels zahlreicher CSS-Tricks auch im Internet Explorer sicher gestellt werden kann, ist dies für das Drucklayout nicht uneingeschränkt möglich.
Wie eben besprochen, liegen die ehemals nebeneinander angeordneten Inhaltsspalten im Drucklayout untereinander. Durch den Wegfall der links- bzw. rechtsbündigen Positionierung erscheinen die Spalten im Drucklayout zwangsläufig in der Reihenfolge, in der sie im Quelltext stehen. Das heißt, im 3-Spalter des Basis-Layouts kommt die Spalte #col3 mal wieder zum Schluss.
Um beim Ausdruck mehrerer Spalten die Übersicht auf dem Papier zu erleichtern, kann im Drucklayout die ehemalige Position der Spalte auf dem Bildschirm mit ausgegeben werden. Dies lässt sich dank der CSS2-Pseudoklasse :before äußerst elegant erledigen. Die entsprechenden Anweisungen finden sich in allen Druck-Stylesheets print_xyz.css zur Ausgabe von zwei oder drei Spalten. Als Beispiel folgen hier die Anweisungen zur Auszeichnung der Spalte #col3:
@media print {
...
#col3_content:before {
content:" [ Mittlere Spalte ]";
color:#888;
display:block;
background-color:inherit;
font-weight:bold;
font-size:1.5em;
border-bottom: 2px #888 solid;
margin-bottom: 1em;
}
...
}
Befinden sich die einzelnen auszudruckenden Spalten im Quelltext bereits in der richtigen Reihenfolge, so ist die Spaltenauszeichnung nicht erforderlich. In diesem Fall sollte die Auszeichnung im Druck-Stylesheet auskommentiert werden.
Hinweis: Wie schon erwähnt, funktioniert die Spaltenauszeichnung bisher nicht im Internet Explorer. Alternativ kann die Auszeichnung der Spalten bereits im XHTML-Quelltext vorgenommen werden. Dazu fügt man am Anfang jeder Spalte ein DIV ein, welches die Spaltenbezeichnung enthält und am Bildschirm mit display:none; per CSS unsichtbar gemacht wird.
Eine weitere Möglichkeit, die Übersicht im Ausdruck zu steigern, ist ein erzwungener Seitenumbruch zwischen mehreren auszudruckenden Spalten. Dies macht Sinn, wenn deren Inhalte nicht in direktem Zusammenhang stehen. Dieser erzwungene Umbruch ist in allen Druck-Stylesheets print_xyz.css, in denen mehr als nur eine Spalte ausgedruckt wird, voreingestellt. Somit beginnt der Inhalt jeder Spalte auf einer neuen Seite.
In der Datei print_023.css wird der Zeilenumbruch zum Beispiel am Ende des Inhalts der rechten Spalte #col2_content eingefügt:
...
#col2_content {
float:none;
width: auto;
margin: 0;
padding: 0;
page-break-after:always;
}
...
Auszeichnung von Akronymen, Abkürzungen und externen Link-URLs
Wie bereits zu Anfang des Kapitels erwähnt, ist Papier kein interaktives Medium. Links können auf dem Papier nicht angeklickt werden. Ebenso sollen erläuternde Texte von Akronyme und Abkürzungen auf dem Papier nicht verloren gehen.
Also muss dafür gesorgt werden, dass externe Link-URLs und erläuternde Hilfstexte mit auf dem Ausdruck erscheinen. Diesmal ist es eine CSS2-Pseudoklasse, mit deren Hilfe auch dieser Stolperstein aus dem Weg geräumt wird. Die URL-Auszeichnung im Ausdruck sollte immer verfügbar sein, daher ist sie in allen Druck-Stylesheets enthalten:
@media print {
...
abbr[title]:after, acronym[title]:after {
content: '(' attr(title)
') ';
}
...
/* Sichtbare Auszeichnung der URLs von Links */
a[href]:after {
content:" <URL: "attr(href)"> ";
color:#444;
background-color:inherit;
font-style:italic;
}
...
}
Die Ausgabe von Hilfstexten erfolgt in runden Klammern, die Ausgabe von Link-URLs in eckigen Klammern, jeweils direkt hinter dem betreffenden Element.
