CSS: Seitendefinition
In CSS Level 2 werden erstmals Eigenschaften sowie ein Aufruf zur Definition der Seite an sich beschrieben. Mit ihnen soll es möglich sein, beispielsweise einen Ausdruck des Dokuments genau zu beschreiben, um so bessere Resultat zu erzielen.@page-Aufruf
Der@page-Aufruf dient, wie in CSS - Aufrufe beschrieben, der Beschreibung des Dokumentes, wenn dieses Seitenumbrüche enthält. Dies ist beispielsweise dann der Fall, wenn das Dokument ausgedruckt wird. Zur (unterschiedlichen) Definition der Seiten (linke und rechte Seite) stehen dazu die folgenden Eigenschaften und Pseudo-Klassen zur Verfügung::left, :right und :first Pseudo-Klassen, margin's, marks und size
Dazu werden diese Eigenschaften hinter dem
@page-Aufruf innerhalb von geschweiften Klammern notiert. Alles was innerhalb dieser Klammen steht, dient dann der Beschreibung der Seite(n).Des Weiteren kann jeder
@page-Aufruf einen Namen erhalten. Dieser wird direkt nach dem Aufruf notiert und dient als Referenz(-Name). Mit diesem Namen kann nachher auf diesen bestimmten Aufruf verwiesen werden. Beispiel:
@page MeineSeitenDefinition { ... }
Wird kein Name definiert, so gilt dieser Aufruf automatisch für alle Elemente.marks
Diemarks-Eigenschaft beschreibt die Art der Seiten-Marke und somit wie der Seiten- bzw. Elementinhalt behandelt werden soll. Dazu können die beiden Werte cross und crop notiert werden. cross(-Marken) dient zur Ausrichtung. crop(-Marken) beschreibt an welcher Stelle die Seite getrennt/umgebrochen werden soll. Beispiel:
@page { marks: cross crop; }
page-break-after und page-break-before
Die Eigenschaftenpage-break-after und page-break-before beschreiben den Seitenumbruch vor (page-break-before) bzw. nach (page-break-after) einem Element. Dazu können die folgenden Werte notiert werden:
-
auto- Es wird automatisch entschieden, wo der Umbruch erfolgt. -
always- Der Umbruch wird vor bzw. nach dem Element unbedingt eingefügt. -
avoid- Ein Umbruch vor bzw. nach einem Element sollte unbedingt vermieden werden. -
left- Fügt eine oder zwei (leere) Seiten vor bzw. nach dem Element ein, sodass das Element unbedingt auf einer linken Seite ist. -
right- Fügt eine oder zwei (leere) Seiten vor bzw. nach dem Element ein, sodass das Element unbedingt auf einer rechten Seite ist.
P.langerAbsatz { page-break-before:always;
page-break-after:left; }
page-break-inside
Diepage-break-inside-Eigenschaft beschreibt, ob und wie ein Umbruch innerhalb eines Elementes erfolgen darf. Dazu können die Werte avoid und auto notiert werden. auto besagt, dass der Umbruch automatisch dort gesetzt wird, wo es sinnvoll ist (am Ende der Seite). avoid bedeutet, dass ein Umbruch innerhalb dieses Elementes zu vermeiden ist. Falls nötig, werden dann leere Zeilen eingefügt, sodass der Inhalt des Elements komplett auf die nächste Seite passt. Beispiel:
P.sehrLang { page-break-inside: avoid; }
page
Diepage-Eigenschaft verbindet ein Element mit der Definition der Seite. Dazu wird als Wert der Name des @page-Aufrufes notiert mit dessen Eigenschaften das Element belegt werden soll. Wird das Element dann beispielsweise ausgedruckt, so sollte der Inhalt auf eine Seite kommen, deren Eigenschaften mit denen des referenzierten @page-Aufrufes übereinstimmend sind. Beispiel:
@page Kasimir { margin: 3cm 4cm; }
P.a { page:Kasimir; }
/* P.a wird nur auf Seiten mit einem Margin von 3cm / 4cm
ausgegeben */
orphans
Dieorphans-Eigenschaft beschreibt die Anzahl der Zeilen eines Absatzes, die am Ende einer Seite mindestens frei gehalten werden müssen. Der restliche Text des Absatzes soll dann auf der nächsten Seite weitergeführt werden. Als Wert wird dazu die Anzahl der Zeilen angegeben. Beispiel:
P.AmSeitenEnde { orphans: 5; }
size
Diesize-Eigenschaft beschreibt die Größe bzw. Form der Seite. Als Werte können dazu die folgenden verwendet werden:
- Längenangabe - Beschreibt die Seite mit einer exakten Größe. Dabei können entweder ein oder zwei Werte notiert werden. Wird ein Wert notiert, so gilt dieser für Höhe und Breite. Werden zwei Werte notiert, so gilt der erste Wert für die Breite und der zweite für die Höhe.
-
auto- Der Inhalt bzw. die Seiten-Box wird automatisch der Größe des Ausgabeblattes angepasst. -
portrait- Die Höhe und Breite der Seiten-Box werden der Größe des Ausgabeblattes angepasst und der Inhalt wird im Hochformat (die kurzen Seiten sind horizontal) dargestellt. -
landscape- Die Höhe und Breite der Seiten-Box werden der Größe des Ausgabeblattes angepasst und der Inhalt wird im Querformat (die langen Seiten sind horizontal) dargestellt.
@page Bild { size:landscape; }
@page Text { size:portrait; }
@page { size: 20cm x 29cm; margin:auto; }
widows
Diewidows-Eigenschaft beschreibt die Anzahl der Zeilen eines Absatzes, die am Anfang einer Seite mindestens frei gehalten werden müssen. Als Wert wird dazu die Anzahl der Zeilen angegeben. Beispiel:
P.AmSeitenAnfang { widows: 5; }
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Weiterlesen: ⯈ Benutzereigenschaften
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project