Sep 2008
Webseiten machen auf einer A4-Seite selten einen guten Eindruck. Erst spezielle Stylesheets für den Druck formatieren die Webseite für die Ausgabe auf dem Drucker.
Während aber die Ausgabe auf dem Monitor und auch die Sprachausgabe fortlaufende Ausgaben sind, muss der Druck ein HTML-Dokument in eine oder mehrere Seiten unterteilen. Darum wurde CSS um Eigenschaften für die Seitengestaltung erweitert.
Das CSS2-Modell einer Seite gibt an, wie ein Dokument innerhalb eines rechteckigen Bereichs – der Seitenbox – zu formatieren ist. Die Seitenbox ergänzt das Boxmodell, damit Autoren Papiergrößen, Ränder, Ausrichtung des Papiers und Seitenumbrüche angeben können.
Zum Verständnis des Seitenmodells in CSS2 sollte nicht der typische Desktop-Drucker zum Vergleich herangezogen werden. Der Desktop-Drucker druckt in der Regel eine Seite auf das passende Papier. Im Offsetdruck hingegen kann eine Seite auf ein A4+-Papier – das ist ein Bogen, der einige Zentimeter größer ist als DIN A4 – meistens jedoch auf noch größere Bögen gedruckt werden.
Das Modell beinhaltet die Seitenausgabe, wie wir sie von den Desktop-Druckern kennen: Dokumente werden Seite für Seite auf jeweils ein einzelnes Blatt gedruckt. Dazu kommt der doppelseitige Druck, der zwei Seiten auf ein Blatt Papier druckt, und der Druck mehrerer Seiten auf ein Blatt oder einen Bogen. Zusätzlich werden Signaturen ausgegeben, z.B. um Beschnittzeichen und eine Seitenbeschreibung, anhand derer beim Falten und Beschneiden des Papiers die richtige Reihenfolge festgestellt wird.
Der Inhalt kann über die Seitenbox hinausgehen, wenn z.B. Bilder oder andere Elemente der Seite angeschnitten werden. Ein Anschnitt von Bildern, die über den Seitenrand hinausgehen sollen, wird durch einen negativen Abstand von der Seitenbox (margin) umgesetzt. Die jeweilige Realisierung ist dem User Agent – dem Druckertreiber – und einem Seitenschneider überlassen.
Autoren geben die Maße, die Orientierung, Ränder usw. der Seitenbox in der @page-Regel an. Eine @page-Regel besteht aus dem Schlüsselwort @page, einem optionalen Seitenselektor (gefolgt ohne Leerraum von einer optionalen Seitenpseudoklasse) und einem Block von Deklarationen (dem Seitenkontext). Die Seitenregel @page enthält die die Ränder der Seite, z.B.
@page { margin: 2cm }
Die Eigenschaften border und padding können nicht auf die Seite einer Druckausgabe angewendet werden.
Die Pseudoklassen :first, :left und :right wurden für die Seitenausgabe definiert, um dem doppelseitigen Druck gerecht zu werden.
Der Seitenselektor gibt an, auf welche Seiten die Deklarationen anzuwenden sind. Ein Seitenselektor kann z.B. die erste Seite, alle linken Seiten oder eine Seite mit einem spezifizierten Namen ansprechen.
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
Inhalte im @page-Modell liegen in Blöcken oder Boxen. Boxen liegen horizontal auf der Seite. Dabei folgt die Oberkante einer Box hinter der Unterkante der vorhergehenden Box. Anders als die zugrunde liegende Seite können die Boxen die Eigenschaften margin, border und padding aufweisen, die bei der Druckausgabe auch respektiert werden.
Die Boxen werden vertikal auf unterschiedliche Weise ausgerichtet: anhand der Ober- und Unterkanten oder anhand der Grundlinie (baseline) des Textes in den Boxen. Der Text innerhalb einer Box liegt in einem rechteckigen Bereich, der Inlinebox.
Die Breite einer Inlinebox wird durch den umfassenden Block bestimmt. Die Höhe einer Inlinebox wird durch die Zeilenhöhe festgelegt. Dabei kann eine Zeile höher werden als die Box, in der sie liegt (wenn z.B. die Boxen so ausgerichtet wurden, dass die Grundlinien registerhaltig werden).
CSS Generated Content for Paged Media Module W3C Working Draft 29 November 2011
nicht mehr Teil von CSS2.1
IE5+ M1 N6 O5+ S1 Erblich: Ja
page-break bestimmt, ob ein Seitenumbruch vor (before) oder nach (after) einem Element durchgeführt werden soll.
Nur Opera unterstützt alle Werte. Firefox und Safari ignorieren left und right, nicht aber avoid.
O5 Erblich: Ja
page-break-inside bestimmt, ob innerhalb eines Elements ein Seitenumbruch stattfinden kann.
O5+ CSS2 Erblich: Ja
Wenn ein Absatz am Ende einer Seite weniger als integer Zeilen aufweist, wird ein Seitenumbruch eingefügt und der Absatz wird vollständig auf der nächsten Seite gesetzt.
Wenn ein Absatz am Anfang einer Seite weniger als zwei Zeilen aufweist, wird ein Seitenumbruch am Beginn des Absatzes eingefügt und der Absatz wird vollständig an den Beginn der nächsten Seite gesetzt.
O5+ CSS2 Erblich: Ja
Beim Druck von doppelseitigen Dokumenten wie Büchern oder Zeitschriften gibt es grundsätzlich drei Arten von Seiten: die erste, die linke und die rechte Seite.
fist | left | right
first dient der Einrichtung der Deckseite.
left ist ein Pseudoselektor, der die linken Seiten eines Dokuments anspricht.
right wird zur Formatierung der rechten Seiten eines Dokuments benutzt.