3.9 Anpassung des Layouts für Printmedien
Neben der Darstellung einer Webseite am Bildschirm ist die Aufbereitung der Seiteninhalte für den Druck ein wichtiger Punkt des Webdesigns. Bei diesem Übergang zwischen der Onlinewelt und dem Druckerpapier darf ein attraktives Screendesign kein Hindernis für eine übersichtliche und gut lesbare Druckfassung der Webseite sein.
Die Ausgabe der Seiteninhalte auf Papier bedeutet den Übergang von einem interaktiven zu einem passiven Medium. Papier ist ein Medium mit einem festen Seitenverhältnis und begrenzten Abmessungen. Es muss daher bei längeren Inhalten mit Seitenumbrüchen gerechnet werden - etwas, was man in der Onlinewelt nicht kennt. Hyperlinks sind auf Papier nicht mehr anklickbar, fehlt also auf dem Papier die zugehörige URL, so geht eine wichtige Information verloren.
Zur Anpassung des Layouts für die Ausgabe einer Webseite auf Printmedien stellt das YAML-Framework eine Reihe von CSS-Bausteinen im Verzeichnis css/print zur Verfügung.
Textformatierung für den Druck
Monitore haben eine deutlich geringere Pixel-Auflösung (72 bis 96 dpi) als das Druckbild (300 bis 1200 dpi). Am Bildschirm sind daher kleine serifenbehaftete Schriften (z.B. Times) relativ schlecht lesbar. Für die Darstellung am Monitor haben serifenlose Schriftarten (z.B. Verdana oder Arial) deutliche Vorteile. Auf dem Papier und insbesondere bei längeren Texten ist es genau anders herum - hier werden in der Regel Schriften mit Serifen (z.B. Times) bevorzugt. Aus diesem Grund wird im Drucklayout die Schriftfamilie auf eine serifenbehaftete Schrift umgestellt.
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;
} Auch bei der Angabe von Schriftgrößen gibt es Unterschiede zwischen der Bildschirmdarstellung und den Angaben für den Druck. Am Bildschirm ist die Skalierbarkeit der Schriftgröße wichtig, daher werden relative Einheiten wie em oder Prozent verwendet. In der Drucktechnik zählen hingegen absolute Größenangaben wie Punkt oder Pica. Normaler Text sollte dabei nicht kleiner als 12pt (12 Punkt) gesetzt werden, um auch auf dem Papier nicht zu klein zu erscheinen. Die dafür erforderlichen CSS-Deklarationen sind am Beginn jedes Druck-Stylesheets zu finden.
Anpassung des Layouts
Dabei gilt es zunächst eine Frage zu klären: Welche Teile des Layout enthalten wichtige Informationen und was ist nur 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 Hauptnavigation abgeschaltet.
body {margin:0; padding: 0;}
#page_margins, #page {
min-width: inherit;
margin:0;
padding: 0;
border: 0;
}
#topnav {display: none;}
#nav_main {display:none;}
...
#footer {display: none;}
Spalten für den Druck auswählen
Das Layout soll universell einsetzbar sein, daher ist jede Kombination der drei Spalten für den Druck an- bzw. abschaltbar. Die Steuerung erfolgt über die folgenden sieben Stylesheets.
| Druck-Stylesheet | #col1 | #col2 | #col3 |
|---|---|---|---|
| print_100.css | Ja | - | - |
| print_020.css | - | Ja | - |
| print_003.css | - | - | Ja |
| print_120.css | Ja | Ja | - |
| print_023.css | - | Ja | Ja |
| print_103.css | Ja | - | Ja |
| print_123.css | Ja | Ja | Ja |
Linarisierung der Spalten
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 sinnvoll, die Spalten für den Druck untereinander und mit voller Seitenbreite darzustellen - die Spalten werden linearisiert.
...
#col1 {
float:none;
width: auto;
margin: 0; padding: 0;
}
#col1_content {
float:none;
width: auto;
margin: 0; padding: 0;
page-break-after:always;
}
... Die Reihenfolge, in der die einzelnen Spalten auf dem Papier erscheinen, richtet sich daher nach ihrer Reihenfolge im Quelltext.
Die Eigenschaft page-break-after:always; von #col1_content sorgt dafür, dass bei Ausgabe mehrerer Spalten am Ende jeder Spalte ein Seitenumbruch erzwungen wird. Dies macht Sinn, wenn deren Inhalte nicht in direktem Zusammenhang stehen. Dieser erzwungene Umbruch ist in allen Druck-Stylesheets print_xyz.css enthalten, bei denen mehr als nur eine Spalte ausgedruckt wird. Somit beginnt der Inhalt jeder Spalte auf einer neuen Seite.
Kennzeichnung der Spalten (optional)
Hinweis: Die nachfolgenden Anpassungen der Druckausgabe erfordern die Unterstützung von CSS 2.1-Pseudoklassen durch den Browser. Der Internet Explorer erfüllt bis zur aktuellen Version 7.0 diese Anforderungen leider nicht.
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; und der CSS-Regel @media screen für die Ausgabe am Bildschirm abgeschaltet wird.
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 bedeutet, im 3-Spalter des Standard-Layouts (Spaltenanordnung 1-3-2) käme die Spalte #col3, in der sich vermutlich die Hauptinhalte befinden, auf Grund ihrer Position im Quelltext mal wieder an letzter Stelle.
Beim Ausdruck mehrerer Spalten geht für den Anwender infolge der Linearisierung der Spalten die Zuordnung der Inhalte zu deren Lage am Bildschirm - und damit zu deren Relevanz - verloren. Daher 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.
Auszeichnung von Akronymen, Abkürzungen und externen Link-URLs
Hinweis: Die nachfolgenden Anpassungen der Druckausgabe erfordern die Unterstützung von CSS 2.1-Pseudoklassen durch den Browser. Der Internet Explorer erfüllt bis zur aktuellen Version 7.0 diese Anforderungen leider nicht.
Wie bereits zu Anfang erwähnt, ist Papier kein interaktives Medium. Links können auf dem Papier nicht angeklickt werden - die URL des Links sollte jedoch erhalten bleiben. 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 Ausgabe von Hilfstexten erfolgt in runden Klammern, die Ausgabe von Link-URLs in eckigen Klammern, jeweils direkt hinter dem betreffenden Element.
@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 automatische Auszeichnung dieser interaktiven Elemente einer Webseite ist sie in allen Druck-Stylesheets enthalten.
