CSS für Print-Medien

Ausdruck von Webseiten

CSS bietet die Möglichkeit, Formatierungen speziell für den Bedarf von Print-Medien zu formulieren. Das geht weit über die Möglichkeiten von Standard-HTML hinaus. Mit CSS ist es möglich, sowohl getrennte Webseiten für Monitor und Druck zu optimieren, als auch Kombi-Seiten je nach Medium unterschiedlich zu formatieren.
Cascading Stylesheets CSS Cascading Stylesheets
Medien-Regeln Getrennte CSS-Regeln für verschiedene Ausgabe-Medien
Stylesheets
Getrennte Stylesheet-Dateien für verschiedene Medien
media
Getrennte <style>-Elemente für verschiedene Medien
@media
Einzelne CSS-Anweisungen für verschiedene Medien
@page Seiten-Format, linke und rechte Seiten
size & margin Seitengröße und -Rand, Abstand (Einzug) und Rand
page-break Seiten-Umbruch
querformat Eigene Namen für Seitenformate
position Absolute und relative Position von Elementen
float Text fließt um andere Elemente
display Ein- und Ausblenden von Elementen: display und visibility
Verwandte Themen Layout für den Ausdruck optimieren, Druck mit Javascript

Medien-spezifische Formatierung
Es ist fast immer sinnvoll, verschiedene CSS-Regeln für die Ausgabe auf unterschiedlichen Medien festzulegen. Je nach gewünschter Reichweite der CSS-Regeln sind diese auf unterschiedliche Weise mit den Webseiten und den darin enthaltenen Elementen verknüpft. Jede dieser Varianten verfügt über die Möglichkeit, Medien-spezifische Regeln anzugeben.

♦ Details zur CSS-Anwendung auf 3 Ebenen der Reichweite 		Für die Anwendung gilt die gleiche Strategie wie für CSS allgemein:
• Am besten ist die zentrale Festlegung von Medien-spezifischen Regeln für alle Webseiten.
• Weniger effizient sind CSS-Regeln für einzelne Webseiten.
• Regeln für einzelne HTML-Elemente erfordern den größten Aufwand.
ReichweiteHTMLMedien-Auswahl
Viele (alle) Webseiten <link>-Element
(externe Stylesheet-Datei)		 media-Attribut
Eine Webseite <style>-Element media-Attribut
Ein HTML-Elementstyle-Attribut 
Eine CSS-Regel @media-Anweisung
Diese Seite bietet ein Kapitel für jede Ebene der Medien-spezifischen Formatierung. Klicken sie in eine Zeile der Tabelle, um direkt zum betreffenden Kapitel zu gelangen.
▲ Alle Kapitel dieser Seite demonstrieren Möglichkeiten, die gleiche Webseite sowohl für den Bildschirm als auch für den Ausdruck zu verwenden. CSS bietet dazu viele interessante Möglichkeiten.

▼ Alle Varianten stellen jedoch einen Kompromiss dar - zwischen der idealen Formatierung für den Monitor und jener für den Drucker. Bei detaillierter Ausarbeitung der CSS-Regeln nimmt der Aufwand rasch zu.

▼ Leider sind die meisten Web-Editoren nicht in der Lage, das Aussehen in einer der beiden Ausgabe-Varianten eindeutig anzuzeigen. Daher kann die Entwicklung teilweise nur 'blind' erfolgen, d.h. man muss die Seite jedesmal anzeigen und ausdrucken, um das Ergebnis zu kontrollieren. 		Alternative:
Eine sehr empfehlenswerte Alternative ist die doppelte Ausführung von Webseiten, deren Ausdruck wahrscheinlich ist:
▲ In diesem Fall werden 2 getrennte Seiten für Bildschirm und Drucker erzeugt. Das macht die Entwicklung rasch, einfach und übersichtlich.
▼ Auf der Bildschirm-Variante wird eine Druck-Taste angebracht, welche mit Hilfe von → Javascript die Druck-Variante der Seite ausdruckt und danach zur Bildschirm-Variante zurückkehrt.
▼ Bei jeder Änderung des Inhalts müssen beide Seiten synchron geändert werden. Das ist ein schwerwiegender Nachteil für Webseiten, die oft geändert werden.
▲ Die ideale Lösung für diesen Fall sind dynamische Webseiten: In diesem Fall wird der Inhalt zentral verwaltet und mit Hilfe eines Programms (Perl, PHP, Python, ..) automatisch auf mehrere Webseiten verteilt.
♦ Details zum Druck mit Javascript

