CSS Paged Media - @ page-Regel

Seitenmedien unterscheiden sich von Endlosmedien dadurch, dass der Inhalt des Dokuments in eine oder mehrere einzelne Seiten aufgeteilt ist. Zu den ausgelagerten Medien gehören Papier, Transparentfolien, Seiten, die auf Computerbildschirmen angezeigt werden usw.

Der CSS2-Standard enthält einige grundlegende Funktionen zur Paginierungssteuerung, mit denen Autoren dem Browser helfen können, herauszufinden, wie ihre Dokumente am besten gedruckt werden können.

Das CSS2-Seitenmodell gibt an, wie ein Dokument in einem rechteckigen Bereich - dem Seitenfeld - formatiert wird, der eine endliche Breite und Höhe hat. Diese Funktionen lassen sich in zwei Gruppen einteilen:

CSS2-Funktionen, die ein bestimmtes Seitenlayout definieren.
CSS2-Funktionen, die die Paginierung eines Dokuments steuern.

Seiten definieren: die @ page-Regel

Das CSS2 definiert eine "Seitenbox", eine Box mit endlichen Dimensionen, in der Inhalte gerendert werden. Das Seitenfeld ist ein rechteckiger Bereich, der zwei Bereiche enthält:

The page area- Der Seitenbereich enthält die auf dieser Seite angeordneten Felder. Die Ränder des Seitenbereichs dienen als anfänglicher Block für das Layout, das zwischen Seitenumbrüchen auftritt.
The margin area - Es umgibt den Seitenbereich.

Sie können die Abmessungen, Ausrichtung, Ränder usw. eines Seitenfelds innerhalb einer @ page-Regel angeben. Die Abmessungen des Seitenfelds werden mit der Eigenschaft 'size' festgelegt. Die Abmessungen des Seitenbereichs sind die Abmessungen des Seitenfelds abzüglich des Randbereichs.

Mit der folgenden @ page-Regel wird beispielsweise die Seitenfeldgröße auf 8,5 × 11 Zoll festgelegt und ein allseitiger Rand von 2 cm zwischen dem Rand des Seitenfelds und dem Seitenbereich erstellt.

<style type = "text/css">
   <!--
      @page { size:8.5in 11in; margin: 2cm }
   -->
</style>

Sie können die Eigenschaften Rand, Rand oben, Rand unten, Rand links und Rand rechts innerhalb der @ page-Regel verwenden, um Ränder für Ihre Seite festzulegen.

Schließlich wird die Marks- Eigenschaft innerhalb der @ page-Regel verwendet, um Zuschneide- und Registrierungsmarken außerhalb des Seitenfelds auf dem Zielblatt zu erstellen. Standardmäßig werden keine Markierungen gedruckt. Sie können eines oder beide der Schlüsselwörter " Zuschneiden" und " Kreuz" verwenden , um Schnittmarken bzw. Registrierungsmarken auf der Zieldruckseite zu erstellen.

Seitengröße einstellen

Die size- Eigenschaft gibt die Größe und Ausrichtung eines Seitenfelds an. Es gibt vier Werte, die für die Seitengröße verwendet werden können:

auto - Das Seitenfeld wird auf die Größe und Ausrichtung des Zielblatts eingestellt.
landscape- Überschreibt die Ausrichtung des Ziels. Das Seitenfeld hat dieselbe Größe wie das Ziel und die längeren Seiten sind horizontal.
portrait- Überschreibt die Ausrichtung des Ziels. Das Seitenfeld hat dieselbe Größe wie das Ziel und die kürzeren Seiten sind horizontal.
length- Längenwerte für die Eigenschaft 'size' erstellen ein absolutes Seitenfeld. Wenn nur ein Längenwert angegeben wird, werden sowohl die Breite als auch die Höhe des Seitenfelds festgelegt. Prozentwerte sind für die Eigenschaft 'size' nicht zulässig.

Im folgenden Beispiel werden die Außenkanten des Seitenfelds am Ziel ausgerichtet. Der prozentuale Wert für die Eigenschaft "Rand" bezieht sich auf die Zielgröße. Wenn also die Abmessungen des Zielblatts 21,0 cm × 29,7 cm (dh A4) betragen, betragen die Ränder 2,10 cm und 2,97 cm.

<style type = "text/css">
   <!--
      @page {
         size: auto;   /* auto is the initial value */
         margin: 10%;
      }
   -->
</style>

Im folgenden Beispiel wird die Breite des Seitenfelds auf 8,5 Zoll und die Höhe auf 11 Zoll festgelegt. Das Seitenfeld in diesem Beispiel erfordert eine Zielblattgröße von 8,5 "× 11" oder mehr.

<style type = "text/css">
   <!--
      @page {
         size: 8.5in 11in;  /* width height */
      }
   -->
</style>

Sobald Sie ein benanntes Seitenlayout erstellt haben, können Sie es in Ihrem Dokument verwenden, indem Sie die Seiteneigenschaft einem Stil hinzufügen, der später auf ein Element in Ihrem Dokument angewendet wird. Mit diesem Stil werden beispielsweise alle Tabellen in Ihrem Dokument auf Querformatsseiten gerendert.

<style type = "text/css">
   <!--
      @page { size : portrait }
      @page rotated { size : landscape }
      table { page : rotated }
   -->
</style>

Wenn der Browser beim Drucken auf ein <table> -Element in Ihrem Dokument stößt und das aktuelle Seitenlayout das Standard-Hochformat ist, wird aufgrund der obigen Regel eine neue Seite gestartet und die Tabelle auf einer Querformat-Seite gedruckt.

Linke, rechte und erste Seite

Beim Drucken von doppelseitigen Dokumenten sollten die Seitenfelder auf der linken und rechten Seite unterschiedlich sein. Es kann durch zwei CSS-Pseudoklassen wie folgt ausgedrückt werden:

<style type = "text/css">
   <!--
      @page :left {
         margin-left: 4cm;
         margin-right: 3cm;
      }

      @page :right {
         margin-left: 3cm;
         margin-right: 4cm;
      }
   -->
</style>

Sie können den Stil für die erste Seite eines Dokuments mit folgender Adresse angeben: first pseudo-class -

<style type = "text/css">
   <!--
      @page { margin: 2cm } /* All margins set to 2cm */

      @page :first {
         margin-top: 10cm    /* Top margin on first page 10cm */
      }
   -->
</style>

Paginierung kontrollieren

Sofern Sie nichts anderes angeben, treten Seitenumbrüche nur auf, wenn sich das Seitenformat ändert oder wenn der Inhalt das aktuelle Seitenfeld überläuft. Verwenden Sie die Eigenschaften Seitenumbruch vor, Seitenumbruch nachher und Seitenumbruch innerhalb , um Seitenumbrüche auf andere Weise zu erzwingen oder zu unterdrücken .

Sowohl der Seitenumbruch vor als auch der Seitenumbruch nachher akzeptieren die automatischen Schlüsselwörter " Immer vermeiden", "Links" und " Rechts" .

Das Schlüsselwort auto ist die Standardeinstellung. Mit diesem Schlüssel kann der Browser bei Bedarf Seitenumbrüche generieren. Das Schlüsselwort erzwingt immer einen Seitenumbruch vor oder nach dem Element, während vermieden wird , dass ein Seitenumbruch unmittelbar vor oder nach dem Element unterdrückt wird. Die linken und rechten Schlüsselwörter erzwingen einen oder zwei Seitenumbrüche, sodass das Element auf einer linken oder rechten Seite gerendert wird.

Die Verwendung von Paginierungseigenschaften ist recht einfach. Angenommen, Ihr Dokument verfügt über Überschriften der Ebene 1. Beginnen Sie neue Kapitel mit Überschriften der Ebene 2, um Abschnitte zu kennzeichnen. Sie möchten, dass jedes Kapitel auf einer neuen Seite auf der rechten Seite beginnt, möchten jedoch nicht, dass die Abschnittsüberschriften über einen Seitenumbruch des nachfolgenden Inhalts aufgeteilt werden. Sie können dies mit der folgenden Regel erreichen:

<style type = "text/css">
   <!--
      h1 { page-break-before : right }
      h2 { page-break-after : avoid }
   -->
</style>

Verwenden Sie nur das Auto und vermeiden Sie Werte mit der Eigenschaft " Seitenumbruch" . Wenn Sie es vorziehen, dass Ihre Tabellen möglichst nicht seitenübergreifend aufgeteilt werden, schreiben Sie die Regel:

<style type = "text/css">
   <!--
      table { page-break-inside : avoid }
   -->
</style>

Witwen und Waisen kontrollieren

Im typografischen Jargon sind Waisen die Zeilen eines Absatzes, die aufgrund eines Seitenumbruchs am unteren Rand einer Seite gestrandet sind, während Witwen die Zeilen sind, die nach einem Seitenumbruch am oberen Rand einer Seite verbleiben. Im Allgemeinen sehen gedruckte Seiten nicht attraktiv aus, wenn einzelne Textzeilen oben oder unten gestrandet sind. Die meisten Drucker versuchen, mindestens zwei oder mehr Textzeilen oben oder unten auf jeder Seite zu belassen.

Das orphans Die Eigenschaft gibt die Mindestanzahl von Zeilen eines Absatzes an, die am Ende einer Seite verbleiben müssen.
Das widows Die Eigenschaft gibt die Mindestanzahl von Zeilen eines Absatzes an, die oben auf einer Seite verbleiben müssen.

Hier ist das Beispiel, um 4 Zeilen unten und 3 Zeilen oben auf jeder Seite zu erstellen -

<style type = "text/css">
   <!--
      @page{orphans:4; widows:2;}
   -->
</style>