@page

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die @page At-Regel ist eine CSS-At-Regel, die verwendet wird, um verschiedene Aspekte von gedruckten Seiten zu ändern. Sie zielt auf die Dimensionen, die Ausrichtung und die Ränder der Seite ab und modifiziert diese. Die @page At-Regel kann verwendet werden, um alle Seiten eines Ausdrucks oder einen Teil davon mithilfe ihrer verschiedenen Pseudoklassen zu adressieren.

Syntax

css
/* Targets all the pages */
@page {
  size: 8.5in 9in;
  margin-top: 4in;
}

/* Targets all even-numbered pages */
@page :left {
  margin-top: 4in;
}

/* Targets all odd-numbered pages */
@page :right {
  size: 11in;
  margin-top: 4in;
}

/* Targets all selectors with `page: wide;` set */
@page wide {
  size: a4 landscape;
}

@page {
  /* margin box at top right showing page number */
  @top-right {
    content: "Page " counter(pageNumber);
  }
}

Seiteneigenschaften

Die @page At-Regel kann nur Seitenbeschreibungen und Rand-At-Regeln enthalten. Die folgenden Beschreibungen wurden von mindestens einem Browser implementiert:

margin

Gibt die Seitenränder an. Einzelne Rand-Eigenschaften wie margin-top, margin-right, margin-bottom und margin-left können ebenfalls verwendet werden.

page-orientation

Gibt die Ausrichtung der Seite an. Dies beeinflusst nicht das Layout der Seite; die Drehung wird nach dem Layout auf das Ausgabemedium angewendet.

size

Gibt die Zielgröße und Ausrichtung des umgebenden Blocks des Seitenrahmens an. Im allgemeinen Fall, bei dem ein Seitenrahmen auf ein Seitenblatt gerendert wird, gibt es auch die Größe des Zielseitenblatts an.

Die Spezifikation erwähnt folgende CSS-Eigenschaften als anwendbar auf Seitenrahmen über die @page At-Regel. Diese wurden jedoch noch nicht von einem Benutzeragenten unterstützt.

Verbleibende Seiteneigenschaften
Merkmal CSS-Eigenschaften
bidi Eigenschaften direction
Hintergrund-Eigenschaften background-color
background-image
background-repeat
background-attachment
background-position
background
Rand-Eigenschaften border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border-top-color
border-right-color
border-bottom-color
border-left-color
border-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-short-style
border-top
border-right
border-bottom
border-left
border
Zähleigenschaften counter-reset
counter-increment
Farbe color
Schriftarten-Eigenschaften font-family
font-size
font-style
font-variant
font-weight
font
Höheneigenschaften height
min-height
max-height
Zeilenhöhe line-height
Randeigenschaften margin-top
margin-right
margin-bottom
margin-left
margin
Umriss-Eigenschaften outline-width
outline-style
outline-color
outline
Auffüllen-Eigenschaften padding-top
padding-right
padding-bottom
padding-left
padding
Zitate quotes
Texteigenschaften letter-spacing
text-align
text-decoration
text-indent
text-transform
white-space
word-spacing
Sichtbarkeit visibility
Breiten-Eigenschaften width
min-width
max-width

Beschreibung

Die @page Regel definiert Eigenschaften der Seitenbox. Die @page At-Regel kann über das CSS-Objektmodell-Interface CSSPageRule aufgerufen werden.

Hinweis: Das W3C diskutiert, wie mit viewport-bezogenen <length> Einheiten wie vh, vw, vmin und vmax umgegangen werden soll. Verwenden Sie diese Einheiten derzeit nicht innerhalb einer @page At-Regel.

Verwandte Eigenschaften

Die @page At-Regel ermöglicht es dem Benutzer, der Regel einen Namen zuzuweisen, der dann in einer Deklaration mit der Eigenschaft page aufgerufen wird.

page

Ermöglicht es einem Selektor, eine benutzerdefinierte benannte Seite zu verwenden.

Formale Syntax

@page = 
@page <page-selector-list>? { <declaration-rule-list> }

<page-selector-list> =
<page-selector>#

<page-selector> =
[ <ident-token>? <pseudo-page>* ]!