Stylesheet-Dateien
Ein HTML <link>-Element kann zur Verknüpfung einer Webseite mit einer externen Stylesheet-Datei verwendet werden. Durch Angabe des media Attributs wird die Anwendung der Stylesheet-Regeln auf ein bestimmtes Medium ( screen, print, aural .) beschränkt. Steuerung durch verschiedene Stylesheet-Dateien:
<link rel="stylesheet" media="screen" href="moni.css" />
<link rel="stylesheet" media="print, embossed" href="druck.css" />
Durch Verknüpfung mit mehreren Stylesheet-Dateien wird die gleiche Webseite für verschiedene Ausgabe-Medien unterschiedlich formatiert. Wenn sie eigene CSS-Klassen erstellen, dann sollten sie diese in jeder der verknüpften Stylsheet-Dateien (gleich oder unterschiedlich) definieren. Ansonsten steht die betreffende Klasse für eines der Medien nicht zur Verfügung.
Die CSS-Regeln für das <body>-Element sollten nach Möglichkeit in einer Stylesheet-Datei festgelegt und auf alle Webseiten angewendet werden. Gerade das <body>-Element muss für den Ausdruck meist anders formatiert werden: Als Hintergrund-Farbe für <body> und alle anderen größeren Flächen kommt nur weiss in Frage: Ansonsten sieht der Ausdruck auf Laserdruckern schmutzig aus, oder ist auf Tintendruckern unnötig teuer.

<style>-Elemente
In einem HTML <style>-Element werden die CSS-Regeln für diese Webseite festgelegt. Durch Angabe des media Attributs wird die Anwendung der darin festgelegten CSS Regeln auf ein bestimmtes Medium beschränkt.

