@page

Syntaxe

/* Cible toutes les pages */
@page {
  size: 8.5in 9in;
  margin-top: 4in;
}

/* Cible toutes les pages paires */
@page :left {
  margin-top: 4in;
}

/* Cible toutes les pages impaires */
@page :right {
  size: 11in;
  margin-top: 4in;
}

/* Cible tous les sélecteurs avec `page: wide;` défini */
@page wide {
  size: a4 landscape;
}

@page {
  /* zone de marge en haut à droite affichant le numéro de page */
  @top-right {
    content: "Page " counter(pageNumber);
  }
}

Propriétés de page

La règle @page ne peut contenir que des descripteurs de page et des règles de marge. Les descripteurs suivants ont été implémentés par au moins un navigateur :

margin

Définit les marges de la page. Les propriétés individuelles margin-top, margin-right, margin-bottom et margin-left peuvent aussi être utilisées.

page-orientation

Définit l'orientation de la page. Cela n'affecte pas la mise en page : la rotation est appliquée après la mise en page sur le support de sortie.

size

Définit la taille cible et l'orientation du bloc englobant de la boîte de page. Dans le cas général, où une boîte de page est rendue sur une feuille de page, cela indique aussi la taille de la feuille de destination.

La spécification mentionne que les propriétés CSS suivantes pourraient s'appliquer aux boîtes de page via la règle @page. Cependant, elles ne sont pas encore prises en charge par les navigateurs.

Description

La règle @page définit les propriétés de la boîte de page. La règle @page est accessible via l'interface du modèle objet CSS CSSPageRule.

Propriétés associées

La règle @page permet d'attribuer un nom à la règle, qui pourra ensuite être utilisé dans une déclaration via la propriété page.

page

Permet à un sélecteur d'utiliser une page nommée définie par l'utilisateur·ice.

Syntaxe formelle

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

Où <page-body> inclut :

• page-properties
• page-margin properties

et <pseudo-page> représente ces pseudo-classes :

• :blank
• :first
• :left
• :right

Règles de marge

Les règles de marge sont utilisées à l'intérieur de la règle @page. Chacune cible une section différente de la page imprimée, en stylisant la zone de la page imprimée selon les valeurs définies dans le bloc de style :

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

@top-left cible le coin supérieur gauche du document et applique les modifications selon les propriétés de marge définies.

Les autres règles de marge incluent :

@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

Propriétés de marge de page

Les propriétés de marge de page sont l'ensemble des propriétés CSS pouvant être définies dans une règle de marge individuelle. Elles incluent :

Pages nommées

Les pages nommées permettent de réaliser une mise en page par page et d'ajouter des sauts de page de manière déclarative lors de l'impression.

Les pages nommées peuvent être appliquées à l'aide de la propriété page. Cela permet de créer différentes configurations de page à utiliser dans les mises en page d'impression.

Un exemple de ceci se trouve dans les exemples de la page page.

Exemples

Utiliser la propriété size pour changer l'orientation de la page

Cet exemple montre comment diviser les <section> en pages individuelles au format landscape, chaque page ayant une marge de 20 % lors de l'impression. Cliquer sur le bouton d'impression ouvrira la boîte de dialogue d'impression avec les sections HTML réparties sur des pages distinctes.

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

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

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

@page {
  size: landscape;
  margin: 2cm;
}

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

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

body {
  font-family: "Helvetica", sans-serif;
  background-color: silver;
}

article {
  width: 100%;
}

section {
  display: grid;
  background-color: white;
  border-radius: 0.6rem;
  justify-items: center;
  padding: 1rem;
  width: 50%;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  margin: 0 auto;
  margin-block-end: 1rem;
  border: 1px dashed;
}

Exemples de pseudo-classes @page

Voir les différentes pseudo-classes de @page pour des exemples.

• :blank
• :first
• :left
• :right

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété page
• Le descripteur size de @page
• Le module Médias paginés CSS
• Le ticket [META] CSS Paged Media Module Level 3 ^(angl.) du Bugzilla pour suivre l'avancement du sujet (compteurs par page, etc.)