 |
Nachdem wir im Artikel Medienspezifische CSS darauf eingegangen sind, wie sich Stylesheets für verschiedene Ausgabemedien angeben lassen, beschäftigen wir uns nun damit, wie solche Stylesheets für den Print-Bereich aussehen sollten. Zusätzlich werden wir zum Schluss einige allgemeine Tipps für ausdruckbare Seiten geben.
Usability
Denn indem Sie Ihre Seiten sinnvoll ausdruckbar machen, erhöhen Sie die Usability auf eine ganz besondere Weise: viele Benutzer lesen einfach lieber auf Papier als am Bildschirm. Diesem Wunsch kommen Sie dadurch entgegen, was gerade bei längeren Texten ziemlich ins Gewicht fällt. Zwar ist der Surfer dadurch erst einmal weg von Ihrer Site und den ganzen schönen Flimmerbannern. Insgesamt jedoch erhöhen Sie dadurch die Zufriedenheit Ihrer Besucher.
CSS für den Print
Bevor wir uns damit beschäftigen, welche Anforderungen an druckbare Seiten gestellt werden, zunächst noch etwas CSS-Theorie:
Im <style>-Bereich für Print-spezifische CSS können Sie die schon bekannten Anweisungen, z.B. für Schriftfarbe, Schriftgröße oder Schriftart, wie gewohnt benutzen. Ihnen stehen jedoch einige zusätzliche Angaben zur Verfügung: Sie können das Seitenformat definieren, auf dem Sie drucken möchten. Das geht so:
Seitengröße
<style type="text/css" media="print">
@page {
size: 8cm 9cm;
}
</style>
Erlaubt sind hier als Werte auch auto (automatische Auswahl), portrait (Standard-Hochformat) und landscape (Standard-Querformat). Leider jedoch wird die size-Angabe von heutigen Browsern konsequent ignoriert.
Seitenumbrüche steuern
Zusätzlich gibt es im Bereich der Print-spezifischen CSS die Möglichkeit, vor oder nach einem Element einen Seitenumbruch zu erzwingen. Mit folgendem Code z.B. wird festgelegt, dass vor jeder Überschrift der ersten Ebene ein Seitenumbruch eingefügt wird:
h1 {
page-break-before: always;
}
Die analoge Eigenschaft, um einen Seitenumbruch nach einem Element einzufügen, heißt page-break-after.
Mit Gegensatz zur @page-Angabe werden diese beiden Angaben von aktuellen Browsern unterstützt.
Weitere Angaben
Es gibt noch weitere CSS-Angaben speziell für den Druck, die jedoch leider von aktuellen Internet Explorern und Mozillas ignoriert werden. Eine Übersicht finden Sie bei SelfHTML.
Seiten für den Druck optimieren
So viel zur CSS-Theorie. Begeben wir uns nun in die Praxis: wie wird eine Seite real für den Ausdruck optimiert?
Zunächst ein Hinweis zum Testverfahren: Wenn Sie nach jeder Änderung Ihre Seite erneut zu Testzwecken ausdrucken müssen, wird die Prozedur sehr zeit- und kostenintensiv. Besser ist es, die Druckvorschau der Browser zu verwenden. Sie liefert in der Regel eine recht exakte Vorstellung von dem, was der Drucker später ausgeben wird.
Layer-basierende Sites
Wenn Ihre Site auf Layern basiert, ist die Erstellung einer Druck-optimierten Version nicht allzu schwierig. Sie sorgen einfach dafür, dass die Teile der Seite, die z.B. das Navigationsmenü enthalten, schlicht und einfach verschwinden. Sie setzen dazu die display-Eigenschaft via CSS auf den Wert none.
Voraussetzung dafür: die einzelnen Seitenelemente müssen tatsächlich sinnvoll auf verschiedene Layer aufgeteilt sein.
Wichtig ist dann nur noch, dass die Layer im Quelltext in der Reihenfolge stehen, in der sie auch ausgedruckt werden sollen.
Wir haben dazu ein Beispiel entwickelt. Es zeigt ein auf Layern basierendes Layout mit Navigationsmenü und einigen Spielereien. Probieren Sie einmal die Druckvorschau aus, um das Ergebnis des oben beschriebenen Verfahrens zu sehen.
Auf Tabellen basierende Sites
Layouts, die auf Tabellen basieren, sind nur sehr schwer für den Ausdruck zu optimieren. Sie können mit medienspezifischen Stylesheets dafür sorgen, dass z.B. das Navigationsmenü verschwindet, was aber auch wiederum eine Formatierung der Tabelle mit CSS voraussetzt. Optimal ist diese Lösung also nicht. Ihnen bleibt dann nur, die allgemeinen Hinweise (siehe unten) so gut wie möglich zu beachten.
Dagegen gibt es, zumindest wenn Sie mit einem CMS arbeiten, noch eine andere Alternative: Sie verwenden einfach ein Alternativ-Template für die Druck-Seiten, das ohne komplexe Layout-Strukturen auskommt. Dieses Template kann dann via Link von einer normalen Seite aus aktiviert werden. AboutWebDesign z.B. verwendet diese Technik.
Allgemeine Hinweise
Unabhängig von der Art und Weise, wie Sie die Seiten druckbar machen, gibt es einige allgemeine Tipps und Regeln, die Sie beachten sollten:
- Der Hintergrund der Seiten sollte weiß sein, die Schriftfarbe Schwarz.
- Probieren Sie, die Seitenränder, vielleicht dabei auch nur den linken, mit
margin bzw. margin-left etwas zu verbreitern. Das kann edel und aufgeräumt wirken.
- Verwenden Sie keine zu große Schriftgröße: auf Papier liest es sich besser als auf dem Monitor.
- Zur Wahl der Schriftart: Serifenlose wie Verdana sehen auch auf Papier gut aus, häufiger im Gebrauch sind jedoch Schriften wie die Times New Roman. Im Druck-Bereich gelten letztere sogar als besser lesbar.
- Im Gegensatz zur Bildschirmausgabe sieht auf Papier auch die kursive Auszeichnung bestimmter Stellen gut aus.
- Farben sollten nicht vorausgesetzt werden. Nicht jeder hat einen Farbdrucker, in vielen Büros stehen lediglich Schwarzweiß-Laser.
- Abbildungen nur dann, wenn sie auch nötig sind. Ansonsten verschwenden Sie Tinte / Toner Ihrer Benutzer.
- Die Unterstreichung von Hyperlinks sollte in der Druckversion entfernt werden. Wenn Sie ein CMS verwenden oder die nötige Zeit für eine manuelle Bearbeitung haben, können Sie die URLs am Ende der Seite auch separat angeben.
- Es ist sinnvoll, am Anfang der Druckversion die URL der Bildschirm-Version anzugeben.
|
|
|
|
Sie wollen diese Seite ausdrucken? Dafür haben wir eine spezielle Druckversion ohne grafische Elemente entwickelt! |
|
|
Einführung in CSS bei HTMLWorld.
|
|
