SELFHTML: CSS / Style-Sheet-Angaben / Seitenlayout und Seitenumbruch
Description: (SELFHTML 7.0) Übersicht zu CSS-Style-Sheet-Angaben, um print-orientierte oder bildschirmseiten-orientierte Dokumente zu formatieren.
Keywords: SELFHTML, HTML, CSS, Style-Sheets

SELFHTML/Quickbar CSS Style-Sheets Style-Sheet-Angaben

| ## Style-Sheet-Angaben: Seitenlayout und Seitenumbruch
| Allgemeines zu Seitenlayout und Seitenumbruch Seitenlayout definieren (@page) Seitengröße (size) Seitenränder (margin usw.) Schnitt- und Passermarken (marks) Seiten rechts/links Laufende Kopf-/Fußzeilen HTML-Elemente für laufende Kopf-/Fußzeilen markieren (running-head) Seitenumbruch vor einem Element (page-break-before) Seitenumbruch nach einem Element (page-break-after) Alleinstehende Zeilen am Seitenende - Schusterjungen (orphans) Alleinstehende Zeilen am Seitenanfang - Hurenkinder (widows)

## Allgemeines zu Seitenlayout und Seitenumbruch

Die hier beschriebenen Style-Sheet-Angaben eröffnen HTML und seiner Ergänzungssprache CSS völlig neue Räume, denn mit diesen Angaben wird es möglich, Drucklayouts zu definieren. Das könnte in Zukunft gewaltige Konsequenzen für die gesamte DTP-Branche haben. HTML und CSS werden durch diese Bereicherung zu einer ernstzunehmenden Konkurrenz für software-abhängige Dateiformate, etwa denen von QuarkExpress, FrameMaker oder Ventura Publisher. Der Vorteil von HTML/CSS gegenüber den software-abhängigen Formaten liegt in der freien Verfügbarkeit und der strengen Plattformunabhängigkeit. Niemand wird mehr auf eine bestimmte DTP-Software angewiesen sein, um ansprechende und professionell aussehende Druckerzeugnisse wie Zeitschriften, Handbücher oder Broschüren zu erstellen. Probleme mit zweigleisigem Publizieren im Internet und in Printform (Stichwort: cross media publishing) könnten entfallen, wenn HTML/CSS sich als Standard für beide Publikationsformen etablieren. Die Möglichkeit des zweigleisigen Editierens wird auch durch die Möglichkeit unterstützt, Style-Sheet-Dateien für unterschiedliche Ausgabemedien zu definieren.

Die Style-Sheet-Angaben zu Seitenlayout und Seitenumbruch sind jedoch nicht nur für Druckerzeugnisse interessant. Ein entsprechendes Präsentationswerkzeug bzw. ein entsprechend ausgerichteter WWW-Browser könnte diese Angaben auch zur bildschirmseiten-orientierten Präsentation benutzen. Diese Style-Sheet-Angaben stellen deshalb auch einen Angriff auf bildschirmseiten-orientierte Präsentations-Software dar, also etwa auf MS PowerPoint. Auch dabei gilt: der Vorteil von HTML/CSS ist die Software- und Plattformunabhängigkeit.

Zur Zeit ist das alles jedoch noch Zukunftsmusik. Die Style-Sheet-Befehle liegen vor, gehören jedoch zum Sprachstandard 2.0 der CSS-Sprache. Von den Befehlen interpretiert lediglich der MS Internet Explorer 4.x diejenigen für den Seitenumbruch.

## Seitenlayout definieren (@page)

Um ein Seitenlayout zu erzeugen, müssen Sie den hier beschriebenen CSS-Befehl anwenden.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      @page { /* Angaben zum Seitenlayout */ }
    </style>

### Erläuterung:

Mit `@page` können Sie ein Seitenlayout erstellen. Die Angabe ist ein Behälter für die einzelnen Angaben zum Aussehen des Layouts. Dazu gehören die Seitengröße (size), die Seitenränder (margin usw.) und bei Bedarf auch Angaben zu Registermarken (marks). Diese Angaben stehen in den geschweiften Klammern im Anschluß an `@page`.

Zwischen dem Layout-Befehl `@page` und den Angaben in den geschweiften Klammern kann auch ein Doppelpunkt folgen. Dahinter können Sie Angaben für unterschiedliche Seiten links/rechts und für laufende Kopf-/Fußzeilen notieren.

### Beachten Sie:

Die Angabe `@page` stellt sicher, daß sich die Definitionen zum Seitenlayout in den geschweiften Klammern nur auf Druckseiten und Bildschirmseiten beziehen und vom WWW-Browser nicht irrtümlich als Definitionen für das normale Erscheinungsbild der HTML-Datei am Bildschirm interpretiert wird. So können Sie mit dieser Angabe z.B. völlig unabhängig von sonstigen Style-Sheet-Angaben im gleichen Bereich ein Seitenlayout für den Ausdruck Ihrer Web-Seiten erstellen.

## Seitengröße (size)

Anzeigebeispiel: So sieht's aus

Sie können bestimmen, welche Breite und Höhe Ihr Seitenlayout haben soll. Für Druckdokumente definieren Sie auf diese Weise das gewünschte Papierformat. Für bildschirmseitenorientierte Präsentationen können Sie die Größe aller Bildschirmseiten festlegen.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      @page { size:21.0cm 29.7cm; }
    </style>

### Erläuterung:

Mit `size:` können Sie im Anschluß an `@page` die Seitengröße definieren. Erlaubt sind zwei numerische Angaben, durch ein Leerzeichen voneinander getrennt. Dabei bedeutet die erste Angabe die Breite der Seite (im obigen Beispiel 21.0cm) und die zweite Angabe die Höhe der Seite (im obigen Beispiel 29.7cm). Ferner sind folgende Angaben erlaubt:

`auto` = Das normale Format des Ausgabemediums (Normaleinstellung).
`landscape` = Das normale Format des Ausgabemediums, bei rechteckigem Format jedoch querkant.
`portrait` = Das normale Format des Ausgabemediums, bei rechteckigem Format jedoch hochkant.

## Seitenränder (margin usw.)

Anzeigebeispiel: So sieht's aus

Sie können die Abstände zwischen Papierrand/Bildschirmfensterrand und Seiteninhalt festlegen.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      @page { size:21.0cm 14.85cm; margin-top:1.7cm; margin-bottom:1.4cm;
              margin-left:2cm; margin-right:2cm  }
    </style>

### Erläuterung:

Um die Seitenränder einzeln zu definieren, stehen folgende Angaben zur Verfügung:

`margin-top` = oberer Seitenrand.
`margin-bottom` = unterer Seitenrand.
`margin-left` = linker Seitenrand.
`margin-right` = rechter Seitenrand.

Wenn Sie für alle vier Seitenränder einen einheitlichen Wert definieren wollen, können Sie anstelle dieser Angaben auch die Angabe `margin:` verwenden.

Für alle Seitenrandangaben ist eine eine numerische Angabe erlaubt.

### Beachten Sie:

Diese Angaben haben keinen Einfluß auf Seitenränder bei der normalen Browser-Präsentation am Bildschirm, da sie hinter der Seitenlayout-Angabe `@page` stehen. Für die normale HTML-Präsentation im WWW-Browser gibt es entsprechende Style-Sheet-Angaben zu Rändern.

## Schnitt- und Passermarken (marks)

Anzeigebeispiel: So sieht's aus

Schnittmarken (engl. crop marks) sind Hilfslinien, die bei der Weiterverarbeitung in Belichtung und Druck zum Zuschneiden von Seiten benutzt werden.

Passermarken, auch Registermarken (engl. cross marks oder register marks) sind Markierungen zum exakten Ausrichten des Satzspiegels bei Belichtung und Druck.

Wenn Sie also beispielsweise ein Seitenformat von 10.8cm mal 18.2cm definieren und dieses auf DIN A 4-Papier ausdrucken, können Sie solche Marken setzen, die sichtbar im Ausdruck erscheinen und für die Satzspiegelvorbereitung in der Belichtung oder in der Druckerei das genaue Seitenformat anzeigen.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      @page { size:11.3cm 19.85cm; margin:1.7cm; marks:cross;  }
    </style>

### Erläuterung:

Mit `marks:` können Sie im Anschluß an `@page` Schnitt- und Passermarken definieren. Folgende Angaben sind erlaubt:

`none` = Keine Marken (Normaleinstellung).
`crop` = Schnittmarken setzen.
`cross` = Passermarken setzen.

Die Angaben `crop` und `cross` können Sie beide angeben, durch Leerzeichen getrennt. Dann werden beide Markentypen berücksichtigt.

## Seiten rechts/links

Sie können für linke und rechte Seiten unterschiedliche Angaben notieren. Dadurch können Sie beispielsweise Heft- oder Binderänder ausgleichen.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      @page { size:21.0cm 14.85cm; margin-top:1.5cm; margin-bottom:2cm  }
      @page :left { margin-left:1.5cm; margin-right:2cm  }
      @page :right { margin-left:2cm; margin-right:1.5cm  }
    </style>

