Manuel-Bieh.de – Web-Development & Consulting

Der Eine oder Andere möchte sich ja zwecks Archivierungszwecken doch gerne einmal interessante Internetseiten ausdrucken. Leider bieten aber auch heute noch nur die wenigsten Webauftritte speziell für den Druck angefertigte Stylesheets. Dies jedoch ist, seitdem gängige Browser CSS im mehr oder weniger großen Umfang unterstützen, problemlos möglich. Die wesentlichen Schritte zum einfachen, aber dennoch effektiven Druckstylesheet sind dabei nicht einmal schwer umzusetzen oder mit einem hohem Aufwand verbunden.

So ist es bei der Einbindung in ein Dokument möglich, ein Stylesheet zum Beispiel nur für den Druck zu definieren. Oder nur für den Bildschirm. Dazu muss lediglich das media-Attribut für das Stylesheet angeführt werden:
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
<link href="screen.css" rel="stylesheet" type="text/css" media="screen" />

Stylesheets, welche kein media-Attribut erhalten, gelten dabei für alle Ausgabegeräte. Testen lassen sich alle Änderungen die für die Druckversion vorgenommen wurden im Ãœbrigen direkt im Browser, ohne einen Testausdruck, bequem über die Druckvorschau.

Grundlegendes zum Druck-Stylesheet

Macht eine Angabe in Zentimetern oder Millimetern am Bildschirm weniger Sinn, so wird ihr im Druck eine besondere Aufmerksamkeit zuteil. In der Druckausgabe eines Dokuments können, bzw. sollten natürlich Werte wie cm, mm, in, pt oder pc für Abstände, Höhen- oder auch Breitenangaben benutzt werden.

Ferner sollte im Print-Stylesheet alles für gute Lesbarkeit vorbereitet werden. Ein gutes Beispiel hierfür sind Hintergrundbilder. In der Regel werden diese von Browsern von Haus aus nicht mit gedruckt. Je nach Browsereinstellung kann das aber schon einmal vorkommen. Hintergründe verbrauchen unnötig Toner und lassen mitunter die Lesbarkeit sehr leiden. Um dies zu vermeiden sollte der Hintergrund daher zuerst einmal für alle Elemente auf Papierweiß gesetzt werden:

* {background: white;}

Wie schon bei Breiten- und Höhenangaben des Dokuments sollte auch bei der Größenangabe für Schrift umgedacht werden. Denn auf dem Papier kommt es weniger auf Pixel oder relative Angaben, die auf Einstellungen des Browsers beruhen an. Stattdessen kann hier getrost auf gängige Werteinheiten wie Punkt und Pica zurückgegriffen werden. Ein Punkt entspricht dabei der üblichen Größe von 1/72 Zoll, ein Pica entspricht 12 Punkt. Als kleinste im Druck noch lesbare Schriftgröße gilt eine Größe von 6pt, dennoch sollte man bei der Wahl des Schriftgrades natürlich ein wenig großzügiger sein, und sich bei den 6pt nur auf generell sehr viel weniger wichtige Rand- oder Fußnoten beschränken.

Weitere Schritte

Hat man die oben beschriebenen, grundlegenden Schritte abgearbeitet, kann es nun ins Detail gehen. Das Wichtigste ist es, sich zu Anfang erst einmal Gedanken zu machen, welche Elemente und Informationen der User auf dem Ausdruck wirklich benötigt. So ist eine Navigation auf einer Internetseite eine echt nützliche Sache, auf dem Papier hilft sie jedoch recht wenig. Stattdessen sollte man sich überlegen, ob es nicht viel eher nötig ist, die entsprechende Seitenrubrik auf dem Ausdruck zu kennzeichnen, und wenn ja, wie man das am besten anstellt. Geht man von einer gängigen Listennavigation aus bei dem der aktive Punkt als eben dieser gekennzeichnet ist:

<ul id="navigation">
  <li><a href="#">Beispiel</a></li>
  <li><a href="#">Punkt 2</a></li>
  <li class="aktiv"><a href="#">Rubrik 3</a></li>
  <li><a href="#">Test</a></li>
</ul>

so lassen sich mit der folgenden Notation im Druckstylesheet die inaktiven Menüpunkte sehr leicht ausblenden:

#navigation li {
    display: none;
}
#navigation li.aktiv {
    display: inline;
}

Stehen bleibt in diesem Fall nur der Menüpunkt, der mit der Klasse .aktiv gekennzeichnet ist. Dieser Menüpunkt lässt sich nun beliebig weiter formatieren und beispielsweise durch Positionierung (position) am Rand des Ausdrucks platzieren. Damit der User auch später noch weiß worum es sich auf dem Ausdruck bei »Rubrik 3« handelt, kann man dies optional mittels :before Pseudoelement kennzeichnen. Etwa:
#navigation .aktiv:before {content: "Aktive Rubrik » ";}

Fehlerfrei funktioniert dies allerdings erst in neueren Gecko- oder KHTML-Browsern die sich an die Vorgaben des W3C halten, wie zum Beispiel dem Mozilla Firefox oder dem Safari Browser auf dem Mac.

Natürlich lassen sich mit dieser Methode nicht nur Navigationen oder Unternavigationen im Druck ausblenden. Auch Werbebanner, Animationen, irrelevante Formulare oder Bildelemente können so mit einfachsten Mitteln vom Ausdruck ausgeschlossen werden. Notwendig ist dazu einfach, das jeweilige Element in der print.css, mit einem .element {display: none;} zu versehen.

Eine andere, weniger elegante Lösung kann sein, nicht zu druckende Elemente mit einer Klasse class="screenonly" zu versehen, welche im Print-Stylesheet ebenfalls mit .screenonly {display: none;} notiert wird. Allen Teilen des Dokuments, die für den Benutzer nur am Bildschirm zu sehen sein sollen, können von nun an mit <e class="screenonly"> für die reine Bildschirmausgabe gekennzeichnet werden. Ob diese Variante semantisch absolut Korrektheit ist, darüber lässt sich an dieser Stelle philosophieren.

Feintuning

Neben der Navigation kann natürlich auch der Fließtext Hyperlinks enthalten mit denen man auf einem späteren Ausdruck nicht mehr viel anfangen kann – solange man sich nicht ausreichend darum kümmert. Links lassen sich dabei nach dem gleichen Prinzip wie man einen aktiven Menüpunkt hervorhebt, ebenfalls kennzeichnen. Sinnvoll ist an dieser Stelle ein Hinweis, dass es sich um einen externen Link handelt, sowie, denn sonst bringt auch der Hinweis nicht viel, der Link an sich:
a:after {content: " - Externer Link: " attr(href);}

Ein Konstrukt wie <a href="http://www.drweb.de">Dr. Web</a> erscheint somit auf dem Ausdruck wie folgt: Dr. Web – Externer Link: http://www.drweb.de.

Arbeitet man diese Liste strukturiert ab, so sollte man dem User bereits ein großes Stück entgegen gekommen sein, was den Informationsgehalt auf dem Ausdruck und auch den Verbrauch an Toner und Papier angeht. Weitere Möglichkeiten bieten sich ab Level 3 der Cascading Stylesheets, womit es möglich sein wird, Umbrüche, Hurenkinder und Schusterjungen zu kontrollieren und sinnvoll zu steuern. Die Unterstützung seitens der Browser in diesem Punkt ist jedoch aktuell nicht bzw. nur sehr rudimentär gegeben.

Dieser Artikel erschien am 07.03.2006 bei Dr.Web + (kostenpflichtig)