Autor und Datum der Veröffentlichung:

Peter Rozek | Erste Veröffentlichung 28.10.2007

Aktualisiete Fassung:

20.04.2009

Themenbereich:

CSS-Technik, Standardkonformes Webdesign, Webentwicklung

Einleitung

Webdesigner schenken dem Design ihres Webauftritt 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. 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 Anleg en einer Druckversion mittels CSS mehr als simpel und ohne großen nennenswerten Zeitaufwand zu realisieren.

Die hier diskutierten Strategien sind als Empfehlung zu sehen und tragen dazu bei, den Gebrauchswert des Webangebots zu steigern.

Inhalte

  1. Einbinden von Mediatypen
  2. Make it simpel an stupid – Druckversion in der Praxis
    1. Unnötiges ausblenden
    2. Grundüberlagung: Serifen oder serifenlose Schriften
    3. Serifen
    4. Serifenlose
    5. Schriftgröße
    6. Hintergrund- und Schriftfarbe
    7. Seitenbreite
    8. Hyperlinks im Text
    9. Mittels CSS generierter Inhalt
    10. Weitere Informationen des title Attribut können ebenso visualisiert werden
    11. Auszeichnung von Zitaten in der Druckversion
    12. Zusätzliche Informationen zur Website
  3. JavaScript als alternative zum Pseudo Element für die Ausgabe der URL
  4. Probleme & Berücksichtigungen bei Print Styles
  5. Fertiges Druck-Stylesheet
  6. Zusammenfassung

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

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

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. Der Internet Explorer 5 in der Windows- oder der Mac-Version, sowie der Netscape 4 verweigern über import allerdings ihren Dienst.

@media screen, projection {
/* Layout und Formatierung Screendesign */
}
@media print {
/* Druckformatierung */
}

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

Make it simpel an stupid – 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.

#navigation, #formwizzard, #advertising {
display: none;
}

(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.

body {
font-family: Georgia, "Times New Roman", serif;
}

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.

body {
font: 12pt Cambria, Georgia, "Times New Roman", serif;
}

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.

body {
font: 12pt Corbel, Lucida Grande, Lucida Sans Unicode, Arial, serif;
}

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.

body {
font-size: 12pt;
}

Schriftgröße und Schriftfamilie zusammengefast:

body {
font: 12pt Georgia, "Times New Roman", serif;
} 

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.

body {
background: #fff !important;
color: #000;
text-align: justify; /* Blocksatz */
}

Seitenbreite

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

body, #content {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  }

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.

a:link, a:visited {
  background: transparent;
  color: #520;
  font-weight: bold;
  text-decoration: underline;
  }

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.

a[href]:after {
  content:" <"attr(href)">";
  background-color: inherit;
  color: #369;
  font-style: italic;
  }

In der Druckversion ihre Website sieht das Ergebnis nun so aus:
Web Accessibility Initiative Guideline 1.0 <http://www.w3c.de/Trans/WAI/webinhalt.html>

Screenshot der Druckversion von peter-rozek.de

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:

abbr[title]:after, acronym[title]:after {
  content: '(' attr(title) ')';
  background-color: inherit;
  color: #369;
  font-style: italic;
  }

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.

*[cite]:after {
  content:close-quote" (Quelle: "attr(cite)")";
  }
body {
  quotes: "\201E" "\201C" "\201A" "\2018"; 
  }
q:before, blockquote:before {
  content:open-quote;
  }
q:after, blockquote:after {
  content:close-quote;
  }

Zusätzliche Informationen zur Website

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

#container:after {
  content: "\ Alle Rechte vorbehalten. (c) 2007 Name, www.domain.de";
  color: #999 !important;
  font-size: 0.85em;
  border-top: 1px solid #999;
  }

JavaScript als alternative zum Pseudo Element für die Ausgabe der URL

