Druck-Stylesheets Grundlagen

Gestalter schenken dem Design eines Webauftrittes große Aufmerksamkeit, eine echte Druckversion wird oft vernachlässigt. Aus Nutzersicht gibt es nichts ärgerliches, wenn der Ausdruck einer Internetseite sich auf gleich mehrere DIN A4 Seiten verteilt. Resultat sind abgeschnittene Textinhalte oder unnötige Grafiken und Werbebanner. Wenn man Glück hat, bleiben von 10 ausgedruckten Seiten 2 übrig, mit denen man halbwegs etwas anfagen kann.

Betreiber von Webangeboten sollten daher großen Wert legen, dass Inhalte einfach und leicht ausgedruckt werden können. Viele Content Management Systeme bieten vom Leistungsumfang spezielle Druckversionen an. Meist werden diese Druckversionen über umfangreiche Skripte erzeugt, diese sind aber meistens nicht notwendig. Im Grunde ist das Anlegen einer Druckversion mittels CSS mehr als simpel und ohne großen nennenswerten Zeitaufwand zu realisieren.

Einbinden von Mediatypen

Die Bereitstellung von Druck-Stylesheets lässt sich über verschiedene Methoden realisieren, entweder über eine separate CSS-Datei (print). Diese CSS-Datei wird mittels

innerhalb des <head>-Tags eines (X)HTML-Dokuments eingebunden. Wichtig ist das Media Attribut mit print anzugeben.

Wenn Sie nur eine CSS-Datei verwenden, besteht die einfache Möglichkeit über den CSS-Syntax import url(print.css) bzw. @media print die Druckausgabe anzusprechen.

Sollten Besucher der Website nun Inhalte ausdrucken wollen, wird die Stylesheet Datei vom Browser benutzt, um eine Druckansicht zu erzeugen.

Einfach ist besser – Druck-Stylesheets in der Praxis

Unnötiges ausblenden

Als erstes sollte überlegt werden welche Elemente überhaupt für die Druckversion gebraucht werden. Beim Ausdruck können Navigation, Formulare, Werbeelemente und weitere unnötige Elemente mit display:none entfernt werden.

(Anmerkung: die aufgeführten Selektoren sind natürlich nur ein Beispiel und sollten angepasst werden.)

Grundüberlegung: Serifen oder serifenlose Schriften

Das Wesentliche an einer Druckversion ist die Schrift. Die Wahl einer gut lesbaren Schrift ist ebenso eine Grundvoraussetzung für ein gutes Print-Dokument, wie die Überlegung welche Elemente einer Website in die Druckversion gehören. Für Druckversionen gilt, dass Serifen für den Fließtext besser geeignet sind als Grotesken. Serifen bieten den Vorteil, sie führen das Auge in Leserichtung und sorgen für schnell erfassbare Wortbilder. Bei der Wahl einer geeigneten Schrift sollte jedoch beachtet werden das gerade bei Websites die Auswahl an geeigneten Fonts eingeschränkt ist. Auf jeden Fall sollte man als Fall-Back auf Standardschriften zurückgreifen.

Serifen

Zu den websicheren Serifen gehört Times New Roman und Georgia. Zu Erwähnen sind noch die Vista-Schriften Cambria und Constancia. Wenn Sie Cambria oder Constancia einsetzen, sollten Sie auf jeden Fal, an eine Fall-Back Lösung für Websichere Schriften denken.

Serifenlose

Zu den Websicheren serifenlosen Schriften gehören die Arial, Trebuchet MS, Verdana, Lucida Grande beim Mac, unter Windows heißt die Schrift Lucida Sans Unicode. Auch an dieser Stelle möchte ich als optionale Ergänzung die Vista-Schriften Calibri, Candara (etwas kalligrafische Anmutung) Consolas und Corbel (nüchterne Grotesk die moderner wirkt) erwähnen.

Schriftgröße

Im Durcklayout hat sich der Standardwert 12pt als optimale Lösung für eine gute Lesbarkeit herausgestellt. Bei der Druckversion greifen wir auf die absolute Größe in Punkten zurück (pt). Die Verwendung von Pixel in der Druckversion liegt zwar nahe ist aber nicht zu empfehlen. Bei einem 1200 dpi –Drucker würde z. B. eine 12 Pixel große Schrift 0.01 Zoll groß gedruckt werden.

Schriftgröße und Schriftfamilie zusammengefast:

Hintergrund- und Schriftfarbe

Als nächstes sollte die Hintergrundfarbe für alle Elemente mit weiß definiert werden und die Schriftfarbe mit Schwarz. In der Druckversion besteht noch die Möglichkeit den Text in Blocksatzform zu bringen.

Seitenbreite vs. Druckformat und Seitenränder

Um die volle Seitenbreite zu nutzen, kann die Breite der Container in auto bzw. 100% ausgezeichnet werden. Abstände wie margin und padding werden mit Null festgelegt, somit wird sichergestellt, dass der Text die ganze Breite des Papiers nutzt.

