Cascading Stylesheets
Stil mit <Stil>
Cascading Stylesheets
Stil mit <Stil>
Zur die Aufnahme von Eigenschaften für die Seitengestaltung wurde das Modell für die visuelle Formatierung erweitert.
Die Seitenbox ergänzt das Boxmodell, damit Autoren Papiergrößen, Ränder, Ausrichtung des Papiers usw. angeben können. Das Seitenmodell erweitert das Modell für die visuelle Formatierung, um Seitenumbrüche in das Modell aufzunehmen.
Das CSS2-Modell einer Seite gibt an, wie ein Dokument innerhalb eines rechteckigen Bereichs – der Seitenbox – zu formatieren ist.
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.
Während die Ausgabe auf dem Monitor und auch die Sprachausgabe als "fortlaufende" Ausgabe betrachtet werden kann, muss der Druck ein HTML-Dokument in eine oder mehrere Seiten unterteilen. Die Seitenausgabe erweitert das Modell der visuellen Formatierung um die Seitenbox und Seitenumbrüche.
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. Dies stellt aber nur eine Möglichkeit unter vielen dar. 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, bei denen es sich z.B. um Beschnittzeichen und eine Seitenbeschreibung handeln kann, anhand derer beim Falten und Beschneiden des Papiers die richtige Reihenfolge festgestellt wird.
Ein
Dokument kann das Papier für den Druck aus mehreren Papierkassetten beziehen
und ein Dokument kann in eine Datei ausgegeben werden.
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 Abmessungen, die Orientierung (Hochformat oder Breitformat) und die Ränder der Seite, z.B.
@page { size: 8.5in 11in; margin: 2cm }
Die Eigenschaften border und padding können nicht auf die Seite einer Druckausgabe angewendet 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.
Die Abmessungen der Seitenbox werden durch die size-Eigenschaft bestimmt. Die Abmessungen des Seitenbereichs sind die Abmessungen der Seitenbox ohne margin.
Die folgende @page-Regel definiert eine Seitenboxgröße von 21,0 x 29,7 mm und erzeugt einen Abstand (margin) von 2 cm zwischen den Rändern der Seitenbox und dem Seitenbereich:
@page { size: 21cm 29,7cm; margin: 2cm; }.
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).
Die Pseudoklassen :first, :left und :right wurden für die Seitenausgabe definiert, um dem doppelseitigen Druck gerecht zu werden.
size • marks • page-break-before • page-break-after • page-break-inside • page • orphans • widows • :left • :right • :first
| O5+ Version: CSS2 |
size gibt die Größe und Ausrichtung (Hoch/Querformat) der Seitenbox an. | length {1,2} | auto | landscape | portrait |
Die Größe der Seite kann absolut oder relativ angegeben werden. Bei einer relativen Angabe soll der Druck auf die Seitengröße angepasst werden.
length erzeugt eine absolute Seitenbox. Wenn nur ein Wert angegeben ist, setzt er sowohl die Breite als auch die Höhe der Box. Mit zwei Werten werden Breite und Höhe der Box spezifiziert.
auto ist die Voreinstellung und setzt die Seitenbox auf die Größe und Ausrichtung der Seite.
landscape überschreibt die Ausrichtung des Papiers. Die horizontale Kante ist länger als die vertikale Kante.
portrait überschreibt die Ausrichtung des Papiers. Die vertikale Kante ist länger als die horizontale Kante.
@page { size: auto;
margin: 10%; }
| Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Ja |
marks Beim professionellen Druck werden Beschnittzeichen außerhalb der Seitenbox gedruckt. Die Beschnittzeichen (crop marks) werden für die Ausrichtung des Papiers benutzt. Größe, Stil und Position der Beschnittmarken werden dem User Agent überlassen. | [ crop &| cross ] | none |
crop druckt Schnittmarken an den Stellen, die anschließend auf die tatsächliche Seitengröße beschnitten werden.
 |
cross druckt Passermarken (z.B. Passerkreuze und Siemenssterne). Diese Marken dienen in erster Linie zum Ausrichten der verschiedenen Farbseparationen. Im Zeitschriften- und Buchdruck werden Seiten auf große Bögen gedruckt, die anschließend auf die tatsächliche Seitengröße beschnitten werden. Anhand von Passer- und Beschnittmarken werden die Schneidegeräte ausgerichtet. |
| IE5+ (PC) M1 N6 O5+ Version: CSS2 Erblich: Ja |
page-break bestimmt, ob ein Seitenumbruch vor (before) oder nach (after) einem Element durchgeführt werden soll. | auto | always | avoid | left | right |
auto ist die Voreinstellung und erzwingt keinen Seitenumbruch.
always erzwingt stets einen Seitenumbruch vor/nach dem Element.
avoid vermeidet Seitenumbrüche vor/nach dem Element.
left veranlasst ein oder zwei Seitenumbrüche, so dass das Element stets vor/auf der linken Seite ausgegeben wird.
right veranlasst ein oder zwei Seitenumbrüche, so dass das Element stets vor/auf der rechten Seite ausgegeben wird.
| Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Ja |
page-break-inside bestimmt, ob innerhalb eines Elements ein Seitenumbruch stattfinden kann. | auto | avoid |
auto ist die Voreinstellung und erzwingt keinen Seitenumbruch.
avoid vermeidet Seitenumbrüche vor/nach dem Element.
| Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Ja |
page gibt eine bestimmte Seite an. | auto | identifier |
Wenn ein Blockelement mit Inlineinhalten eine Eigenschaft page aufweist, die sich vom vorangegangenen Block mit Inlineinhalten unterscheidet, werden ein oder zwei Seiten eingefügt. Die Boxen nach dem Seitenumbruch werden auf einer Seite des spezifizierten Typs ausgegeben.
auto ist die Voreinstellung und druckt Seiten entsprechend den Angaben in der @page-Regel.
identifier markiert eine bestimmte Seite, die in einem abweichenden Format ausgegeben werden soll.
In diesem Beispiel des W3C werden zwei Tabellen auf Seiten im Querformat ausgegeben. Wenn es möglich ist, sollen sie auf einer Seite gedruckt werden, auf keinen Fall allerdings auf einer Seite im Hochformat (portrait), obwohl das Dokument im Hochformat angelegt wurde (DIV:@page narrow {size: 9cm 18cm}):
@page rotated {size: landscape}
div {page: narrow}
table {page: rotated}
…
und im Dokument:
<div>
<table>...</table>
<table>...</table>
</div>
| O5+ Version: CSS2 Erblich: Ja |
orphans gibt an, wie viele Zeilen ein Absatz am Ende einer
Seite enthalten muss. widows gibt an, wie viele Zeilen ein Absatz am Anfang einer Seite enthalten muss. |
integer |
integer ist per Voreinstellung 2.
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+ Version: 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. 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. |
@page :left { margin-left: 4cm; margin-right: 3cm }
@page :right { margin-left: 3cm; margin-right: 4cm }
Alle Abstände betragen 2 cm, nur der Abstand von der Oberkante der ersten Seite beträgt 10 cm:
@page { margin: 2cm }
@page :first { margin-top: 10cm }