CSS 2.1: `@page`

Allgemeines:

Paginierte bzw. seitenorientierte Medien, z. B. Druckseiten oder Overhead-Projektionen, unterscheiden sich von fortlaufenden Ausgabemedien, z. B. Bildschirme, dadurch, dass ihr Inhalt in Vierecke von vordefinierter Größe aufgeteilt ist. Dies wird besonders auffällig, wenn man sich druckeroptimierte Dateien, z. B. die Druckversion/-vorschau dieser Website, am Bildschirm ansieht.

Die Übertragung von theoretisch unendlich langen und breiten Webdokumenten in Vierecke mit begrenzter Größe wird von CSS in zwei Schritten bewerkstelligt:

Die Seitenbox ('page box') ist eine Erweiterung des Box- Modells. Mit ihrer Hilfe ist es möglich, die Seitenvierecke und Seitenränder zu definieren.
Das Seitenmodell ('page model') ist eine Erweiterung des Modells zur visuellen Formatierung. Hier sind alle Eigenschaften zur Seitenformatierung, Seitenumbrüche usw. zusammengefaßt.

Jedes Viereck stellt den für eine Druckseite vorgesehenen Inhalt dar. Dabei sind diese Vierecke zunächst einmal völlig unabhängig von einem bestimmten Papierformat. CSS 2.1 stellt lediglich einige Funktionen bereit, mit denen Anwenderprogramme über die gewünschte Papiergröße und -orientierung informiert werden.

Der darauf folgende Schritt, die Übertragung dieser Vierecke auf das Papier, liegt dann in der Verantwortung des Anwenderprogramms.

Die Regel `@page`:

Innerhalb des Regelblocks einer @page-Regel lassen sich alle Definitionen für einen bestimmten Seitenkontext deklarieren.

@page und fast alle dazu gehörenden Regeln zur seitenbezogenen Ausgabe wurden nicht mit nach CSS 2.1 übernommen, sondern gleich im separaten CSS-3-Modul Paged Media Properties for CSS3 zusammengefaßt.

Syntax:

@page <page-selector><:page-pseudo-class> {Regeln}

Komponenten:

<page-selector>: Zeichenstring, mit dem der Seitendefinition ein eindeutiger Name zugeordnet werden kann. Dieser Wert ist optional.
<:page-pseudo-class>: eine der drei Druck-Pseudoklassen :first, :right oder :left. Dieser Wert ist optional.
{Regeln}: Block der definierten Regeln.

Code-Beispiel:

@page rechte-seite:right { body { margin:20mm; margin-left:25mm; } }

@page linke-seite:left { body { margin:20mm; margin-right:25mm; } }

Browserunterstützung

: Die Unterstützung der Eigenschaften zur Drucksteuerung ist zur Zeit noch zu lückenhaft für die Produktion, sodass sich eine detaillierte Erläuterung noch nicht lohnt. Es sind aber andererseits auch keine negativen Auswirkungen dieser Eigenschaften bekannt.