Druckversion per CSS

Viele datenbankbasierte Websites bieten Ihren Lesern eine Druckversion, bei der der Inhalt speziell für den Drucker aufbereitet wird. Mit ein paar einfachen CSS-Regeln können Sie auch für ganz normale, statische Webseiten die Ausgabe für Bildschirm und Drucker getrennt gestalten.

Vorbereitung: Die Beispielseite

Sie können das folgende Kapitel mit allen tabellenfreien, per CSS gestalteten Webseiten durcharbeiten, besonders einfach ist es jedoch mit den Übungsdateien, die wir speziell dazu für Sie vorbereitet haben:

Übungsdateien downloaden (10 kb, ZIP)

Entpacken Sie die ZIP-Datei irgendwo auf Ihrer Festplatte, am besten in einem neuen Ordner. Die folgenden Abbildungen zeigen die Ausgangssituation:

Die Beispielseite am Bildschirm

Die Druckversion ist wie bei so vielen Webseiten suboptimal, denn rechts am Rand fehlt ein Stück:

48690_02vorbereitung_beispielseite_druckversion_640.gif

Die Druckversion der Beispielseite - wie so oft rechts abgeschnitten

Die fertigen Beispielseiten

Sie können sich die fertigen Beispielseiten mit Druckversion im Browsers anschauen. Zum Testen müssen Sie die Webseiten nicht ausdrucken: Die Druckvorschau im Menü Datei Ihres Browsers zeigt die Seiten "wie gedruckt".

Schritt 01: Stylesheet nur für den Bildschirm

Das Element link, das HTML- und CSS-Dateien verbindet, kennt das Attribut media zur Angabe eines bestimmten Ausgabemediums. Damit kann ein Stylesheet ausschließlich für die Ausgabe auf Bildschirm oder Drucker benutzt werden.

So sagen Sie dem Browser, dass das aktuelle Stylesheet nur für die Ausgabe auf dem Bildschirm zu benutzen ist:

<link href="littleboxes.css" rel="stylesheet" type="text/css" media="screen" />

Bei der Anzeige am Bildschirm hat sich im Browser nichts geändert. Aber schauen Sie doch mal testhalber in die Druckvorschau. Dort sieht die Webseite jetzt so aus:

HTML pur - die WebSeite ohne CSS als ganz einfache Druckversion

In der Druckvorschau zeigt der Browser die ungestaltete Webseite, da das Stylesheet mit dem Zusatz media="screen" explizit nur für das Medium Bildschirm (screen) bestimmt ist. Fertig ist die Druckversion in ihrer allereinfachsten Form.

Bereits jetzt hat diese Variante den Vorteil, dass rechts kein Text mehr fehlt und dass möglicherweise per CSS eingebundene, tinten- oder tonerintensive Hintergrundgrafiken nicht mehr mitgedruckt werden.

Weitere Ausgabemedien

CSS kennt neben screen und print noch andere Ausgabemedien wie projection und handheld. In SelfHTML finden Sie eine Übersicht aller Ausgabemedien.

Schritt 02: Ein zweites Stylesheet für den Ausdruck

Und los geht es mit den Vorbereitungen für die eigentliche Druckversion:

Erstellen Sie eine leere Datei und speichern Sie sie unter dem Namen druckversion.css im selben Ordner wie die Übungsdateien.
Öffnen Sie die beiden Übungsdateien index.html und kontakt.html in einem Editor.
Fügen Sie den fett gedruckten link-Befehl ein:

<head>

<!-- Andere HTML-Elemente --> 

<link href="littleboxes.css" rel="stylesheet" type="text/css" media="screen" /> 
<link href="druckversion.css" rel="stylesheet" type="text/css" media="print" /> 
</head>

Durch das neue link-Element weiß der Browser, dass es ein Stylesheet speziell für den Ausdruck gibt und wo er es finden kann. Nach dem Speichern können Sie die beiden Webseiten schließen.

Schritt 03: Schriftformatierung für die Druckversion

Am besten beginnen Sie mit der Schriftgestaltung. Öffnen Sie dazu ggf. das Stylesheet druckversion.css im Editor und geben Sie folgende CSS-Regel ein:

body {
  font-family: "Times New Roman", Times, serif; 
  font-size: 12pt;
}

Diese Regel bewirkt zweierlei:

font-family definiert eine Serifenschrift für die Druckausgabe. Auf dem Monitor sind serifenlose Schriften wie Verdana oder Helvetica besser lesbar, auf Papier hingegen, besonders für den Fließtext, Schriften mit Serifen wie Times New Roman.
font-size definiert die Schriftgröße mit der Einheit pt. Am Bildschirm ist die Skalierbarkeit der Schrift wichtig, daher werden meist die Einheiten em oder Prozent verwendet. In einem Druckstylesheet können Sie genau wie in Word pt benutzen.

Die Anweisungen für Schriftart und -grad werden wie in CSS üblich an alle Elemente zwischen <body> und </body> vererbt, sofern für sie nicht etwas anderes definiert wurde.

Mit den folgenden Regeln gestalten Sie die Überschriften auf den Beispielseiten:

h1, h2 { font-family: Verdana, Arial, Helvetica, sans-serif; }
h1 {font-size: 24pt; }
h2 {
  font-size: 18pt;
  /* Abstand zwischen Text und Rahmenlinie */ 
  padding-top: 6pt;
  /* dunkelgraue Rahmenlinie oben */
  border-top: 3pt solid #666;
}

Druckversion mit einfachen Schriftformatierungen

Auf diese Weise können Sie die Formatierung für alle gewünschten HTML-Elemente festlegen. Sollen z.B. Zitate eingerückt und kursiv erscheinen, verwenden Sie eine CSS-Regel wie die folgende:

blockquote { 
  font-style: italic;
  /* Einzug von links  */
  padding-left: 2cm;
  /* Einzug von rechts */  
  padding-right: 2cm;
}

Zentimeter: Sie haben richtig gelesen. In einem Druckstylesheet können Sie die Einheit cm zur Gestaltung von Abständen problemlos einsetzen, am Bildschirm nicht.

Schritt 04: Navigationsbereich ausblenden

In einer Druckversion ist der Navigationsbereich ziemlich nutzlos und kann deshalb einfach ausgeblendet werden. Im HTML beginnt der Navigationsbereich mit dem Element <div id="navibereich">, zum Ausblenden benutzen Sie folgende CSS-Regel:

#navibereich { display: none; }

Und schon ist der Navigationsbereich beim Ausdruck verschwunden. Ähnliches machen Sie mit allen anderen Elementen, die in der Druckversion nicht erscheinen sollen, wie z. B. dem Skiplink "Zum Inhalt" ganz oben auf der Seite, der im HTML die Klasse skiplink hat:

.skiplink { display: none; }

Die Druckversion ohne Navigationsbereich und Skiplink

Schritt 05: Grafiken platzieren

Auf der Startseite gibt es eine Grafik mit einem roten Luftballon, die auf dem Bildschirm rechts neben dem Text steht. Die Grafik wird im HTML mit folgendem Befehl eingefügt:

<img src="ballon.jpg" alt="Ballon" width="78" height="100" class="bildrechts" />

Wenn diese Grafik in der Druckversion ebenfalls rechts neben dem Text erscheinen soll, fügen Sie einfach eine entsprechende CSS-Regel hinzu:

.bildrechts { 
  /* Grafik nach rechts schweben lassen */
  float:right;

  /* Zwischen Bild und Rahmen */
  padding: 3pt;
  /* grauer Bilderrahmen */ 
  border: 6pt solid #ccc;
  /* Abstand zwischen Bild und Fließtext */
  margin-right: 12pt;
}

Und so sieht die Druckversion danach aus:

Der rote Ballon schwebt neben dem Fließtext

Schritt 06: URL der Hyperlinks sichtbar machen

Hypertext gibt es nicht auf Papier, sondern nur in elektronischen Medien. Sobald Sie eine Webseite ausdrucken, verliert der Hypertext das "hyper" und wird ganz normaler Text. Die Links auf einer ausgedruckten Webseite sind nach wie vor unterstrichen, aber sie können draufdrücken soviel Sie wollen, Sie springen nirgendwo hin.

Viel schlimmer ist, dass Sie in der Druckversion normalerweise nicht sehen können, wohin der Link führt. Die folgenden CSS-Regeln entfernen die Unterstreichung der Hyperlinks und machen die URL des Hyperlinks auf dem Ausdruck sichtbar:

/* Unterstreichung entfernen */
a {  text-decoration: none; }

/* [URL] nach dem Linktext */
a[href]:after { content:" ["attr(href)"]"; }

Die erste Regel ist einfach und entfernt die Unterstreichung der Hyperlinks. Die zweite hingegen wirkt auf den ersten Blick recht unübersichtlich. Sie gibt direkt hinter dem Text in eckigen Klammern die URL des Links aus:

Die URL zum Hyperlink steht in eckigen Klammern dahinter

Der Selektor a[href]:after ist eine Kombination aus einem Attribut-Selektor und dem Pseudo-Element :after und bewirkt folgendes:

a[href] selektiert alle a-Elemente , die das Attribut href enthalten.
:after ist ein Pseudo-Element, mit dem Sie am Ende eines Elements Text einfügen. Dieser Text wird im Deklarationsblock mit der Eigenschaft content definiert.

Die Deklaration content:" ["attr(href)"] "; ist nicht ganz so kompliziert wie sie auf den ersten Blick aussieht. Sie bewirkt folgendes:

Der auszudruckende Text steht nach dem Doppelpunkt, und zwar in Anführungsstrichen. Im Beispiel sind das die eckigen Klammern, und jeweils eine Leerstelle davor und danach.
Zwischen diesen eckigen Klammern stehen (wiederum in Anführungszeichen) die Zeichen attr(href). Auf deutsch "schreibe hier den Wert des Attributes href hin", oder einfacher: die URL des Hyperlinks.

In einem Browser, der Attribut-Selektor und Pseudo-Element versteht, sieht die Druckversion jetzt ungefähr so aus:

Die komplette Druckversion in der Übersicht

Der Internet Explorer versteht leider keine Pseudo-Elemente

Der Internet Explorer 6 kennt das Pseudo-Element :after leider nicht und ignoriert daher diese CSS-Regel in der Druckversion. Schade ist, dass das auch in der aktuellen Vorab-Version des IE7 noch so ist. Vielleicht bessert Microsoft bis zum Erscheinen ja noch ein bisschen nach.

Fazit

Mit wenigen CSS-Regeln können Sie eine effektive Druckversion für Ihre Webseiten erstellen. Der einzige potentielle Nachteil ist, dass Ihre Besucher nirgendwo eine Schaltfläche mit der Aufschrift Druckversion sehen, sondern erst in der Druckvorschau oder beim Ausdruck sehen, mit welcher Sorgfalt Sie Ihre Webseiten gebaut haben.

Stylesheets in der Praxis