Oder man legt mit der CSS-Referenz @page Seitenränder, Seitenformat und -ausrichtung fest.

In diesem Fall legen wir das Seitenformat auf DIN A4 im Hochformat mit Seitenrändern Oben 1 cm, Rechts 1 cm, Unten 1 cm und Links 2 cm an. Hier kann natürlich auch in für inch als Maßeinheit genutzt werden.

Links sind eines der wesentlichen Eigenschaften eines Online-Dokuments. Im Web werden Links durch eine farbliche Hervorhebung und/oder einer Unterstreichung als Hyperlink kenntlich gemacht. In der Druckversion kann auf Pseudoklassen wie :hover und :focus verzichtet werden. Allerdings ist es sinnvoll und es wird auch von Besuchern gewünscht, dass Links im Text eindeutig zu erkennen sind.

Wird die Website ausgedruckt ist nur die Textstelle markiert das hier ein Link auf der Website ist. In der Praxis hat sich der Unterstrich in der Druckversion durchgesetzt. Aus Sicht des klassischen Typografen sollte der Link besser fett dargestellt werden, schließlich handelt es sich doch um ein Druckerzeugnis. Dem Argument des Typografen kann ich zum Teil folgen. Die Druckversion einer Website entspricht eher dem Wunsch, den Inhalt einer Website auf Papier zu bringen und nicht ein perfektes Print-Erzeugnis zu bekommen. Eine optimale Druckversion sollte nach Möglichkeit auch Informationen beinhalten, die im Normalfall verloren gehen, wie zum Beispiel die URL eines Hyperlink. Die URL eines Hyperlink kann auch in der Druckversion angezeigt werden. CSS 2 bietet uns eine komfortable und einfache Lösung die URL auszuweisen. Hierzu ein kleiner Exkurs zum Thema genierter Inhalt und Pseudoklassen.

Mittels CSS generierter Inhalt

Vorweg ist grundlegend festzustellen, dass generierte Inhalte generell nur von Standardkonformen Browsern unterstützt werden. Der Internet Explorer beherrscht bis zur Version 7 diese Funktion leider nicht, Opera 5 und 6 nur teilweise.

Wie wird generierter Inhalt eingefügt

Pseudoelemente für automatisch generierten Inhalt sind :before und :after. Hiermit kann bestimmt werden ob vor oder nach einem Element automatisch Inhalt eingefügt wird. Hierbei kann es sich sowohl um einen statischen Text, Grafiken oder auch variable Inhalte handeln, wie z. B. ein Hyperlink.

Pseudoelemente und ihre Bedeutung

  • :before (Der Inhalt wird vor dem notierten Inhalt des Elements eingefügt)
  • :after (Der Inhalt wird nach dem notierten Inhalt des Elements eingefügt)
  • Mit content: wird innerhalb der geschweiften Klammern bestimmt, was vor, bzw. nach dem notierten Elemtentinhalt automatisch eingefügt wird.

Wie sieht das nun in der Praxis aus?

Im Folgenden wird die Zieladresse eines Hyperlink, mittels dem Pseudoelement :after in der Druckversion ausgewiesen.

Weitere Informationen des title Attribut können ebenso visualisiert werden

Wenn Sie das title-Attribut einsetzen, um Zusatzinformationen per Tooltipp zugänglich zu machen, gehen diese Informationen in der Druckversion verloren. Gerade bei Abkürzungen und Akronym denen das Attribut title zugefügt wurde, ist die Ausweisung in der Druckversion unter Web Usability und Web Accessibility Gesichtspunkten empfehlenswert. Über einen Selektor und die zugehörige Deklaration wird der Wert des title-Attributs ausgegeben. Der generierte Inhalt besteht aus einem Leerzeichen, einer öffnenden runden Klammer, dem Attribut-Inhalt und einer schließenden runden Klammer.

Beispiel:

Auszeichnung von Zitaten in der Druckversion

Das für kurze Zitate vorgesehene Element q und das für längere Zitat-Blöcke bestimmte Element blockquote lassen sich mit einem Attribut cite versehen, das eine Quelle in Form der URL beinhaltet. Mit generiertem Inhalt lässt sich der Attribut-Inhalt visualisieren.

Zusätzliche Informationen zur Website

Am Ende der Druckverison können zusätzliche Informationen nach der zuvor beschriebenen Methode bereitgestellt werden.

Zusammenfassung

Im Prinzip sollte das Web das Ausdrucken und Archivieren von Informationen überflüssig machen. Die Praxis zeigt jedoch das Inhalte ausgedruckt werden, weil Benutzer lieber Informationen in Papierform archivieren. Lange Dokumente werden ausgedruckt damit man sie nicht am Bildschirm lesen zu muss.

Druck-Stylesheets sollten fester Bestandteil einer jeden guten Website sein. Der allgemeine Gebrauchswert einer Website wird gesteigert und sorgt für zufriedene Benutzer.

Mit automatisch generierten Inhalt können wichtige Informationen wie Linkverweise, Abkürzungen und Acronyme in der Druckversion abgebildet werden und gehen somit nicht verloren.