Jeder, der sich ernsthaft mit der Gestaltung von Webseiten beschäftigt hat, weiß es: Die beim Print-Design geltenden Regeln und Arbeitsweisen lassen sich nicht ohne weiteres aufs Web übertragen. Andersrum klappt's aber ebenfalls nicht: Die meisten Webseiten lassen sich nicht ohne weiteres auf Papier übertragen.
Viele Leute lesen allerdings insbesondere längere Texte aber lieber auf Papier. Bei Arbeiten für Schule & Uni ist es mitunter nötig, die verwendeten Internetquellen ausgedruckt beizufügen. Kurzum: es gibt viele Gründe Webseiten auszudrucken und auch viele Leute die ebendies tun.
Spezielle Druckversionen
Beim Ausdruck sind Hintergrundfarben und -bilder sowie Gebrauch von Grafikelementen und Farben ungewünscht, sowohl aus Gründen der Lesbarkeit als auch wegen des Tintenverbrauchs.
Außerdem sind viele auf einer Webseite vorhandene Elemente auf dem Papier schlicht überflüssig. Was zB soll der Benutzer mit einem Suchfeld oder einer Navigationsleiste? Was haben Werbebanner auf Papier zu suchen? Diese Erkenntnisse sind keinesfalls neu. So haben viele Websites (Spiegel Online etwa) seit längerem spezielle Druckversionen im Angebot, die die genannten Probleme beseitigen.
Das Erstellen von diesen Druckversionen ist jedoch relativ aufwändig oder erfordert eine Serverseitige Verwaltung der Inhalte (etwa durch ein Content Management System). Außerdem erfordert diese extra-Druckversion, dass der Benutzer den Link zur Druckversion erkennt und auch benutzt. Zusätzlich muss der Benutzer zum Drucken online sein, auf der Festplatte gespeicherte Webseiten lassen sich so nicht ausdrucken (jedenfalls nicht mit geeignetem Layout). Ärgerlich ist auch, dass die Druckversion extra vom Server angefordert werden muss, das führt zu mehr Serverlast und Traffic sowie Verärgerung beim Benutzer durch unvermeidbare Ladezeiten.
"Automatische" Druckversion per CSS
Mit sinnvollem Einsatz von Cascading Stylesheets und einem modernen Browser sind die meisten der oben genannten Probleme jedoch Vergangenheit. Versuchen Sie es: öffnen Sie diese Seite in der Druckvorschau, die in jedem halbwegs modernen Browser eingebaut ist (ab IE6, Netscape6, Mozilla oder Safari). Sie werden feststellen, dass dieses Dokument komplett anders aussieht. Das liegt am "multimedialen" Stylesheet von style-sheets.de. Die Site besitzt ein Stylesheet für die Darstellung auf dem Computerbildschirm (im CSS-Jargon: screen media) und eines für den Ausdruck (print). Im folgenden werden Techniken vorgestellt, die man in ein eigenes Print-Stylesheet einbauen könnte.
Einbinden der Stylesheets
Um Print-Stylesheets nutzen zu können, darf das media-Attribut beim Einbinden nicht fehlen. Für das Bildschirm-Stylesheet muss es auf "screen" gesetzt werden, für das Druck-Stylesheet auf "print"
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />Im folgenden wird auf die Inhalte des Print-Stylesheets eingegangen. Die Codebeispiele können meist so übernommen werden, lediglich die ID-Selektoren müssen noch der eigenen Dokumentstruktur bzw. Namensgebung angepasst werden.
Ausblenden unnötiger Inhalte
Navigation oder eventuelle Suchfelder haben auf dem Ausdruck nichts verloren. Auch möchte man den Benutzern vielleicht das Ausdrucken von Werbebannern ersparen. Das Beispiel geht davon aus, dass sich die Navigation in einem Container (ein div-Element z.B.) mit der ID "navigation" befindet, ein eventuell vorhandenes Suchfeld die ID "suche" besitzt, und alle Werbung mit der Klasse "werbung" ausgezeichnet wurde:
<div id="navigation">(Navigations-Links hier)</div>Die IDs müssen natürlich der eigenen Seite angepasst werden. Wenn weitere Bereiche nicht auf der Druckausgabe erscheinen sollen, fügt man entsprechende Selektoren einfach mit einem Komma getrennt in die folgende Regel ein,
/* Fuer die Druckausgabe ueberfluessiges abschalten */
#navigation, #suche, .werbung { display: none; }Typografie für den Druck
Texte sind am Bildschirm mit einer serifenlosen Schrift wie Verdana, Lucida Grande oder Helvetica einfacher zu lesen. Für die Druckausgabe von längeren Texten sind dagegen Schriften mit serifen wie Times oder Garamond typischerweise besser geeignet, die Überschriften werden aber typischerweise in serifenlosen Schriften gesetzt. Auch bei vielen anderen Eigenschaften unterscheiden sich die Typografischen Gepflogenheiten von Printmedien von der Bildschirmausgabe.
body {
margin: 0;
padding: 0;
font: 12pt Garamond, Palatino, "Times New Roman", Times, serif;
color: black;
background: transparent;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Lucida", Verdana,
"Bitstream Vera Sans", sans-serif;
font-weight: bold;
margin: .75em 0 .5em 0;
page-break-after: avoid;
}Diese beiden CSS-Regeln setzen die Schriften geeignet für die Papierausgabe, sowohl die Fonts als auch die Schriftgröße (in Punkten). Außerdem wird per margin und padding sichergestellt, dass der Text die volle Breite des Papiers nutzt (auf dem Bildschirm ist dies ja nicht ratsam). Schwarze Schrift wird ebenfalls eingestellt (zusammen mit Farbangaben sollte man immer Hintergrundfarben angeben, in diesem Fall "transparent", also die Farbe des Papiers...). Außerdem wird hier noch der Abstand um Überschriften angepasst. page-break-after:avoid; verhindert einen Seitenumbruch nach Überschriften. Es wird zwar von den meisten Browsern nicht unterstützt, das soll hier aber nicht stören. So erhalten die Browser mit korrektem Support Vorteile, die anderen wenigstens keine Nachteile. page-break-after:always; (oder page-break-before:always;) hat eine Breitere Unterstützung (u.a. IE 4+, Opera 5+, Safari 1.2) vorzuweisen, und kann dafür verwendet werden, einen Seitenumbruch zu erzwingen wo dies gewünscht ist.
p {
margin: 0 0 1em 0;
}
p+p {
margin-top: -1em;
text-indent: 2em;
}Angrenzende Absätze werden in Webbrowsern normalerweise mit einer Leerzeile Abstand voneinander getrennt. Im Print-Bereich ist es dagegen verbreitet, die erste Zeile einzurücken. Diese CSS-Regeln erreichen genau dies. Zuerst wird allen Absätzen eine Leerzeile Abstand nach unten gegeben. Dann wird das mit der zweiten Regel aufgehoben und die zweite Zeile eingerückt. Das ist notwendig, da Browser mit mangelhafter CSS-Unterstützung (Internet Explorer als herausragendes Beispiel) den Selektor p+p nicht verstehen, der nur Absätze auswählt, denen bereits ein Absatz vorhergegangen ist. Dieser Selektor wird hier verwendet, da der erste Absatz eines Abschnittes keine Einrückung erhalten soll. Im Internet Explorer bleibt so weiterhin ein Abstand zwischen Absätzen, alle anderen Browser können von den Einrückungen profitieren.
Links
Hyperlinks sind das Element, das ein Hypertext-Dokument erst ausmacht. Ohne sie wäre das Web kein Web. Doch sie auf Papier zu bringen ist schwierig, schließlich kann man sie ausgedruckt kaum anklicken. Eine Unterstreichung signalisiert "klickbarkeit". Beim Asudruck kann man auf sie verzichten, ebenso wie auf hover-Effekte oder die Unterscheidung zwischen besuchten und unbesuchten Links. Trotzdem wünschen aber viele Leute eine eindeutige Erkennung von verlinkten Wörtern, daher wird eine (dunkel)blaue Linkfarbe beibehalten.
a, a:visited, a:hover, a:visited:hover {
color: #04667e;
background: transparent;
text-decoration: none;
}Ein eindeutiger Mehrwehrt bietet CSS mit dem sogenannten generierten Inhalt. Über die content-Eigenschaft können vor oder hinter vorhandenen Inhalten neue eingefügt werden. Der folgende Code fügt hinter Links den URL auf den sie zeigen ein. So können Leser der gedruckten Version den Links trotzdem folgen. Internen Links wird mit der zweiten Regel die Domain der eigenen Site vorangestellt. (Damit das funktioniert, muss man interne Links relativ zum Stammverzeichnis der eigenen Domain setzen, also etwa "/guide/medien/print" für dieses Dokument. Dies ist ohnehin aus anderen Gründen ratsam).
a:link:after, a:link:visited:after {
content: " (Link auf <" attr(href) ">) ";
font-size: 76%;
color: #999;
background: transparent;
}
a[href^="/"]:link:after {
content: " (Link auf <http://style-sheets.de " attr(href) ">) ";
}Das sieht in der Druckausgabe in modernen Browsern wie Netscape 6+, Opera 6+, Mozilla oder Safari folgendermaßen aus (Benutzer des Internet Explorer können wieder einmal nicht in den Genuss dieses Features kommen, dieser Browser unterstützt generierte Inhalte nicht):
Interner Link (Link auf <http://style-sheets.de /guide/>)
Zu guter letzt
Als Anregung was sonst noch in einem Print-Stylesheet gemacht werden kann, soll der Footer dieser Site dienen. Er bekommt mit der folgenden Regel ein für Papier passendes aussehen.
#footer {
border-top: 1.5pt solid;
font-size: .95em;
color: #333;
text-align: center;
}Die hier gezeigten Techniken werden genau so auch im Print-Stylesheet dieser Site angewendet. Sie sind sicherlich nicht alles an Möglichkeiten, aber sicherlich eine sinnvolle Auswahl.
Zu beachten ist: Die Seitenränder sowie Kopf- und Fußzeile, in denen Browser Datum und URL der Seite unterbringen, sind außerhalb der Kontrolle von CSS. Lediglich der Benutzer kann sie verändern. Daher sollte man in Print-Stylesheets sehr vorsichtig mit Angaben von Seitenrändern sein, diese idealerweise weglassen, damit Möglichst viel vom Papier ausgenutzt werden kann.
Außerdem drucken die meisten Browser Hintergrundfarben und -bilder in der Standardeinstellung nicht mit aus und setzen die Schriftfarbe auf Schwarz. Dies geschieht, um die Lesbarkeit auf Papier zu gewährleisten. Man kann dieses Verhalten ebenfalls nicht mit eigenen Stylesheets beeinflussen.