@page

Baseline 2024 *
Newly available

Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

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 in einem Ausdruck oder einen Teil davon mit ihren verschiedenen Pseudoklassen anzusprechen.

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 Seitendeskriptoren und Margin-At-Regeln enthalten. Die folgenden Deskriptoren 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 das Layout der Seite nicht; die Drehung wird nach dem Layout im Ausgabemedium angewendet.

size

Gibt die Zielgröße und Ausrichtung des enthaltenden Blocks der Seitenbox an. Im allgemeinen Fall, bei dem eine Seitenbox auf ein einzelnes Seitenblatt gerendert wird, gibt sie auch die Größe des Zielseitenblatts an.

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

Verbleibende Seiteneigenschaften
Funktion CSS-Eigenschaften
bidi-Eigenschaften direction
Hintergrund-Eigenschaften background-color
background-image
background-repeat
background-attachment
background-position
background
Rahmen-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ähler-Eigenschaften counter-reset
counter-increment
Farbe color
Schrift-Eigenschaften font-family
font-size
font-style
font-variant
font-weight
font
Höhen-Eigenschaften height
min-height
max-height
Zeilenhöhe line-height
Rand-Eigenschaften margin-top
margin-right
margin-bottom
margin-left
margin
Umriss-Eigenschaften outline-width
outline-style
outline-color
outline
Polster-Eigenschaften padding-top
padding-right
padding-bottom
padding-left
padding
Anführungszeichen quotes
Text-Eigenschaften 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 die Eigenschaften der Seitenbox. Die @page-At-Regel kann über die CSS-Objektmodell-Schnittstelle CSSPageRule angesprochen werden.

Hinweis: Das W3C diskutiert, wie mit viewportbezogenen <length>-Einheiten, vh, vw, vmin und vmax umgegangen werden soll. Verwenden Sie diese meanwhile 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 page-Eigenschaft aufgerufen wird.

page

Erlaubt 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 ]

Wobei der <page-body> Folgendes beinhaltet:

  • Seiten-Eigenschaften
  • Seitenrand-Eigenschaften

und <pseudo-page> diese Pseudoklassen darstellt:

Margin-At-Regeln

Die Margin-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 in dem Style-Block gesetzten Eigenschaftswerten:

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

@top-left zielt auf den oberen linken Bereich des Dokuments ab und wendet die Änderungen basierend auf den gesetzten Seitenrand-Eigenschaftswerten an.

Weitere Margin-At-Regeln beinhalten:

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 von CSS-Eigenschaften, die in jeder individuellen Margin-At-Regel gesetzt werden können. Sie beinhalten:

Seitenrand-Eigenschaften
Funktion CSS-Eigenschaften
bidi-Eigenschaften direction
Hintergrund-Eigenschaften background-color
background-image
background-repeat
background-attachment
background-position
background
Rahmen-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ähler-Eigenschaften counter-reset
counter-increment
Inhalt content
Farbe color
Schrift-Eigenschaften font-family
font-size
font-style
font-variant
font-weight
font
Höhen-Eigenschaften height
min-height
max-height
Zeilenhöhe line-height
Rand-Eigenschaften margin-top
margin-right
margin-bottom
margin-left
margin
Umriss-Eigenschaften outline-width
outline-style
outline-color
outline
Polster-Eigenschaften padding-top
padding-right
padding-bottom
padding-left
padding
Anführungszeichen quotes
Text-Eigenschaften 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 pro-Seiten-Layouts und das Hinzufügen von Seitenumbrüchen auf deklarative Weise beim Drucken.

Benannte Seiten können mit der page-Eigenschaft angewendet werden. Dies ermöglicht es dem Benutzer, verschiedene Seiteneinstellungen für den Druck-Layouts zu erstellen.

Ein Beispiel hierfür finden Sie in den Seitenbeispielen.

Beispiele

Verwendung der Size-Eigenschaft, um die Seitenausrichtung zu ändern

Dieses Beispiel zeigt, wie man die <section>-Elemente in einzelne Seiten im Querformat aufteilt, wobei jede Seite beim Drucken einen Rand von 20% hat. Beim Klicken auf die Drucktaste wird ein Druckdialog geöffnet, mit dem die HTML-Abschnitte in einzelne Seiten aufgeteilt werden.

html
<button>Print page</button>
<article>
  <section>
    <h2>Header one</h2>
    <p>Paragraph one.</p>
  </section>
  <section>
    <h2>Header two</h2>
    <p>Paragraph two.</p>
  </section>
  <section>
    <h2>Header three</h2>
    <p>Paragraph three.</p>
  </section>
</article>
js
const button = document.querySelector("button");

button.addEventListener("click", () => {
  window.print();
});
css
@page {
  size: landscape;
  margin: 2cm;
}

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

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

@Page-Pseudoklassen-Beispiele

Siehe 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@page
@bottom-center page-margin box
Experimental
@bottom-left page-margin box
Experimental
@bottom-left-corner page-margin box
Experimental
@bottom-right page-margin box
Experimental
@bottom-right-corner page-margin box
Experimental
@left-bottom page-margin box
Experimental
@left-middle page-margin box
Experimental
@left-top page-margin box
Experimental
page-orientation descriptor
@right-bottom page-margin box
Experimental
@right-middle page-margin box
Experimental
@right-top page-margin box
Experimental
size descriptor
jis-b4 page size
jis-b5 page size
@top-center page-margin box
Experimental
@top-left page-margin box
Experimental
@top-left-corner page-margin box
Experimental
@top-right page-margin box
Experimental
@top-right-corner page-margin box
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Siehe auch