### Erläuterung:

Unterschiedliche Seiten für rechts und links erzeugen Sie, indem Sie hinter `@page`, getrennt durch ein Leerzeichen, einen Doppelpunkt norieren und sofort dahinter eines der Schlüsselwörter `left` (zur Bezeichnung linker Seiten) oder `right` (zur Bezeichnung rechter Seiten) angeben. Dahinter können Sie in geschweiften Klammern Angaben zu Größe, Seitenrändern und Schnitt-/Passermarken für die beiden Seitentypen notieren. In der Praxis ist die Unterscheidung vor allem nützlich, um (wie im obigen Beispiel) spiegelverkehrte Werte zum rechten und linken Seitenrand anzugeben. So lassen sich Heft-/Binderänder ausgleichen.

### Beachten Sie:

Weitere Seitentypen, z.B. ein Typ "erste Seite", sind geplant. In der Version 2.0 der CSS-Sprache sind jedoch nur die beiden Seitentypen links und rechts vorgesehen.

## Laufende Kopf-/Fußzeilen

Sie können für ein Seitenformat laufende Kopf- und Fußzeilenbereiche definieren, die auf allen Seiten wiederholt werden. Wenn Sie linke und rechte Seiten definieren, können Sie für beide Seitentypen auch unterschiedliche Kopf-/Fußzeilenbereiche definieren.

### Beispiel 1 (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      @page { size:21.0cm 14.85cm; }
      @page :header
      { content: ,first(chapter), ; border-bottom:thin solid black; }
      @page :footer
      { content: ,"Seite " decimal(pageno), ; border-top:thin solid black; }
    </style>

### Beispiel 2 (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      @page { size:21.0cm 14.85cm; }
      @page :left { margin-left:1.5cm; margin-right:2cm  }
      @page :right { margin-left:2cm; margin-right:1.5cm  }
      @page :left :header
      { content: decimal(pageno),,first(chapter); border-bottom:thin solid black; }
      @page :right :header
      { content: first(section),,decimal(pageno); border-bottom:thin solid black; }
      @page :left :footer
      { content: "Seite " decimal(pageno); text-align:center; }
      @page :right :footer
      { content: "Seite " decimal(pageno); text-align:center; }
    </style>

### Erläuterung:

Kopf- und Fußzeilen erzeugen Sie, indem Sie hinter `@page`, getrennt durch ein Leerzeichen, einen Doppelpunkt norieren und sofort dahinter eines der Schlüsselwörter `header` (zur Bezeichnung von Kopfzeilen) oder `footer` (zur Bezeichnung von Fußzeilen) angeben. Wenn Sie linke und rechte Seiten definieren, können Sie alle Angaben kombinieren. Isg. sind folgende Kombinationen denkbar:

`@page :header` = Kopfzeile für alle Seiten.
`@page :footer` = Fußzeile für alle Seiten.
`@page :left :header` = Kopfzeile für alle linken Seiten.
`@page :right :header` = Kopfzeile für alle rechten Seiten.
`@page :left :footer` = Fußzeile für alle linken Seiten.
`@page :right :footer` = Fußzeile für alle rechten Seiten.

Definieren Sie nur die Bereiche, die Sie wünschen. Wenn Sie beispielsweise keine Fußzeile haben wollen, lassen Sie die entsprechenden Definitionen einfach weg.

Hinter `:header` bzw. `:footer` können Sie den Kopf- bzw. Fußzeilenbereich definieren. Dazu stehen Ihnen alle üblichen Style-Sheet-Angaben zur Formatierung zur Verfügung. In den obigen Beispielen erhalten Kopfzeilen beispielsweise eine Line unterhalb (`border-bottom`).

