SELFHTML: Stylesheets / CSS-Eigenschaften / Layouts für Printmedien
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Welche CSS-Eigenschaften es gibt, um die Ausgabe von Web-Seiten auf Printmedien, also z.B. auf dem Drucker, zu kontrollieren.
Keywords: SELFHTML, CSS, Stylesheets, Cascading Stylesheets, HTML, CSS-Eigenschaften, Printmedien, Drucker, Seiten-Layouts, Seitengröße, Schnittmarken, Passermarken, Seitenumbruch, Kopfzeilen, Fußzeilen, laufende Kopf-/Fußzeilen, @page, size, margin, marks, running-head, page-break-before, page-break-after, orphans, widows
Date: 2005-11-12T15:42:06+01:00

| # Layouts für Printmedien
| Allgemeines zu Seiten-Layout und Seitenumbruch @page (Seiten-Layout definieren) size (Seitengröße) margin (Seitenränder) marks (Schnitt- und Passermarken) Seiten rechts/links und erste Seite page-break-before (Seitenumbruch vor einem Element) page-break-after (Seitenumbruch nach einem Element) page-break-inside (Seitenumbruch innerhalb eines Elements) orphans (Alleinstehende Zeilen am Seitenende) widows (Alleinstehende Zeilen am Seitenanfang) Benannte Seiten

## Allgemeines zu Seiten-Layout und Seitenumbruch

Die hier beschriebenen Stylesheet-Angaben eröffnen HTML und seiner Ergänzungssprache CSS völlig neue Räume, denn mit diesen Angaben wird es möglich, Druck-Layouts zu definieren. Die Möglichkeit des zweigleisigen Editierens wird auch durch die Möglichkeit unterstützt, verschiedene Stylesheets für unterschiedliche Ausgabemedien zu definieren, wie im Abschnitt Stylesheets in HTML einbinden beschrieben.

Die Stylesheet-Angaben zu Seiten-Layout und Seitenumbruch sind jedoch nicht nur für Druckerzeugnisse interessant. Ein entsprechendes Präsentationswerkzeug bzw. ein entsprechend ausgerichteter Web-Browser könnte diese Angaben auch zur bildschirmseitenorientierten Präsentation benutzen.

Von den Eigenschaften interpretiert der Internet Explorer seit Version 4 lediglich diejenigen für den Seitenumbruch. Nur Opera unterstützt einen Großteil der Eigenschaften.

## @page (Seiten-Layout definieren)

Ein Seiten-Layout wird in einem zentralen `style`-Bereich definiert.

### Beispiel:

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

### Erläuterung:

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

### Beachten Sie:

`@page` stellt sicher, dass sich die Definitionen zum Seiten-Layout in den geschweiften Klammern nur auf "seiten-orientierte" Medien 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 Stylesheet-Angaben im gleichen Bereich ein Seiten-Layout für den Ausdruck Ihrer Web-Seiten erstellen.

## size (Seitengröße)

In CSS2 war vorgesehen, hiermit die Breite und Höhe eines Seiten-Layouts festzulegen. Für Druckdokumente sollte das gewünschte Papierformat und für bildschirmseitenorientierte Präsentationen die Größe aller Bildschirmseiten festgelegt werden können.
Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>size</title>
    <style type="text/css">
    @page { size:landscape; }
    </style>
    </head><body>

    <p>Diese Seite erscheint an Ihrem Bildschirm genau so wie sonst.
    Wenn Ihr Browser jedoch die Stylesheet-Angaben zum Seiten-Layout kennt,
    versuchen Sie mal, diese Datei &uuml;ber den normalen Druckbefehl Ihres
    Browsers auszudrucken.</p>

    </body></html>

### Erläuterung:

Mit `size:` sollte im Anschluss an `@page` die Seitengröße definiert werden können. Vorgesehen waren zwei numerische Angaben, durch ein Leerzeichen voneinander getrennt; die erste Angabe für die Breite der Seite (z.B. `21.0cm`) und die zweite für die Höhe (z.B. `29.7cm`). Ferner waren folgende Angaben vorgesehen:

`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.

## margin (Seitenränder)

Sie können die Abstände zwischen Seitenrand und Seiteninhalt festlegen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>margin (page)</title>
    <style type="text/css">
    @page { size:21.0cm 14.85cm; margin:5.7cm 2cm 1.4cm 1cm; }
    </style>
    </head><body>

    <p>Diese Seite erscheint an Ihrem Bildschirm genau so wie sonst.
    F&uuml;r den Ausdruck wurden jedoch Abst&auml;nde zwischen
    Seiteninhalt und Seitenrand festgelegt.</p>

    </body></html>

### 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 Einfluss auf Seitenränder bei der normalen Browser-Präsentation am Bildschirm, da sie hinter der Seiten-Layout-Angabe `@page` stehen. Für die normale HTML-Präsentation im WWW-Browser gibt es entsprechende Stylesheet-Angaben zu Abstand/Rand.

## marks (Schnitt- und Passermarken)

In CSS2 war vorgesehen, Schnitt- und Passermarken für den Ausdruck angeben zu können.
Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.

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, sollten Sie solche Marken setzen können, die sichtbar im Ausdruck erscheinen und für die Satzspiegelvorbereitung in der Belichtung oder in der Druckerei das genaue Seitenformat anzeigen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>marks</title>
    <style type="text/css">
    @page { size:11.3cm 19.85cm; margin:1.7cm; marks:cross;  }
    </style>
    </head><body>

    <p>Diese Seite erscheint an Ihrem Bildschirm genau so wie sonst.
    F&uuml;r Printmedienverarbeitung wurden jedoch Passermarken gesetzt.</p>

    </body></html>

### Erläuterung:

Mit `marks:` sollten im Anschluss an `@page` Schnitt- und Passermarken definiert werden können, wozu folgende Angaben vorgesehen waren:

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

Die Angaben `crop` und `cross` sollten auch gemeinsam, durch Leerzeichen getrennt, angegeben werden können.

## Seiten rechts/links und erste Seite

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

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>Seiten rechts/links</title>
    <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>
    </head><body>

    <p>Das hier ist die eine Seite.</p>
    <p style="page-break-before:always">Das hier die andere (wegen erzwungenem Seitenumbruch)</p>
    <p>Die beiden Seiten haben unterschiedliche Seitenr&auml;nder.</p>

    </body></html>

### 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), `right` (zur Bezeichnung rechter Seiten) oder `first` (zur Bezeichnung der ersten Seite) 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.

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

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

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>page-break-before</title>
    </head><body>

    <h1>Die erste Seite</h1>
    <p>und ihr Text</p>
    <h2 style="page-break-before:always">Und die zweite Seite</h2>
    <p>und ihr Text</p>

    </body></html>

### 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.
`inherit` = Angabe zum Seitenumbruch vom Elternelement übernehmen (erben).
`auto` = keine Angabe zum Seitenumbruch (Normaleinstellung).

### Beachten Sie:

Safari 1.2 interpretiert nur die Werte `auto` und `always`. Internet Explorer, Konqueror und Opera interpretieren die Werte `left` und `right` wie `auto`. Dies ist eine vom CSS-Standard erlaubte Umsetzung. Firefox und Safari ignorieren `page-break-before` mit den Werten `left` oder `right` gänzlich. Der Wert `avoid` wird ausschließlich von Opera unterstützt.

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

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

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>page-break-after</title>
    <style type="text/css">
    h2 { page-break-after:avoid; }
    </style>
    </head><body>

    <h1 style="margin-bottom:18cm;">
    &Uuml;berschrift ersten Grades mit <code>18cm</code> Au&szlig;enabstand unten.
    </h1>

    <h2>&Uuml;berschrift zweiten Grades</h2>
    <p>Direkt nach einer &Uuml;berschrift zweiten Grades darf kein Seitenumbruch erfolgen.</p>

    </body></html>

### Erläuterung:

Mit `page-break-after:` können Sie einen Seitenumbruch nach 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.
`inherit` = Angabe zum Seitenumbruch vom Elternelement übernehmen (erben).
`auto` = keine Angabe zum Seitenumbruch (Normaleinstellung).

### Beachten Sie:

Safari 1.2 interpretiert nur die Werte `auto` und `always`. Internet Explorer, Konqueror und Opera interpretieren die Werte `left` und `right` wie `auto`. Dies ist eine vom CSS-Standard erlaubte Umsetzung. Firefox und Safari ignorieren `page-break-after` mit den Werten `left` oder `right` gänzlich. Der Wert `avoid` wird ausschließlich von Opera unterstützt.

## page-break-inside (Seitenumbruch innerhalb eines Elements)

Sie können einen Seitenumbruch innerhalb eines HTML-Elements verhindern.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>page-break-inside</title>
    </head><body>

    <p style="height:90%; border:1px solid #f00">Platzhalter</p>

    <p style="page-break-inside:avoid">
      Innerhalb<br>dieses<br>Abschnitts<br>darf<br>kein<br>Seitenumbruch<br>erfolgen.<br>
      Er wandert daher beim Ausdruck auf die n&auml;chste Seite.
    </p>

    </body></html>

### Erläuterung:

Mit `page-break-inside` können Sie einen Seitenumbruch innerhalb eines Elements verhindern. Folgende Angaben sind erlaubt:

`avoid` = nie einen Seitenumbruch innerhalb des aktuellen Elements einfügen.
`auto` = keine Angabe zum Seitenumbruch (Normaleinstellung).

## orphans (Alleinstehende Zeilen am Seitenende)

Sie können verhindern, dass Seitenumbrüche innerhalb von Fließtext den Text so unglücklich trennen, dass eine einzelne Zeile auf der einen Seite steht und alle anderen Absatzzeilen auf die nächsten Seite kommen (DTP-Fachjargon hierzulande: Schusterjungen).

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>orphans</title>
    <style type="text/css">
    p { orphans:3; font: 50pt/100pt Verdana,sans-serif; margin:1cm 0 0; padding:0; }
    </style>
    </head><body>

    <p>Absatz_1:_Zeile_1
    Absatz_1:_Zeile_2
    Absatz_1:_Zeile_3
    Absatz_1:_Zeile_4
    Absatz_1:_Zeile_5</p>

    <p>Absatz_2:_Zeile_1
    Absatz_2:_Zeile_2
    Absatz_2:_Zeile_3
    Absatz_2:_Zeile_4
    Absatz_2:_Zeile_5
    Absatz_2:_Zeile_6</p>

    </body></html>

### 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.

### Beachten Sie:

Nur Opera kennt diese Eigenschaft, setzt sie aber selbst in der Version 8 noch fehlerhaft und unbrauchbar um. Da in diesem Beispiel nur maximal zwei Zeilen des zweiten Absatzes auf die erste Druckseite passen, müsste der gesamte Absatz umbrochen werden, um die Eigenschaft `orphans:3` zu erfüllen. Opera verhält sich merkwürdig und bricht den zweiten Absatz hier nur dann um, wenn z.B. `orphans:4` oder `widows:3` definiert oder die letzte Zeile des zweiten Absatzes gelöscht würde.

## widows (Alleinstehende Zeilen am Seitenanfang)

Sie können verhindern, dass Seitenumbrüche innerhalb von Fließtext den Text so unglücklich trennen, dass eine einzelne Zeile auf der neuen Seite steht und alle anderen Absatzzeilen auf der Seite vor dem Seitenumbruch bleiben (DTP-Fachjargon hierzulande: Hurenkinder).

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>widows</title>
    <style type="text/css">
    p { widows:4; font:50pt/100pt Verdana,sans-serif; margin:1cm 0 0; padding:0; }
    </style>
    </head><body>

    <p>Absatz_1:_Zeile_1
    Absatz_1:_Zeile_2
    Absatz_1:_Zeile_3</p>

    <p>Absatz_2:_Zeile_1
    Absatz_2:_Zeile_2
    Absatz_2:_Zeile_3
    Absatz_2:_Zeile_4
    Absatz_2:_Zeile_5
    Absatz_2:_Zeile_6</p>

    </body></html>

### Erläuterung:

Mit `widows:` 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.

### Beachten Sie:

Nur Opera kennt diese Eigenschaft, setzt sie aber selbst in der Version 8 noch fehlerhaft und unbrauchbar um. In diesem Beispiel würden mindestens zwei Zeilen des zweiten Absatzes noch auf die erste Druckseite passen und gemäß `orphans:4` müssten vier Zeilen umbrochen werden. Opera bricht jedoch den gesamten zweiten Absatz um bzw. bei kleineren Werten für `widows` stets drei Zeilen oder bei `orphans:1` zwei Zeilen.

## Benannte Seiten

In CSS2 war vorgesehen, für spezielle Seitenformate benannte Seitentypen definieren zu können.
Wegen mangelnder Browserunterstützung wird diese Eigenschaft jedoch in CSS 2.1 nicht übernommen werden.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>Benannte Seiten</title>
    <style type="text/css">
    @page querformat { size:landscape; }
    div.uebersicht { page:querformat; }
    </style>
    </head><body>

    <div class="uebersicht">
      <p>Das mittels <code>page:querformat</code> benannte div-Element sollte im
      Querformat ausgedruckt werden und bei Bedarf einen Seitenumbruch erzeugen.</p>
    </div>

    </body></html>

### Erläuterung:

Indem hinter `@page` ein selbst vergebenener Name notiert wird - im obigen Beispiel ist es der Name `querformat` - sollte ein spezielles Seiten-Layout erstellt werden können. Innerhalb der geschweiften Klammern waren die üblichen Angaben zum Seiten-Layout zu notieren. Benannte Seiten sollten nur dann verwendet werden, wenn ein Element vorkommt, für das eine CSS-Eigenschaft `page:` notiert ist. Im Beispiel wird für `div`-Elemente mit dem Klassennamen `uebersicht` bestimmt, dass solche Elemente den Seitentyp `querformat` erzwingen. Wenn nun also im HTML-Quelltext steht: `<div class="uebersicht">...</div>`, dann sollte für die Darstellung dieses Elements der Seitentyp `querformat` erzwungen werden.

| Sound-Kontrolle für Sprachausgabe
| Positionierung und Anzeige von Elementen

© 2007 Impressum