Druckstylesheets

5

Dokumente einfach für den Druck aufbereiten

In diesem Artikel lernst du, wie man schnell und einfach ein Druckstylesheet mit CSS entwirft, das nicht nur dem Anwender Nerven und Frustration beim Drucken erspart, sondern nach der richtigen Erstellung auch universell auf allen Seiten einer Website anwendbar ist.

Ziel

Ziel des Druckstylesheets soll es sein, den wichtigen Inhalt der zu druckenden Seite möglichst platzsparend und druckerfreundlich, d.h. ohne unnötige Bilder und Farben, darzustellen. Auch soll das Druckstylesheet seitenübergreifend funktionieren, so dass es für neue Seiten deiner Website ohne erneute Anpassung funktioniert.

Das media-Attribut

Um dem Drucker mitzuteilen, welches Stylesheet er für den Druck verwenden soll, bedienen wir uns dem media-Attribut. Mit dem media-Attribut lassen sich für nahezu alle Ausgabegeräte eigene Stylesheets definieren.
So können wir leicht unserem Drucker ein Stylesheet zuweisen:

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

Eine ausführliche Liste über alle Werte des media-Attributes findest du bei SelfHtml.

Anpassen der Website für den Druck

Um Seitenelemente per CSS für den Druck formatieren zu können, sollten sie eine eindeutige Bezeichnung per ID oder Klasse besitzen.
Eine ID oder eine Klasse wird vergeben, indem in das entsprechende Element das class-Attribut oder das id-Attribut eingefügt wird.

<div id="navigation">
 <p class="infotext"></p>
</div>

Zugehöriges CSS:

#navigation {
 /* Hier folgen die CSS-Anweisungen */ 
}

.infotext {
 /* Hier folgen die CSS-Anweisungen */ 
}

Der Unterschied zwischen IDs und Klassen besteht darin, dass IDs nur einmal pro Seite vergeben werden dürfen (wie zum Beispiel für die Navigation). Klassen hingegen werden für Elemente vergeben, die öfters innerhalb einer Seite vorkommen können, wie z.B. Textabsätze.

Ausblenden nicht benötigter Seitenelemente

Seitenelemente wie die Navigation, Werbebanner, Partner-Links oder Formularelemente können problemlos vor dem Drucker versteckt werden und werden auf einem Ausdruck nicht benötigt.

#header, #main_navigation, #sub_navigation, #info, #ads, #portrait {
 display: none !important;
}

Der Zusatz „!important” sorgt dafür, dass die CSS-Angaben nicht von anderen Stylesheets überschrieben werden.

Anpassen des Schriftbildes

Im Gegensatz zum Web, wo serifenlose Schriften (Arial, Verdana, Tahoma, etc.)
aufgrund besserer Lesbarkeit bevorzugt verwendet werden, setzt man beim Druck eher auf Serifenschriften wie z.B. Times New Roman. Auch ändere ich das Schriftgrößenformat für den Druck gerne ab, und verwende die Einheit pt (Punkt), eine im Druck üblicherweise eingesetzte Schriftgrößeneinheit. Eine Größe von etwa 12pt ist gut lesbar.
Überschriften werden noch ein wenig größer gemacht, und schon steht der nächste Teil des Stylesheets:

html {
 font-family: "Times New Roman", serif !important;
 color: #000000 !important;
}
p {
 font-size: 12pt !important;
}
h1 {
 font-size: 15pt !important;
}
h2 {
 font-size: 14pt !important;
}
h3 {
 font-size: 13pt !important;
}

Anpassen von Hintergründen

Als letztes Setzen wir die Hintergrundfarben unserer noch angezeigten Elemente auf Weiß, und entfernen eventuell vorhandene Hintergrundbilder.

#content, .textabsatz, .infoxbox {
 background: #FFFFFF !important;
}

Fazit

Für die meisten Seiten reichen bereits diese kurzen Angaben, um die Seite für den Druck ausreichend anzupassen.
Unter Datei » Drucken findest du in nahezu jedem modernen Browser eine Druckvorschau, anhand welcher du dein Druckstylesheet während der Erstellung ständig überprüfen kannst.

Dieser Artikel wurde verfasst von Martin Reithmayer.
Der Artikel ist am 14.05.2007 um 18:22 Uhr veröffentlicht worden und wurde bislang 5 mal kommentiert.
Tags: CSS

Kommentar verfassen

Name (erforderlich) Email (erforderlich, wird nicht angezeigt) Website (optional) Sicherheitsabfrage (nur Zahlen eingeben)

Was ergibt Acht - Vier?

Kommentar(erforderlich)