Websiteentwicklung: CSS: Seitenmedien

Zurück zu Pseudoklassen, Pseudoelemente und erzeugte Strukturen |

Bei Seitenmedien wird der Inhalt auf einzelne Seiten, Folien, allgemein Darstellungsbereiche aufgeteilt. Gibt es also mehr Inhalt, als auf eine Seite paßt, wird es für das Darstellungsprogramm notwendig, einen Seitenumbruch durchzuführen, also weiteren Inhalt auf einer nächsten Seite unterzubringen. Mit den für Seitenmedien gedachten Eigenschaften kann ein Autor Einfluß auf Details der Darstellung bei solche Medien nehmen.

Vorausgesetzt werden dabei rechteckige Seiten. Bei Bedarf ist es sogar möglich, die Größe der Seite anzugeben, wobei der Autor natürlich nicht unbedingt davon ausgehen kann, daß der Leser auch Papier im passenden Format hat. Bei angegebener Größe drehen oder skalieren Darstellungsprogramme dann allerdings die komplette Darstellung, wenn das Blatt zu klein ist, statt wie bei endlosen Medien die Zeilenumbrüche einfach anzupassen. Dies kann wiederum die Lesbarkeit des Inhaltes durch zu kleine Schrift verschlechtern.

Festgelegt werden sogenannte Seitenboxen. Die Regeln für Seitenboxen werden mit der Regel @page notiert.

Die genaue Syntax der Regel @page ist ähnlich der von @media:
Die Regel @page beginnt mit der Zeichenfolge, die hier zwischen einfachen Anführungszeichen notiert ist:
'@page '.
Optional folgt dann ein Seitenselektor. Der Seitenselektor ist ein Name oder Schlüsselwort, um anzugeben, für welche Seiten die folgenden Angaben gelten sollen. Zum Seitenselektor siehe auch den Abschnitt über die Eigenschaft page. Es folgen dann in einem Deklarationsblock, also in geschweiften Klammern CSS-Anweisungen.

Direkt im Deklarationsblock kann der Randabstand angegeben werden, dazu werden die Eigenschaften margin-top, margin-right, margin-bottom, margin-left, und margin direkt ohne Selektor verwendet, Beispiel:

@page {
  margin: 11mm
}

Möglich sind auch Angaben für linke, rechte Seiten und für die erste Seite. Dazu werden Pseudoklassen notiert :left für linke Seiten, :right für rechte Seiten und :first' 'für die erste Seite. Beispiel:

@page :left {
  margin-left: 11mm;
  margin-right: 15mm
}
@page :right {
  margin-left: 15mm;
  margin-right: 11mm
}
@page :first {
  margin: 2cm
}

size - Seitengröße

Die Eigenschaft size kann innerhalb einer Regel @page angegeben werden und ist für die visuelle Darstellung von Seitenmedien anwendbar. Es gibt folgende Werte:

inherit: Geerbt
auto: Größe und Ausrichtung richten sich nach dem verfügbaren Blatt, der Initialwert
portrait: Die Ausrichtung wird so gewählt, daß die kürzere Seite horizontal ausgerichtet ist, die Größe richtet sich nach dem verfügbaren Blatt
landscape: Die Ausrichtung wird so gewählt, daß die längere Seite horizontal ausgerichtet ist, die Größe richtet sich nach dem verfügbaren Blatt
eine Längenangabe: Die Seitenbox ist quadratisch, Höhe und Breite entsprechen dem angegebenen Wert; Prozentwerte sind nicht erlaubt
zwei Längenangaben (mit Leerzeichen separiert): Der erste Wert gibt die Breite an, der zweite die Höhe; Prozentwerte sind nicht erlaubt

Beispiele:

@page {
  size: 210mm  297mm;  /* DIN A4, Breite, Höhe */
}

@page {
  size: 200mm;  /* Quadratisch, 20cm Kantenlänge */
}

@page {
  size: portrait;  /* Ausrichtung Portrait, Höhe größer als Breite */
}

marks - Schnittmarkierungen

Schnittmarkierungen dienen dazu, zu kennzeichnen, wo der Rand einer Seitenbox ist. Sie sind insbesondere nützlich, um das Papier auf die genaue Größe der Seitenbox zuzuschneiden. Anwendbar und sichtbar sind sie nur, falls Längenangaben für size verwendet werden. Diese Markierungen werden so gesetzt, daß sie die Seitenbox umschließen, sind also nach dem Schnitt auf die genaue Größe der Seitenbox gerade nicht mehr sichtbar, liegen also im abgeschnittenen Teil des Papieres.

Mit der Eigenschaft marks kann angegeben werden, welcher Typ von Markierung angegeben werden soll.

Die Eigenschaft kann innerhalb einer Regel @page angegeben werden und ist für die visuelle Darstellung von Seitenmedien anwendbar. Es gibt folgende Werte:

inherit: Geerbt
none: Keine Markierungen verwenden, Initialwert
crop: Schnittmarkierung, gibt an, wo die Seite geschnitten werden soll
cross: Kreuzmakierung, dient der Ausrichtung von Seiten relativ zueinander

Seitenumbrüche

Mit den Eigenschaften page-break-before, page-break-after und page-break-inside kann ein Seitenumbruch bewirkt werden. Für folgenden Inhalt wird dann also eine neue Seitenbox erzeugt. Die Eigenschaften sind anwendbar auf Blockelemente in visuellen Seitenmedien.

Mit page-break-before kann das Verhalten für Seitenumbrüche vor einem Element bestimmt werden, mit page-break-after für danach, mit page-break-inside für Seitenumbrüche innerhalb des Elementes.

Es gibt folgende Werte für page-break-before, und page-break-after: 'auto', 'always', 'avoid', 'left', 'right', 'inherit'.
Die Werte werden nicht vererbt. 'auto' ist der Initialwert.

Es gibt folgende Werte für page-break-inside: 'auto', 'avoid', 'inherit'.
Der Wert wird vererbt. 'auto' ist der Initialwert.

Die Werte haben folgende Bedeutungen:

inherit: Geerbt
auto: Ein Seitenumbruch wird weder gefordert noch unterbunden
always: Ein Seitenumbruch wird gefordert
avoid: Ein Seitenumbruch wird unterbunden
left: Die Anzahl der Seitenumbrüche ist so zu wählen, daß es mit einer linken Seite weitergeht
right: Die Anzahl der Seitenumbrüche ist so zu wählen, daß es mit einer rechten Seite weitergeht

page - benannte Seiten

Mit der Eigenschaft page von CSS 2.0 wird angegeben, zu welcher benannten Seite ein Element gehört. Die Eigenschaft wird vererbt und ist anwendbar auf Blockelemente in visuellen Seitenmedien.

Initialwert ist 'auto'. Ansonsten ist der Wert ein Identifizierer. Ein Identifizierer ist eine einfache Zeichenkette ohne Leerzeichen, Doppelpunkt oder sonst etwas, was mit der Syntax von @page in Konflikt geraten kann. Bei 'auto' wird die Seite automatisch bestimmt.

Der Identifizierer wird sowohl bei der Regel @page als Seitenselektor notiert als auch bei den Blockelementen mit inzeiligem Inhalt, für welche die Regel gelten soll. Ändert sich die benannte Seite von einer solchen Block-Box zur nächsten, so werden entsprechend passende Seitenumbrüche eingefügt.

Beispiel:

@page querformat {
  size: 297mm  210mm;  /* DIN A4, Breite, Höhe */
}
p.bildgross {
  page: querformat; page-break-before: always; page-break-after: always
}

Dies bedeutet dann, daß Absätze der Klasse 'bildgross' im Qerformat auf einer eigenen Seite im Format DIN A4 gedruckt werden sollen.

orphans, widows - Schusterjungen und Hurenkinder

Bei Seitenmedien kann es passieren, daß ein Blockelement auf zwei Seiten aufgetrennt werden muß. Als Schusterjungen (orphans) bezeichnet man die ersten Zeilen eines Blockes, die am Ende einer Seite nach vorherigen Blockelementen stehen, während der Rest des Blockes auf der folgenden Seite steht (oder auf den folgendenn Seiten). Umgedreht bezeichnet man als Hurenkinder (widows) die letzten Zeilen eines Blockes, die per Seitenumbruch auf die nächste Seite kommen.

Für einen Seitenumbruch kann nun angegeben werden, wieviele Zeilen dies jeweils mindestens sein müssen. Passen weniger davon auf die Seite, kommt der Block komplett auf die neue Seite. Situationen, wo der Block länger als eine Seite ist, können dazu führen, daß die Forderungen nicht erfüllbar sind, dann ist die Situation undefiniert.

Der Wert der Eigenschaften ist jeweils die entsprechende Zeilenanzahl, die nicht unterschritten werden soll. Eine solche Anzahl ist also eine nicht negative ganze Zahl. 'inherit' kann natürlich auch notiert werden.

Der Initialwert ist 2. Die Eigenschaft wird vererbt. Sie ist anwendbar auf Blockelemente bei visuellen Seitenmedien.

Beispiel:

p {orphans: 5; widows: 5}

Es sollen also Absätze nicht auf zwei Seiten verteilt werden, wenn dies zur Folge hätte, daß an einem Seitenende oder einem Seitenanfang weniger als 5 Zeilen des Absatzes stehen.

Zurück zu Pseudoklassen, Pseudoelemente und erzeugte Strukturen |

Hoch zu CSS |

Vor zu Praxis