Die wichtigste Angabe innerhalb der geschweiften Klammern ist jedoch `content:`. Damit können Sie den eigentlichen Inhalt der Kopf- oder Fußzeilen bestimmen. Eine Kopf- oder eine Fußzeile kann eines, zwei oder drei Elemente enthalten. Das erste Element wird links ausgerichtet, das zweite Element zentriert und das dritte Element rechts. Die Elemente werden durch Kommata getrennt. Notieren Sie hinter `content` am besten stets zwei Kommata. Vor das erste Komma notieren Sie das Element, das links ausgerichtet werden soll, zwischen die beiden Kommata das Element, das zentriert ausgerichtet werden soll, und hinter das zweite Komma das Element, das rechts ausgerichtet werden soll. Wenn Sie für eines oder zwei der Elemente keine Angabe machen möchten, lassen Sie die Kommata stehen, machen aber an der entsprechenden Stelle keine Angabe. Im obigen Beispiel 1 etwa können Sie erkennen, wie auf diese Weise bei Kopf- und Fußzeile je nur ein Element definiert wird. Da das Element zentriert werden soll, steht es zwischen den beiden Kommata. In Beispiel 2 können Sie hinter `@page :left :header` sehen, wie zwei Elemente definiert werden - eines links und eines rechts ausgerichtet. Der Bereich in der Mitte bleibt frei. Daher die zwei Kommata hintereinander und links bzw. rechts davon die beiden Elemente.

Ein Element, das hinter `content:` erlaubt ist, kann ein feststehender Text sein. Solche feststehenden Texte müssen Sie in Anführungszeichen setzen. In den obigen Beispielen ist das z.B. der Text "Seite ". Neben solchen feststehenden Texten gibt es jedoch noch eine Reihe dynamischer, variabler Textteile. Folgende Angaben sind dabei erlaubt:

`decimal(pageno)` = Aktuelle Seitenzahl in dezimaler Form (1,2,3,4 usw.).
`lower-roman(pageno)` = Aktuelle Seitenzahl in römischer Form klein (i,ii,iii,iv usw.).
`upper-roman(pageno)` = Aktuelle Seitenzahl in römischer Form groß (I,II,III,IV usw.).
`lower-alpha(pageno)` = Aktuelle Seitenzahl in alphabetisch klein (a,b,c,d usw.).
`upper-alpha(pageno)` = Aktuelle Seitenzahl in alphabetisch groß (A,B,C,D usw.).
`decimal(pages)` = Gesamtseitenzahl in dezimaler Form.
`lower-roman(pages)` = Gesamtseitenzahl in römischer Form klein.
`upper-roman(pages)` = Gesamtseitenzahl in römischer Form groß.
`lower-alpha(pages)` = Gesamtseitenzahl in alphabetisch klein.
`upper-alpha(pages)` = Gesamtseitenzahl in alphabetisch groß.
`first(title)` = Inhalt des ersten Elements auf der Seite mit `running-head:title` (siehe unten).
`first(chapter)` = Inhalt des ersten Elements auf der Seite mit `running-head:chapter` (siehe unten).
`first(section)` = Inhalt des ersten Elements auf der Seite mit `running-head:section` (siehe unten).
`last(title)` = Inhalt des letzten Elements auf der Seite mit `running-head:title` (siehe unten).
`last(chapter)` = Inhalt des letzten Elements auf der Seite mit `running-head:chapter` (siehe unten).
`last(section)` = Inhalt des letzten Elements auf der Seite mit `running-head:section` (siehe unten).
`previous(title)` = Inhalt des letzten zuvor notierten Elements mit `running-head:title` (siehe unten).
`previous(chapter)` = Inhalt des letzten zuvor notierten Elements mit `running-head:chapter` (siehe unten).
`previous(section)` = Inhalt des letzten zuvor notierten Elements mit `running-head:section` (siehe unten).
`url` = URL-Adresse des Dokuments.
`date` = Lokales Datum und Uhrzeit.

## HTML-Elemente für laufende Kopf-/Fußzeilen markieren (running-head)

Diese Angabe ist von Bedeutung, wenn Sie laufende Kopf-/Fußzeilen definieren und dabei erlaubte variable Inhalte definieren. Sinnvoll ist es beispielsweise, Überschriften mit dieser Style-Sheet-Angabe zu kennzeichnen.

### Beispiel:

    <html>
    <haed>
    <title>Beispiel</title>
    <style type="text/css">
      @page { size:21.0cm 14.85cm; }
      @page :header
      { content: first(title),,first(chapter); }
    </style>
    </head>
    <body>
    <h1 style="running-head:title">Titel des Dokuments</h1>
    <h2 style="running-head:chapter">Ein Kapitel</h2>
    viel Inhalt
    <h2 style="running-head:chapter">Ein anderes Kapitel</h2>
    viel Inhalt
    </body>
    </html>

### Erläuterung:

Mit `running-head:` können Sie geeignete HTML-Inhalte für variable Kopf-/Fußzeilen markieren. Im obigen Beispiel wird eine Kopfzeile definiert, die links den Titel des Dokuments (`first(title)`) ausgibt und rechts das aktuelle Kapitel (`first(chapter)`). Im Text wird dazu eine Überschrift 1. Ordnung, die am Beginn steht, mit `running-head:title` als Titel für die Kopfzeile definiert. Überschriften 2. Ordnung, die im Dokument folgen, werden mit `running-head:chapter` als Kapitel definiert.
Erlaubt sind bei `running-head:` folgende Angaben:

`title` = Inhalt des HTML-Elements für `first(title)`, `last(title)` oder `previous(title)` markieren.
`chapter` = Inhalt des HTML-Elements für `first(chapter)`, `last(chapter)` oder `previous(chapter)` markieren.
`section` = Inhalt des HTML-Elements für `first(section)`, `last(section)` oder `previous(section)` markieren.
`none` = Inhalt des HTML-Elements nicht markieren (Normalfall).

## Seitenumbruch vor einem Element (page-break-before)

Anzeigebeispiel: So sieht's aus

Sie können einen Seitenumbruch vor einem HTML-Element erzwingen oder verhindern.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <h1 style="page-break-before:always">Überschrift mit Seitenumruch oberhalb</h1>

### Erläuterung:

Mit `page-break-before:` können Sie einen Seitenumbruch vor dem aktuellen Element erzwingen oder auch verhindern. Folgende Angaben sind erlaubt:

`always` = immer einen Seitenumbruch vor dem aktuellen Element einfügen.
`avoid` = nie einen Seitenumbruch vor dem aktuellen Element einfügen.
`left` = bei linken/rechten Seiten Seitenumbruch einfügen, aktuelles Element auf nächste linke Seite.
`right` = bei linken/rechten Seiten Seitenumbruch einfügen, aktuelles Element auf nächste rechte Seite.
`auto` = keine Angabe zum Seitenumbruch (Normaleinstellung).

## Seitenumbruch nach einem Element (page-break-after)

Anzeigebeispiel: So sieht's aus

Sie können einen Seitenumbruch nach einem HTML-Element erzwingen oder verhindern.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <p style="page-break-after:avoid">Textabsatz ohne Seitenumbruch unterhalb</p>

### Erläuterung:

Mit `page-break-after:` können Sie einen Seitenumbruch vor dem aktuellen Element erzwingen oder auch verhindern. Folgende Angaben sind erlaubt:

`always` = immer einen Seitenumbruch nach dem aktuellen Element einfügen.
`avoid` = nie einen Seitenumbruch nach dem aktuellen Element einfügen.
`left` = bei linken/rechten Seiten Seitenumbruch einfügen, nachfolgendes Element auf nächste linke Seite.
`right` = bei linken/rechten Seiten Seitenumbruch einfügen, nachfolgendes Element auf nächste rechte Seite.
`auto` = keine Angabe zum Seitenumbruch (Normaleinstellung).

## Alleinstehende Zeilen am Seitenende - Schusterjungen (orphans)

Sie können verhindern, daß Seitenumbrüche innerhalb von Fließtext den Text so unglücklich trennen, daß eine einzelne Zeile auf der einen Seite steht und alle anderen Absatzzeilen auf die nächsten Seite kommen.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      p,blockqoute,div { orphans:3; }
    </style>

### Erläuterung:

Mit `orphans:` können Sie bestimmen, wie viele Zeilen eines längeren Fließtextabsatzes auf der Seite vor dem Umbruch mindestens stehen sollen. Erlaubt ist eine Zahl für die Anzahl Zeilen. Voreinstellung ist 2.

## Alleinstehende Zeilen am Seitenanfang - Hurenkinder (widows)

Sie können verhindern, daß Seitenumbrüche innerhalb von Fließtext den Text so unglücklich trennen, daß eine einzelne Zeile auf der neuen Seite steht und alle anderen Absatzzeilen auf der Seite vor dem Seitenumbruch bleiben.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
      p,blockqoute,div { widow:3; }
    </style>

### Erläuterung:

Mit `widow:` können Sie bestimmen, wie viele Zeilen eines längeren Fließtextabsatzes auf der Seite nach dem Umbruch auf der neuen Seite mindestens stehen sollen. Erlaubt ist eine Zahl für die Anzahl Zeilen. Voreinstellung ist 2.

weiter: | Style-Sheet-Angaben: Sound-Kontrolle für Sprachausgabe
zurück: | Style-Sheet-Angaben: Mehrspaltiger Textfluß

SELFHTML/Quickbar CSS Style-Sheets Style-Sheet-Angaben

© 1998 Stefan Münz, muenz@csi.com