<pseudo-page> =
':' [ left | right | first | blank ]

Wo der <page-body> beinhaltet:

  • seiteneigenschaften
  • seitenrand-eigenschaften

und <pseudo-page> diese Pseudoklassen darstellt:

Rand-At-Regeln

Warnung: Die Rand-At-Regeln wurden von keinem Benutzeragenten implementiert (Stand: August 2023).

Die Rand-At-Regeln werden innerhalb der @page At-Regel verwendet. Sie zielen jeweils auf einen anderen Abschnitt der gedruckten Seite ab und gestalten den Bereich der gedruckten Seite basierend auf den im Stilblock festgelegten Eigenschaftswerten:

css
@page {
  @top-left {
    /* page-margin-properties */
  }
}

@top-left zielt auf die obere linke Ecke des Dokuments und wendet die Änderungen basierend auf den festgelegten seitenrand-eigenschaften an.

Weitere Rand-At-Regeln umfassen:

css
@top-left-corner
@top-left
@top-center
@top-right
@top-right-corner
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner
@left-top
@left-middle
@left-bottom
@right-top
@right-middle
@right-bottom

Seitenrand-Eigenschaften

Die Seitenrand-Eigenschaften sind die Menge der CSS-Eigenschaften, die in jeder einzelnen Rand-At-Regel festgelegt werden können. Sie umfassen:

Seitenrand-Eigenschaften
Merkmal CSS-Eigenschaften
bidi Eigenschaften direction
Hintergrund-Eigenschaften background-color
background-image
background-repeat
background-attachment
background-position
background
Rand-Eigenschaften border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border-top-color
border-right-color
border-bottom-color
border-left-color
border-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-short-style
border-top
border-right
border-bottom
border-left
border
Zähleigenschaften counter-reset
counter-increment
Inhalt content
Farbe color
Schriftarten-Eigenschaften font-family
font-size
font-style
font-variant
font-weight
font
Höheneigenschaften height
min-height
max-height
Zeilenhöhe line-height
Randeigenschaften margin-top
margin-right
margin-bottom
margin-left
margin
Umriss-Eigenschaften outline-width
outline-style
outline-color
outline
Auffüllen-Eigenschaften padding-top
padding-right
padding-bottom
padding-left
padding
Zitate quotes
Texteigenschaften letter-spacing
text-align
text-decoration
text-indent
text-transform
white-space
word-spacing
Vertikale Ausrichtung vertical-align
Sichtbarkeit visibility
Breiten-Eigenschaften width
min-width
max-width
Z-Index z-index

Benannte Seiten

Benannte Seiten ermöglichen das Durchführen eines seitenweisen Layouts und das Hinzufügen von Seitenumbruch auf deklarative Weise beim Drucken.

Benannte Seiten können mit der page Eigenschaft angewendet werden. Dies ermöglicht es dem Benutzer, unterschiedliche Seitenkonfigurationen für den Einsatz in Drucklayouts zu erstellen.

Ein Beispiel hierfür finden Sie in den page Beispielen.

Beispiele

Verwendung der size Eigenschaft zur Änderung der Seitenausrichtung

Dieses Beispiel zeigt, wie die <section>s in einzelne Seiten im Querformat aufgeteilt werden, wobei jede Seite beim Drucken einen Rand von 20% hat.

HTML

html
<button>Print Webpage</button>
<article>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
</article>

CSS

css
@page {
  size: landscape;
  margin: 20%;
}

section {
  page-break-after: always;
  break-after: page;
}

@media print {
  button {
    display: none;
  }
}

JavaScript

js
const button = document.querySelector("button");

button.addEventListener("click", () => {
  window.print();
});

Ergebnis

Durch Klicken auf die Druck-Schaltfläche wird ein Druckdialog gestartet, mit dem die HTML-Abschnitte in einzelne Seiten aufgeteilt werden.

@page Pseudoklassen-Beispiele

Bitte beziehen Sie sich auf die verschiedenen Pseudoklassen von @page für Beispiele.

Spezifikationen

Specification
CSS Paged Media Module Level 3
# at-page-rule
CSS Logical Properties and Values Level 1
# page

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch