SELFHTML: CSS Stylesheets / CSS-Eigenschaften / Layouts für Printmedien

	Layouts für Printmedien
	Allgemeines zu Seitenlayout und Seitenumbruch @page (Seitenlayout 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) orphans (Alleinstehende Zeilen am Seitenende) widows (Alleinstehende Zeilen am Seitenanfang) Benannte Seiten

Allgemeines zu Seitenlayout 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, Drucklayouts 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 CSS Stylesheets in HTML einbinden beschrieben.

Die Stylesheet-Angaben zu Seitenlayout 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 bildschirmseiten-orientierten Präsentation benutzen.

Zur Zeit ist das alles jedoch noch Zukunftsmusik. Die Stylesheet-Befehle liegen vor, doch die Browser unterstützen sie noch nicht. Von den Befehlen interpretiert lediglich der MS Internet Explorer seit Version 4.x diejenigen für den Seitenumbruch.

@page (Seitenlayout definieren)

Ein Seitenlayout wird in einem zentralen style-Bereich definiert.

Beispiel:

<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 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 Seitenlayout 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 Style-Sheet-Angaben im gleichen Bereich ein Seitenlayout für den Ausdruck Ihrer Web-Seiten erstellen.

size (Seitengröße)

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:

Anzeigebeispiel: So sieht's aus

<html><head><title>size</title>
<style type="text/css">
  @page { size:landscape; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

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

</body></html>

Erläuterung:

Mit size: können Sie im Anschluss 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 (z.B. 21.0cm) und die zweite Angabe die Höhe der Seite (z.B. 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.

margin (Seitenränder)

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

Beispiel:

Anzeigebeispiel: So sieht's aus

<html><head><title>margin (page)</title>
<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>
</head><body bgcolor="#FFFFFF" text="#000000">

<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 Seitenlayout-Angabe @page stehen. Für die normale HTML-Präsentation im WWW-Browser gibt es entsprechende Style-Sheet-Angaben zu Abstand/Rand.

marks (Schnitt- und Passermarken)

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:

Anzeigebeispiel: So sieht's aus

<html><head><title>marks</title>
<style type="text/css">
@page { size:11.3cm 19.85cm; margin:1.7cm; marks:cross;  }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

<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: können Sie im Anschluss 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 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

<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 bgcolor="#FFFFFF" text="#000000">

<p>Das hier ist die eine Seite.</p>
<p style="page-break-before:always">Das hier die andere (wegen erwzungenem 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

<html><head><title>page-break-before</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<h1>Die erste Seite</h1>
<p>und ihr Text</p>
<h1 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).

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

<html><head><title>page-break-after</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<h1>Die erste Seite</h1>
<p style="page-break-after:avoid; height:22cm; border:thin solid black; padding:0.5cm">Leerraum</p>
<p>Kommentar dazu</p>
<h1>Neue &Uuml;berschrift</h1>
<p>und ihr Text</p>

</body></html>

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

<html><head><title>orphans</title>
<style type="text/css">
 p,blockqoute { orphans:3; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

<h1>Zu dieser Seite</h1>
<p>Auf dieser Seite gibt es Abs&auml;tze.</p>
<blockquote>und Zitate</blockquote>
<p>Und alle haben gemeinsam: keiner wird ungl&uuml;cklich getrennt!</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.

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

<html><head><title>widows</title>
<style type="text/css">
 p,blockqoute { widows:3; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

<h1>Zu dieser Seite</h1>
<p>Auf dieser Seite gibt es Abs&auml;tze.</p>
<blockquote>und Zitate</blockquote>
<p>Und alle haben gemeinsam: keiner wird ungl&uuml;cklich getrennt!</p>

</body></html>

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.

Benannte Seiten

Für spezielle Seitenformate können Sie einzelne, benannte Seitentypen definieren.

Beispiel:

<style type="text/css">
  @page querformat { size:landscape; }
  div.uebersicht { page:querformat; /* andere CSS-Angaben */ }
</style>

Erläuterung:

Indem Sie hinter @page einen selbst vergebenen Namen notieren - im obigen Beispiel ist es der Name querformat - können Sie ein spezielles Seitenlayout erstellen. Innerhalb der geschweiften Klammern können Sie die üblichen Angaben zum Seitenlayout notieren. Benannte Seiten werden jedoch nicht automatisch verwendet, sondern nur dann, 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 wird für die Darstellung dieses Elements der Seitentyp querformat erzwungen.


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

SELFHTML/Navigationshilfen

CSS Stylesheets

CSS-Eigenschaften