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.
Vorbereitungen für den Ausdruck
Die Überschrift trifft dabei den springenden Punkt nicht ganz. Im Detail müssen Sie sich vielmehr entscheiden, ob Sie die Inhalte aller Spaltencontainer oder nur die Inhalte bestimmter oder auch nur eines einzigen Containers ausdrucken möchten.
Dabei gilt es zunächst die 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.
Auswahl der auszudruckenden Spaltencontainer
Innerhalb des YAML-Frameworks ist die Anordnung und damit auch die Nutzung der Spaltencontainer für Inhalte, Navigation oder sonstiges frei wählbar. Demzufolge wurden auch Vorbereitungen getroffen, sodass Sie jede Kombination der drei Spaltencontainer drucken lassen können. Die Entscheidung darüber fällen Sie durch die Einbindung eines von sieben Print-Stylesheets aus dem Verzeichnis yaml/print/ in das zentrale Stylesheet Ihres Layouts.
Eine Sonderstellung nimmt die Datei print_draft.css ein. Hierbei handelt es sich um ein allgemeines Druckstylesheet ohne Vorgaben für die Ausgabe von Contentspalten. Nutzen Sie diese Vorlage, wenn Sie Ihr Layout beispielsweise vollständig mit Subtemplates gestalten.
Druck-Stylesheet | #col1 | #col2 | #col3 |
|---|---|---|---|
print_100_draft.css | Ja | - | - |
print_020_draft.css | - | Ja | - |
print_003_draft.css | - | - | Ja |
print_120_draft.css | Ja | Ja | - |
print_023_draft.css | - | Ja | Ja |
print_103_draft.css | Ja | - | Ja |
print_123_draft.css | Ja | Ja | Ja |
print_draft.css | keine Vorgaben | ||
Aufbau der Print-Stylesheets
Der Aufbau dieser Print-Stylesheets ist weitestgehend identisch. Der Großteil der Vorbereitungen für die Druckausgabe einer Webseite hängt nicht von der Wahl der Spalten ab. Hierbei geht es in erster Linie um die Anpassung des Screenlayouts an das Medium Papier, das Abschalten nicht benötigter Layoutelemente oder auch die Auszeichnung von URL's, Abkürzungen oder Akronymen, damit so wenig wie möglich Informationen verloren gehen.
Umstellung der Maßeinheit für Schriftgrößen
Bei der Angabe von Schriftgrößen gibt es Unterschiede zwischen sinnvollen Angaben für die Bildschirmdarstellung und für den Druck. Am Bildschirm ist die Skalierbarkeit der Schriftgröße wichtig, daher werden üblicherweise 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 10pt (10 Punkt) gesetzt werden, um auch auf dem Papier gut lesbar zu erscheinen. Die Umsetzung dieser Vorgabe als Basisschriftgröße erfolgt über das body Element und wird an alle Child-Elemente vererbt.
/* (en) change font size unit to [pt] ... */
/* (de) Wechsel der der Schriftgrößen-Maßeinheit zu [pt] ... */
body { font-size: 10pt; }
Wichtig: Für eine fehlerfreie Druckausgabe im Firefox ist das Umschalten auf die Einheit pt (Punkt) wichtig. Wenn Sie die Standardschriftgröße anpassen, bleiben Sie bei dieser Maßeinheit.
Allgemeine Anpassungen des Layouts
/* (en) Hide unneeded container of the screenlayout in print layout */
/* (de) Für den Druck nicht benötigte Container des Layouts abschalten */
#topnav, #nav, #search { display: none; }
Navigationselemente werden generell abgeschaltet, sie sind ausgedruckt nutzlos. Beachten Sie hier auch den Selektor #search. Im Basislayout ist kein vordefinierter Container für den Einbau einer Suchmaske vorgesehen, zu verschieden sind hier die Geschmäcker für dessen Lage im Layout. Allerdings existiert dieses Element natürlich bei einem Großteil der per CMS betriebenen Webseiten. Daher wurde dieser Selektor an dieser Stelle mit aufgenommen denn auch die Suchfunktion ist natürlich auf dem Papier nicht mehr sinnvoll.
Steuerung von Seitenumbrüchen
Als nächstes wird über die Eigenschaft page-break-after:avoid versucht, den Seitenumbruch unmittelbar nach einer Überschrift zu vermeiden. Auch diese Vorgabe kommt letztlich der Lesbarkeit der Texte auf dem Papier zugute.
/* (en) Avoid page breaks right after headings */
/* (de) Vermeidung von Seitenumbrüchen direkt nach einer Überschrift */
h1,h2,h3,h4,h5,h6 { page-break-after:avoid; }
Linearisierung der Spaltencontainer
Die Spaltencontainer müssen gegenüber dem Screenlayout angepasst werden. Es ist nicht sinnvoll, die einzelnen Spalten wie am Bildschirm nebeneinander liegend auszudrucken. Abhängig von der Menge der Inhalte in den einzelnen Spalten würden unnötig große Freiflächen auf dem Papier entstehen.
Die Spaltencontainer werden daher linearisiert, d.h. sie werden in der Reihenfolge ihres Auftretens im Quelltext in voller Breite ausgegeben. Nachfolgend sehen Sie einen Auszug aus dem Print-Stylesheet print_103_draft.css. Darin werden die Spaltencontainer #col1 und #col3 für die Druckausgabe angepasst, während #col2 abgeschaltet wird.
/**
* @section column selection
* (en) individually switch on/off any content column for printing
* (de) (De)aktivierung der Contentspalten für den Ausdruck
*
* @see ...
*/
#col1, #col1_content { float: none; width: 100%; margin: 0; padding: 0; border: 0}
#col2 { display: none; }
#col3, #col3_content { width: 100%; margin: 0; padding: 0; border:0 }
Optionale Kennzeichnung der Spalten
Für den Ausdruck mehrspaltiger Webseiten ist eine Linearisierung der Spalten sinnvoll. Durch den Wegfall der links- bzw. rechtsbündigen Ausrichtung erscheinen die Spaltencontainer im Drucklayout jedoch zwangsläufig in der Reihenfolge, in der sie im Quelltext stehen.
Das bedeutet, im Basislayout (Spaltenanordnung 1-3-2) käme die Spalte #col3, in der sich im Regelfall die Hauptinhalte befinden, auf Grund ihrer Position im Quelltext an letzter Stelle. Solange ausschließlich diese Spalte ausgedruckt wird, ist dies nicht relevant.
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 deren Relevanz - unter Umständen verloren. Daher können im Drucklayout die Spalten-Container optional eine Beschriftung erhalten, mit der beispielsweise die Lage am Bildschirm oder deren Inhalt im Ausdruck beschriftet werden kann. Dies lässt sich dank der CSS2-Pseudoklasse :before äußerst elegant vorbereiten.
/* (en) Preparation for optional column labels */
/* (de) Vorbereitung für optionale Spaltenauszeichnung */
#col1_content:before, #col2_content:before, #col3_content:before {
content: "";
color:#888;
background:inherit;
display:block;
font-weight:bold;
font-size:1.5em;
}
Soll eine Beschriftung ergänzt werden, muss für den jeweiligen Container lediglich noch der Wert für die Eigenschaft content nachgereicht werden.
/* Optionale Spaltenauszeichnung */
/*
#col1_content:before {content:" [ left | middle | right column ]"}
#col3_content:before {content:" [ left | middle | right column ]"}
*/
Hinweis: Die optionale Auszeichnung der Spalten ist in allen Print-Stylesheets mit mehr als einer Ausgabespalte bereits vordefiniert, jedoch zur Sicherheit zunächst auskommentiert.
Automatische Auszeichnung von URL's, Akronymen und Abkürzungen
Wie bereits zu Anfang erwähnt, ist Papier kein interaktives Medium. Hyperlinks können auf dem Papier nicht angeklickt werden - die URL des Links sollte jedoch erhalten bleiben. Gleiches gilt für erläuternde Texte von Akronyme und Abkürzungen, welche beim Übergang vom Online-Medium zum Papier nicht verloren gehen sollten.
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.
/* (en) Disable background graphics of links */
/* (de) Abschalten evlt. vorhandener Hintergrundgrafiken ... */
abbr[title]:after, acronym[title]:after {
content: '(' attr(title) ')'
}
/* (en) Enable URL output in print layout */
/* (de) Sichtbare Auszeichnung der URLs von Links */
a[href]:after {
content:" <URL: "attr(href)">";
color:#444;
background:inherit;
font-style:italic;
}
Wichtig: 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.
Durch diese Deklarationen werden URL's und Erläuterungstexte in Klammern hinter dem jeweils verlinkten oder als Abkürzung gekennzeichnete Text ausgegeben. Auf diese Weise bleibt der Großteil der Informationen der Webseite auch auf dem Papier vorhanden.
Hinweis: Die opionale Auszeichnung von Acronymen und Hyperlinks ist in den Print-Stylesheets in der Voreinstellung auskommentiert.