Damit wird die gleiche Webseite für verschiedene Medien unterschiedlich formatiert. Im Beispiel wird die Hintergrund-Farbe der Seite (des HTML <body>-Elements) für den Bildschirm  hellblau  festgelegt, für den Ausdruck  weiß. 		Steuerung durch verschiedene <style>-Elemente:
<style type="text/css" media="screen">
/* <![CDATA[ */
body{background-color:#CCF;}
/* ]]> */
</style>

<style type="text/css" media="print">
/* <![CDATA[ */
body{background-color:#FFF;}
/* ]]> */
</style>
Wenn eine CSS-Anweisung für alle Medien gelten soll, dann gibt es 3 Möglichkeiten:

• Allgemein gültige CSS-Anweisungen werden in jedes <style>-Element eingetragen, z.B. sowohl in jenes für screen als auch für print 		• Man definiert ein weiteres <style>-Element ohne media-Attribut und trägt darin alle CSS-Anweisungen mit allgemeiner Gültigkeit ein.

• Man verwendet die ↓ CSS @media-Anweisung
Die kompliziert aussehenden Kommentar-Zeilen der Beispiele sind nur für → XHTML notwendig, stören aber auch in HTML nicht, weil sie ohnehin in CSS-Kommentare /* ... */ eingeschlossen werden. XML-konforme Bezeichnung für eingebettete Daten - in diesem Fall für CSS-Anweisungen:
<![CDATA[
...
]]>

@media
Die CSS-Anweisung @media beschränkt die Gültigkeit der nachfolgenden CSS-Regeln auf ein bestimmtes Medium. Die Gültigkeit dieser Einschränkung erstreckt sich auf alle CSS-Regeln innerhalb der nachfolgenden {} Klammern.

Diese Variante erlaubt es, innerhalb einer externen Stylesheet-Datei oder innerhalb eines <style>-Elements getrennte Regeln für verschiedene Medien zu definieren. In diesem Fall darf jedoch die Gültigkeit der Datei bzw. des <style>-Elements nicht durch ein ↑ media-Attribut eingeschränkt werden !

@media Vorsicht ! - Funktioniert nicht mit allen Browsern / Versionen !
<style type="text/css">
/* <![CDATA[ */
@media screen, handheld
{
body{background-color:#CCF;}
}
@media print
{
body{background-color:#FFF;}
}
/* ]]> */
</style>

@page
Die CSS-Anweisung @page legt Regeln zur Formatierung der Druck-Seite fest.
Definieren sie hier die ↓ Größe (size, meist für → A4 wie im Beispiel rechts) und die Ränder.
Lassen sie genügend Rand frei, denn die meisten gängigen Drucker können nicht bis zum Rand ('abfallend') drucken !

Die Regeln einer @page-Anweisung bleiben am Bildschirm ohne Wirkung.

♦ Details zu den Standard-Formaten von Papier-Seiten 		Ausdruck auf einer A4-Seite:
<style type="text/css">
/* <![CDATA[ */
@page { size:210mm 297mm;
margin-top:15mm;
margin-bottom:15mm;
margin-left:20mm;
margin-right:20mm;
}
/* ]]> */
</style>
Unterschiede für rechte und linke Seiten:
Wenn sie ein Druckwerk binden, dann ist es sinnvoll, Innen- und Außenränder unterschiedlich zu formatieren.
@page { size:...; margin...;}
@page :left { size:...; margin...;}
@page :right { size:...; margin...;}

Seitengröße und -Rand:   size, margin, padding, border

size

Die CSS-Eigenschaft size definiert die Größe der Druckseite. Sie wird normalerweise innerhalb einer ↑ @page-Anweisung verwendet.
• Für die Standard-Größe → A4 geben sie als Wert einen von {auto,portrait,landscape} an.
• Für die absolute Festlegung geben sie Breite und Höhean, durch Leerzeichen getrennt. Als Einheit wird sinnvoll cm oder mm verwendet.
Rechts im Beispiel die Maße einer Standard A4-Seite. 		Einstellung der Seiten-Größe mit CSS:
size:auto;
size:portrait;
/* A4-Seite: */
size:21.0cm 29.7cm;
size:210mm 297mm;

margin

Die CSS-Eigenschaft margin regelt den Außen-Rand um ein beliebiges Element, d.h. seinen Abstand vom parent-Element.

• Eigenschaft margin erzeugt den gleichen Rand rund um das Element.
• Die Eigenschaften margin-top,margin-bottom,margin-left,margin-right erlauben die getrennte Einstellung der 4 Ränder.

Übliche PC-Drucker können nicht bis zum Rand (abfallend) drucken - Lassen sie sicherheitshalber etwas mehr Rand frei, als ihr eigener Drucker gerade noch schafft !

♣ Tipp: Die CSS-Eigenschaft margin lässt sich nicht nur auf @page Seiten sondern auf fast alle HTML-Elemente anwenden. Damit lässt sich z.B. ein Einzug genau festlegen. 		Einstellung des Außen-Rands mit CSS:
margin:0px;
margin:3mm;
margin:5mm; margin-left:1mm; margin-right:1mm;
<div style="margin-left:1cm;">
Einzug links !
</div>

padding

Die CSS-Eigenschaft padding regelt den Innen-Rand eines Elements, d.h. den Abstand aller innerhalb liegenden child-Elemente. Der erzielte Effekt ist identisch mit jenem von margin, wirkt jedoch in die umgekehrte Richtung.
Wenn in einem übergeordneten parent-Element ein padding und in einem seiner child-Elemente ein margin festgelgt wird, dann addieren sich die beiden Abstände. 		Einstellung des Innen-Rands mit CSS
<div style="border:1px solid blue; padding:2mm;">
child-Element
</div>

border

Die CSS-Eigenschaft border regelt die Umrahmung eines Elements. Damit lässt sich ein sauberer Rand um jedes beliebige Element ziehen. Farbe, Aussehen ung Stärke lassen sich getrennt einstellen, die 4 Ränder lassen sich auch unterschiedlich formatieren.
♦ Details dazu in jeder CSS-Referenz unter dem Stichwort border
<div style="border:1px solid blue;">
Mustertext
</div>

Seiten-Umbruch

page-break-before

Die CSS-Eigenschaft page-break-before bewirkt vor dem entsprechenden Element einen Seiten-Umbruch ('neue Seite') beim Ausdruck. Auf Bildschirm-Seiten gibt es keinen Seiten-Umbruch, dort werden lange Seiten bei Bedarf auf- und ab-gerollt (scroll).

Wenn kein Umbruch angegeben wird, dann wird beim Erreichen der ↑ Seiten-Größe (size) automatisch die nächste Seite begonnen.

Optionale Argumente für alle page-break-Eigenschaften:
always (immer), avoid (hier nicht), left (neue Seite links), right (neue Seite rechts), inherit (vom parent-Element erben).
<div>
Letzte Zeile der alten Seite
</div>

<div style="page-break-before:always">
Erste Zeile der neuen Seite
</div>

page-break-after

Die CSS-Eigenschaft page-break-after bewirkt im Ausdruck einen Seiten-Umbruch nach dem entsprechenden Element. Die Anwendung erfolgt sinngemäß so wie für page-break-before
<div style="page-break-after:always">
Alte Seite
</div>

<div> Neue Seite </div>

page-break-inside

Die CSS-Eigenschaft page-break-inside kann einen Seiten-Umbruch innerhalb eines Elements unterbinden. Aus der Textverarbeitung ist dieses Verhalten von der Option 'Absatz-Zeilen nicht trennen' bekannt.
<div style="page-break-inside:avoid">
Zeilen nicht trennen !
</div>
@media Vorsicht ! - Diese Eigenschaften funktionieren nicht mit allen Browsern / Versionen !

Benannte Seitenformate
Benannte Seitenformate
CSS erlaubt die Festlegung von Namen für verschiedene Formate von Druckseiten. In der Praxis wird meist Hochformat (portrait) oder Querformat (landscape) verwendet.
Im Beispiel wird der Name querformat für eine Druckseite festgelegt.
Danach wird eine eigene CSS-Klasse querdiv erstellt. Das vorangestellte div bewirkt, dass diese Klasse nur auf <div>-Elemente angewendet werden kann. In den Regeln für die Klasse können natürlich zusätzlich alle anderen CSS-Eigenschaften festgelegt werden.
<style type="text/css">
@page querformat {size:landscape;}
div.querdiv {page:querformat;}
</style>
HTML-Anwendung für Druck im Querformat:
<div class="querdiv">...</div>

Positionierung
Mit den hier vorgestellten CSS-Eigenschaften kann man die Position von HTML-Elementen gezielt steuern.

position

Diese CSS-Eigenschaft gibt an, von welchem Referenz-Punkt die Position eines Elements berechnet werden soll:
absolute bezieht sich normalerweise auf die linke obere Ecke des <body>-Elements.
relative bezieht sich jenem Punkt, an dem das Element ohne Positionierung beginnen würde.

left, top

Diese Eigenschaften geben den Abstand des Elements vom Referenz-Punkt an: left wird von links nach rechts gerechnet, top von oben nach unten (!). Damit wird der Startpunkt (links oben) des Elements festgelegt.

width, height

Diese Eigenschaften geben Breite und Höhe eines Elements an. Sie können auch ohne Angabe der Position verwendet werden. Wenn sie nicht festgelegt werden, dann werden sie vom Browser automatisch eingestellt.

Numerische Angaben für left,top,width,height
mm, cm, % (relativ), pt (Punkt für Schriften)
Die Einheit px (Pixel = Bildschirm-Punkt) ist nur für Monitor-Ausgabe sinnvoll, nicht für den Ausdruck !
Die Einheit pt (Punkt = 1/72 Zoll) ist nur zur Angabe der → Schrift-Größe sinnvoll.
Für Gleitkommazahlen verwenden sie einen Komma-Punkt !

z-index

Durch Einstellung der Position ergibt sich meist eine zumindest teilweise Überlagerung mehrerer Elemente. Die Eigenschaft z-index bestimmt die Reihenfolge der Überlagerung zwischen Hintergrund (wird abgedeckt) und Vordergrund (wird dargestellt). 		Live-Demonstration: Testen sie die Positionierung:
left
top
width
height

HTML-Code:
<div style="position:relative;
left:0px; top=0px;
width:100px; height:100px;">
Test
</div>

So sieht das Ergebnis aus:
(Die Original-Position ist grau unterlegt):
Test

♦ Details auf einer eigenen Webseite zur CSS-Positionierung

Umfließender Text
Die CSS-Eigenschaft float steuert das Umfließen eines Elements (meistens einer Grafik) durch andere Elemente (meist Text).
Mögliche Werte sind left,right

Die Anweisung clear beendet das Umfließen.
<img style="float:left;" />
Die nachfolgenden Elemente umfliessen das Bild.
<div style="clear:both;"> Darunter </div>

Sichtbarkeit ein- und ausblenden
Die CSS-Eigenschaften display,visibility steuern die Sichtbarkeit.

Beispiel: Es ist sinnvoll, im Ausdruck alle interaktiven Elemente (Bildschirmtasten, Auswahl-Optionen, Markierungs-Kästchen, ...) unsichtbar zu machen, da sie auf Papier keinen Sinn ergeben.

Die Wirkung der beiden CSS-Eigenschaften wird mit einem kleinen Javascript-Programm demonstriert. Klicken sie im Beispiel rechts auf eine der CSS-Klassen.
EigenschaftWert
display inline none
visibility visible hidden
Standard

Text vorher
<div>
  Steuern sie Live die
  Sichtbarkeit dieses Hinweises !
</div>
Text nachher
► Mit display:inline oder mit visibility:visible wird ein Element angezeigt.

► Mit display:none verschwindet das Element und 'macht Platz', d.h. die nachfolgenden Elemente rücken nach. 		► Mit visibility:hidden verschwindet das Element, sein Platz im Layout bleibt jedoch erhalten.

♦ Details dazu in den Kapiteln CSS Sichtbarkeit und Javascript @ style-Objekt
Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   CSS   >   Print-Medien