@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 gedruckter Seiten zu modifizieren. Sie zielt auf die Anpassungen der Dimensionen, Ausrichtung und Ränder der Seite ab. Die @page At-Regel kann verwendet werden, um alle Seiten in einem Ausdruck oder einen Teil davon mithilfe ihrer verschiedenen Pseudoklassen zu definieren.

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);
  }
}

Seiten-Eigenschaften

Die @page At-Regel kann nur Seiten-Deskriptoren und Margin-At-Regeln enthalten. Die folgenden Deskriptoren wurden von mindestens einem Browser implementiert:

margin

Gibt die Seitenränder an. Einzelne Margin-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 im Ausgabemedium angewendet.

size

Gibt die Zielgröße und Ausrichtung des Seitenrahmens an. Im Allgemeinen, wenn ein Seitenrahmen auf ein Blatt Papier gerendert wird, gibt dies auch die Größe des Zielblatts an.

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

Übrige Seiten-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
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
Margin-Eigenschaften margin-top
margin-right
margin-bottom
margin-left
margin
Umriss-Eigenschaften outline-width
outline-style
outline-color
outline
Innenabstands-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 des Seitenrahmens. Die @page At-Regel kann über die CSS-Objektmodell-Schnittstelle CSSPageRule aufgerufen werden.

Hinweis: Das W3C diskutiert, wie mit Viewport-bezogenen <length> Einheiten, vh, vw, vmin und vmax umzugehen ist. In der Zwischenzeit sollten Sie diese nicht innerhalb einer @page At-Regel verwenden.

Verwandte Eigenschaften

Die @page At-Regel ermöglicht es, einen Namen zuzuweisen, der dann in einer Erklärung mit der page Eigenschaft 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> enthält:

  • Seiten-Eigenschaften
  • Seiten-Margin-Eigenschaften

und <pseudo-page> diese Pseudoklassen darstellt:

Margin-At-Regeln

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

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

@top-left zielt auf die obere linke Ecke des Dokuments und wendet die basierenden Änderungen auf die festgelegten Seiten-Margin-Eigenschaften an.

Andere 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

Seiten-Margin-Eigenschaften

Die Seiten-Margin-Eigenschaften sind die Menge an CSS-Eigenschaften, die in einer beliebigen individuellen Margin-At-Regel festgelegt werden können. Sie umfassen:

Seiten-Margin-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
Margin-Eigenschaften margin-top
margin-right
margin-bottom
margin-left
margin
Umriss-Eigenschaften outline-width
outline-style
outline-color
outline
Innenabstands-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 die Durchführung von Layouts pro Seite 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 Seitenkonfigurationen für den Einsatz in Drucklayouts zu erstellen.

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

Beispiele

Verwenden der Size-Eigenschaft zum Ändern der Seitenausrichtung

Dieses Beispiel zeigt, wie die <section>s in einzelne Seiten im landscape-Format 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

Ein Klick auf die Drucktaste öffnet ein Druckdialog, bei dem die HTML-Abschnitte in einzelne Seiten aufgeteilt werden.

Beispiele für @page Pseudoklassen

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