Glossar

Zur Übersicht

Print CSS

Für eine schön formatierte Druckausgabe bietet CSS die Möglichkeit, für verschiedene Medientypen unterschiedliche Layouts festzulegen. Dies geschieht entweder über ein externes Stylesheet oder über eine Media Queries (Medianabfrage), wobei letzteres übersichtlicher ist.

Für den Druck ist es sinnvoll, für positionierte Bereiche, Farbgestaltung und Schrift andere Formatierungen zu wählen.

Schriftformatierung

Es ist möglich, bei den Print-Styles komplett neue Schriften zu verwenden oder die verwendete Schrift umzuformatieren. Im Web werden allgemein größere Schriften verwendet. Diese sollten über die Print Media Query verkleinert und dem Druck angepasst werden. Somit spart man auch gleichzeitig noch eine Menge Papier und Druckfarbe.
Auf dem Display lassen sich serifenlose Schriften besser lesen, dennoch ist es für Drucklayouts vorteilhafter, Schriften mit Serifen zu verwenden, da sie im gedruckten Zustand für einen besseren Lesefluss sorgen.

Positionierung und Farbgestaltung

Auf der Webseite stehen das Bild und die Kontaktmöglichkeiten links vom Namen und Zitat.

In der Print-Version ist alles untereinander und mittig positioniert. Die Hintergrundfarben und die Box um das Zitat wurden ausgeblendet.

Ausblenden von Elementen

Auf der Webseite gibt es auf der rechten Seite eine Sprungnavigation.

Im Print-Layout entfällt die Sprungnavigation, da sie hier keinen Nutzen hat. Zusätzlich ist das Türkis etwas abgedunkelt und die weiße Schrift wird schwarz, damit diese auch in Graustufen noch gut leserlich ist.

Auf der Webseite werden hier Teaser im 2-spaltigen Layout mit Banderole und Bild verwendet.

Im Print-Layout entfällt die Teaser-Optik, das Bild und die Banderole. Stattdessen wird nur noch der Text untereinander ausgegeben. Die weiße Schrift wird zu einer schwarzen Schrift umformatiert.

Visualisierung des Verweisziels

Dies ist ein gutes Beispiel für den Umgang mit Links im Print-Layout.

Hier werden dann nur noch die Überschriften mit dem Teasertext und dem vollständigen Link ausgegeben. Das gesamte Element wurde somit auf das Wesentliche heruntergebrochen.

Auch Ankernamen, Titel-Attribute, Bildbeschreibungen sowie Zitat-Quellen und -Zeichen lassen sich durch bestimmte CSS-Definitionen so visualisieren.

Seitenumbruch und Absatzkontrolle

Auch ein manueller Seitenumbruch sowie auch eine Absatzkontrolle sind mit der Print-CSS möglich.
Man kann vor oder nach einem Inhaltsbereich fest definieren, dass eine neue Seite angefangen werden soll. Bei den oben gezeigten Beispielen wird es bei dem vorletzten Slider mit den Event-Teasern deutlich. Hier wurde mit einem manuellen Seitenumbruch gearbeitet, sodass die Publikationen erst auf der folgenden Seite abgebildet werden.
Mit der Absatzkontrolle kann man verhindern, dass einzelne Zeilen nicht am Ende (Schusterjunge) bzw. am Anfang (Hurenkind) einer Seite isoliert stehen.

Hochformat/Querformat

Muss ein relativ breites Layout auf ein Blatt Papier passen, kann man die Ausgabe auf dem Drucker im Querformat definieren. Dies könnte vor allem dann notwendig sein, wenn sich, wie im Beispiel unten, auf der Seite eine Tabelle mit vielen Spalten befindet.

Manipulation von Kopf- und Fußzeilen

Die Einstellungen bezüglich des Andrucks von Kopf- und Fußzeilen lassen sich mit HTML und CSS nicht beeinflussen. Ob diese mitgedruckt werden sollen, obliegt dem Benutzer des Browsers. Allerdings ist es möglich, Elemente, die nur im Print-Layout sichtbar sind, in den Bereichen durch Positionierung einzufügen.