Der Artikel "Improving Link Display for Print" bei A List apart zeigt am praktischen Beispiel, wie mit JavaScript eine optimale Druckausgabe erstellte werden kann, in der die Links am Fußende der Druckausgabe gesammelt ausgegeben werden. In Magazinen oder Büchern werden Zitate oder Quellverweise gesondert aufgeführt. Im Text werden die Stellen über Fußnoten kenntlich gemacht. Dieses Modell wurde von Aaron Gustafson aufgegriffen und mittels JavaScript auf die Druckausgabe einer Website übertragen.

Screenshot der Druckversion mit Fußmarken

Screenshot der Druckversion mit den URLs als geordnete Liste.

Vorteile:

  • Auch im Internet Explorer 6 und 7 können mit dieser Methode die URL in der Druckversion angezeigt werden.
  • Links und Zitate werden mit einer Fußnote versehen. Die Links werden am Ende des Dokuments in einer geordneten Liste angezeigt.
  • Bei langen URLs oder sehr vielen URLs kann der Inhalt einer Druckversion schwer lesbar werden. Durch die Fußnoten bleibt die Lesbarkeit erhalten!

Nachteil:

Funktioniert nur mit aktiviertem Javascript.

Probleme & Berücksichtigungen bei Print Styles

Bei der Umsetzung von Druckerstyles sollten einige Dinge berücksichtigt werden.

  • Über den Browser können keine Hintergundgrafiken und –farben gedruckt werden.
  • Der Internet Explorer 5 in der Windows- oder der Mac-Version, sowie der Netscape 4 verweigern die Druckausgabe wenn die CSS-Datei mittels CSS-Syntax import url( ) bzw. @media ... { } eingebunden wird. Die Verbreitung dieser Browser ist allerdings nur als sehr gering anzusehen und auf eine vollständige Unterstützung kann aus meiner Sicht verzichtet werden.
  • CSS generierter Inhalt wird vom Internet Explorer bis zur Version 7 nicht beherrscht. Mit dem erscheinen des Internet Explorer 8 werden endlich auch Pseudo-Klassen unterstützt.

Fertiges Druck Stylesheet

Ein fast fertiges Druck-Stylesheet kann hier heruntergeladen werden. In dem Stylesheet müssen nur die jeweiligen Klassen geändert werden und z. B. die Überschriftengrößen und Farben definiert werden.

Druck-Stylesheet zum download (Dateiformat: txt, Größe 2 KB).

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.

Link Empfehlungen

Grundsätzliches zum Thema Printstylesheets

Interesssante Lösungen zum Thema Printstylesheets und weiterführendes

nach oben


Zugänglichkeiten fixer-, fluider oder elastischer Layouts

(vom 10.09.2007) Welche Vorgehensweise beim Layout eignet sich für die Gestaltung von zugänglichen Websites am besten? Jede Layout-Variante bietet Vor- und Nachteile. Wenn Sie eine zugängliche Website erstellen wollen oder müssen, sollte bereits in der Entwurfsphase berücksichtigt werden, mit welchem Layout der Entwurf umgesetzt werden kann.

Zugängliche Websites (Accessibility)

(vom: 30.07.2007) Mit einer Barrierefreien Webseite können Sie die Reichweite Ihres Webangebot stiegern! Barrierefreies Internet (Fachbegriff: Accessibility) bezeichnet Internet-Angebote, die von allen unabhängig von ihren körperlichen und/oder technischen Möglichkeiten uneingeschränkt genutzt werden können.
» über Accessibility.

Sprungmarken setzen und Zugänglichkeiten maskieren

(vom: 15.07.2007) Sprungmarken bilden ein nützliches Element in Dokumenten und unterstützen vor allem bei komplexen Dokumenten die schnelle Navigation und Zielfindung. Die dargestellten Empfehlungen dienen der Orientierung und dokumentierten einen Schritt in Richtung Usability und Barrierefreiheit zu gehen.

Checkliste barrierefreier Webanwendungen

(vom: 01.07.2007) Die Vorteile barrierefreier Webauftritte liegen klar auf der Hand und sind weitgehend anerkannt. Mit einer Checkliste zur Gestaltung barrierefreier Webanwendungen und Webauftritte können Autraggeber sicherstellen das Vorgaben erfüllt werden und die Agenturauswahl ein wenig erleichtert wird.
» zur Checkliste