Druckansichten mit Cascading Style Sheets (CSS)

Mittlerweile gehört ist es bei informativen Webseiten und Portalen Usus, separate Ansichten von einzelnen Seiten anzubieten, um auch beim Drucken ein ansprechendes Layout zur Verfügung zu stellen. Solche Druckansichten erhöhen den Service für den Besucher, der sich sonst umständliches Drucken in verschiedenen Ansichten erspart und z.B. Elemente, die gar nicht notwendig sind, mit ausdruckt. Die Druckansicht einer Webseite können mit Cascading Style Sheets realisiert werden. Dieser Artikel betrachtet verschiedene Aspekte zum Erstellen einer Druckansicht und gibt praktische Tipps und Hinweise für die Programmierung.

Alternativen zum Erstellen einer Druckansicht

Der Programmierer muss dabei selbst entscheiden, welche Variante er verwenden will. Ein separates Druckskript hat ein paar Nachteile, an die man denken sollte, aber was die Praxis angeht, bestehen keine erwähnenswerten Vor- oder Nachteile.

CSS für Druckmedien

Wenn man CSS-Kommandos über eine externe Datei einbindet, steht für das notwendige <link>-Tag das Attribut media zur Verfügung. Ein möglicher Wert dafür ist print. Gleichzeitig muss die dazugehörige CSS-Datei die Formatierungen zum Drucken enthalten.
Diese Datei hat für die normale Anzeige der Webseite keine Auswirkungen und kann neben den eigentlichen Definitionen mit angegeben werden. Um die Formatierungen in der "Druckdatei" zu testen, kann über das Browsermenü die Druckansicht aufgerufen werden. Damit kann man sich die Webseite ansehen, wie sie bei einem Druck aussehen wird. Die Druckansicht wird bei allen gängigen Browsern über den Weg Datei / Druckansicht aufgerufen werden. Wird der eigentliche Druckvorgang gestartet, stehen die CSS-Formatierungen automatisch zur Verfügung.

Allgemeines Schema:

Hinweis: Leider unterstützen nicht alle Browser diese Funktion vollständig und korrekt.

Verwendung eines Druck-Skriptes

Das allseits bekannte Internet-Lexikon "Wikipedia" ist ein praktisches Beispiel dafür, dass eine Druckansicht auch über ein separates Skript realisiert werden kann. Hat man einen Artikel aufgerufen, steht dem Besucher auf der linken Seite der Link "Druckversion" zur Verfügung. Dieser Link ruft eine neue Webseite auf, in der die Druckansicht des offenen Artikels angezeigt wird.
Diesem Skript wird der Titel des Artikels als Parameter übergeben. Nach dem Aufruf der Druckansicht kann der Druckvorgang nach der üblichen Vorgehensweise gestartet werden.

Beispiel:
normaler Link: http://de.wikipedia.org/wiki/Apollo_13
Druckversion des Artikels: http://de.wikipedia.org/w/index.php?title=Apollo_13&printable=yes

Ein kleiner Minuspunkt dieser Variante ist vielleicht, dass ein Mausklick mehr als bei der CSS-Druckdatei notwendig ist, um die Webseite auszudrucken. Durch diesen zusätzlichen Vorgang wird die Usability der Webseite u. U. speziell bei einem langsamen Internetzugang beeinträchtigt, da es eine Zeit dauern kann, bis die Daten an den Browser übertragen wurden.
Weiterhin muss auf der Haupt-Webseite ein Extra-Link eingefügt werden, der für den Besucher gut sichtbar sein muss. Wenn der Besucher den Link nicht findet oder nur schlecht erkennt, kommt er möglichweise gar nicht an seine Informationen oder muss die "Hauptseite" ausdrucken.

Allgemeine CSS-Befehle für Druckmedien

In der CSS-Version 2 wurden einige Befehle integriert, die zur Erstellung von Druckansichten von Webseiten dienen sollten. Allerdings sollte man nicht unbedingt auf diese Kommandos zurückgreifen, da nur der Opera-Browser die Befehle zum größten Teil unterstützt und der Internet Explorer sogar nur eines der Kommandos kennt.

Die folgende Tabelle zeigt eine Übersicht dieser Kommandos:

CSS-Befehl/Bereiche	Bedeutung
`@page`	Definition eines Seitenlayoutes
`size`	Höhe und Breite des Seitenlayoutes
`margin`	Abstand zwischen Seitenrand und Seiteninhalt
`marks`	Angabe von Schnitt- und Passermarken
`page-break-before`	Seitenumbruch vor einem HTML-Element
`page-break-after`	Seitenumbruch nach einem HTML-Element
`page-break-inside`	Seitenumbruch während eines HTML-Elementes
`orphans`	Verhindern von Seitenumbrüchen in Fließtext
`widows`	Zeilenanzahl von Fließtext nach Seitenumbruch

Seitenränder im Drucklayout

Jeder Browser legt für das Drucken eigene Maße für die Seitenränder auf dem Papier standardmäßig fest. Diese Angaben können mit Cascading Style Sheets nicht beeinflusst werden. Es wird empfohlen, trotzdem für die Inhalte zum Drucken einen Abstand zum Seitenrand anzugeben (CSS-Befehle margin bzw. padding), aber die Werte können auf 0 gesetzt werden. Dadurch steht trotzdem der maximal mögliche Raum zur Verfügung.
Bezüglich der Seitenränder ist zu beachten, dass die Browser im Normalfall eine Kopf- und eine Fußzeile mitliefern, in der Informationen wie das Druckdatum, der Titel der Webseite, die Seitenzahl und die URL angegeben werden. Bei einer CSS-Definition zum Seitenrand kann sich das Drucklayout mit diesen Angaben, wenn sie mit ausgegeben werden sollen, überschneiden.

Hintergrundfarbe und -bilder

In den Einstellungen der gängigen Browser ist es möglich das Drucken von Hintergründen (Bild oder Farbe) ein- und auszuschalten. Normalerweise ist diese Einstellung deaktiviert. Das ist auch gut so, denn sonst würde ohne Eingreifen des Nutzers der Tintenverbrauch beim Tintenstrahldrucker ins Unermessliche steigen und die Lesbarkeit der Webseite ist beeinträchtigt.
Allgemein gilt hier die Empfehlung, dass der Hintergrund beim Drucken immer transparent sein sollte. Dies wird durch das CSS-Kommando background-color:transparent gewährleistet. Wenn es sich beim Hintergrund um ein Bild handelt, lässt man einfach die Angabe background-image:url(...) weg.
Trotz der Standardeinstellung der Browser wird empfohlen, explizit Angaben zum Hintergrund zu machen.

Definition einer Schriftfarbe

Für das Drucken wird grundsätzlich die Schriftfarbe schwarz empfohlen. Den Webdesignern wird es nahegelegt, diese Schriftfarbe explizit anzugeben, obwohl die Browser Schriften generell schwarz drucken. Es ist nicht unüblich, dass wichtige Details, Aussagen, Informationen usw. auf einer Webseite über die Farbe hervorgehoben werden. Dazu gibt es verschiedene Optionen für das Drucklayout, wie man wichtige Teile trotzdem hervorheben kann.

Schriftart und Schriftgröße

Im Browser sind im Normalfall serifenlose Schriftarten wie Veranda oder Arial im Gebrauch, während man beim Drucken auch Schriften wie Georgia oder "Times New Roman" sehen kann. Dies gilt vor allem bei längeren Texten. Die Überschriften in Drucklayouts werden aber üblicherweise in serifenlose Schriftarten dargestellt.

Aufgrund der vielen möglichen Bildschirmauflösungen ist es bei der Betrachtung einer Webseite im Browser nicht unbedingt sinnvoll, Schriftgrößen in einer festen Einheit wie pt anzugeben. Je kleiner die Auflösung ist, desto größer werden die Textelemente automatisch. Beim Drucklayout ist es aber absolut vertretbar, Größenangaben mit festen Einheiten anzugeben.

Besonderheit bei Textabsätzen

Für einzelne Textabsätze gibt es für Drucklayouts zwei übliche Regeln, die zwar nicht unbedingt eingehalten werden müssen, es aber fast schon schlechter Stil ist, wenn man sie nicht beachtet:

Abstand zwischen zwei Textabsätzen

Wenn zwei voneinander unabhängige Textabsätze nacheinander folgen, ist es üblich, dass der Abstand eine Leerzeile beträgt. Mit Hilfe des CSS-Kommandos margin kann der Abstand individuell festgelegt werden.

Einrückung der ersten Textzeile

Bei Drucklayouts ist es ebenfalls üblich, dass die erste Zeile eines Textabsatzes eingerückt dargestellt wird. Durch die CSS-Eigenschaft text-indent wird eine Einrückung nach Bedarf angegeben. Beispiel:

p+p {margin-top:-1%; text-indent:2%}

Ausblenden nicht notwendiger Elemente

Beim Drucken einer Webseite steht die Information und der Inhalt der Webseite im Vordergrund. Schmückende Elemente wie Werbebanner, Eingabefelder, Search-Buttons usw. sind deshalb für den Druck nicht notwendig.
In diesem Zusammenhang ist es notwendig, für die Elemente, die nicht mehr gebraucht werden, eine eindeutige Kennzeichnung zu vergeben. Am einfachsten geht dies indem alle nicht notwendigen Elemente entweder mit einer eigenen Klasse (class="...") ausgezeichnet oder durch ein anderes Element umrahmt werden. Die Style Sheets bieten hierzu den Befehl display mit dem die Elemente dann versteckt werden können.

Anzeige von Links und deren Inhalten

Nehmen wir an, im Quellcode der Webseite wurde u.a. ein Hyperlink angegeben:

<a href="https://www.a-coding-project.de">Link zu a coding project</a>

Wenn die Webseite ohne weiteres Zutun ausgedruckt wird, würde nur der Text "Link zu HTMLWorld" angezeigt. Sollte der Leser des Drucks die dazugehörige Internetadresse nicht kennen, macht diese Information nicht viel Sinn.
Eine Abhilfe schafft hier die CSS-Eigenschaft content. Damit kann allgemein vor oder nach bereits bestehenden Inhalten weitere Elemente/weiterer Inhalt eingefügt werden. Ein Beispiel dafür ist das Ziel des Hyperlinks, was dadurch im Ausdruck mit angezeigt wird.
Es ist am sinnvollsten, das Ziel des Hyperlinks direkt nach dem eigentlichen Linktext mit anzuzeigen. Beispiel:

a:link:after { content: " (Link auf <" attr(href) ">) "; }

Weiterhin sollte bei Hyperlinks beachtet werden, daß man sie auch auf der Druckversion der Webseite erkennt. Die Beschreibung des Hyperlinks ist ein ganz normaler Text, also kann auch hier mit Attributen wie Schriftgröße, Schriftdicke, Kapitälchen usw. gearbeitet werden, um ihn gesondert zu kennzeichnen.

Individuelle Seitenumbrüche einfügen

Die bekannten CSS-Befehle zum Einfügen von Seitenumbrüchen stellt ein probates Mittel da, um unliebsame Unterbrechungen in der Darstellung von einzelnen Elementen der Webseite zu vermeiden bzw. zu beeinflussen. Beispiel:

<h2 style="page-break-before:always">Kleine Überschrift</h2>
<h2 style="page-break-after:avoid">Kleine Überschrift</h2>
<p style="page-break-inside:avoid">
In diesem Textabsatz ist es möglich, dass ein Seitenumbruch
eingefügt werden kann. Soll dies wirklich passieren?
</p>

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Kommentare mit CSS

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Druckansichten mit Cascading Style Sheets (CSS)

Über uns

Cookie-Einstellungen