Propriété CSS page-break-before

La propriété CSS page-break-before contrôle si un saut de page est forcé, évité ou laissé automatique avant un élément donné lorsque le document est imprimé ou affiché dans un contexte de média paginé (impression, export PDF, aperçu avant impression).

Sur un écran normal, le contenu web s'écoule en un défilement continu, il n'y a donc rien à couper. Mais lorsque cette même page est envoyée à une imprimante ou enregistrée en PDF, le navigateur doit décider où une feuille de papier se termine et où la suivante commence. page-break-before vous permet d'influencer ces décisions — par exemple, pour commencer chaque titre de chapitre en haut d'une nouvelle page, ou pour garder le contenu ensemble.

La propriété n'a aucun effet visible à l'écran ; vous la placez généralement dans un bloc @media print afin que les règles s'appliquent uniquement lors de l'impression. Elle ne s'applique pas aux éléments positionnés en absolu.

Syntaxe

page-break-before: auto | always | avoid | left | right | initial | inherit;

Exemple : commencer chaque chapitre sur une nouvelle page

Une utilisation courante consiste à forcer chaque titre de premier niveau à commencer sur sa propre page imprimée. Appliquez page-break-before: always à chaque h2 pour qu'une nouvelle page commence avant lui :

@media print {
  h2 {
    page-break-before: always;
  }
}

<h2>Chapter 1</h2>
<p>Content of chapter one...</p>

<h2>Chapter 2</h2>
<p>Content of chapter two...</p>

Lors de l'impression, « Chapitre 2 » commence en haut d'une nouvelle page, même si « Chapitre 1 » laissait de la place sur la page courante.

Exemple : forcer une page gauche ou droite

Pour les documents imprimés recto-verso (livres, rapports), vous pouvez contrôler de quel côté d'une double page l'élément commence. Utilisez left ou right pour forcer une page impaire ou paire avant l'élément :

@media print {
  .chapter-start {
    page-break-before: right; /* start on a right-hand (odd) page */
  }
}

Si l'élément devait déjà commencer sur une page droite, le navigateur insère une page blanche pour le repousser à la prochaine page droite. C'est le même comportement utilisé par les logiciels de composition typographique pour les ouvertures de chapitres dans les livres.

Exemple : supprimer les sauts indésirables

Utilisez avoid pour décourager un saut immédiatement avant un élément. Cela est utile pour empêcher un paragraphe d'introduction d'être séparé du titre qui le précède :

@media print {
  h2 + p {
    page-break-before: avoid;
  }
}

Notez que avoid est une indication, pas une garantie. S'il n'y a pas d'autre endroit raisonnable pour couper la page, le navigateur peut tout de même insérer un saut.

Valeurs

Les valeurs left et right sont destinées à l'impression recto-verso, lorsque vous souhaitez que le contenu commence d'un côté spécifique de la double page.

Compatibilité navigateurs et points d'attention

• Tous les navigateurs majeurs prennent en charge auto, always et avoid. La prise en charge de left et right est moins cohérente entre les navigateurs et les moteurs de rendu PDF.
• La propriété est ignorée sur les éléments en ligne et les éléments positionnés en absolu ou en fixe. Ciblez des éléments de niveau bloc comme <div>, <section>, <h1>–<h6> ou <p>.
• Définir page-break-before: always sur chaque élément d'une liste ou d'un tableau peut produire de nombreuses pages courtes. Utilisez-le de manière sélective sur les limites logiques de section.
• page-break-before sur un élément enfant s'applique à la boîte de niveau bloc la plus proche qu'il génère — pas au conteneur parent.

Conseil : combiner avec les autres propriétés de saut de page

page-break-before est l'une des trois propriétés héritées pour la mise en page à l'impression. Utilisez-les ensemble pour un contrôle complet :

• page-break-after — contrôle les sauts après un élément.
• page-break-inside — empêche un élément (un tableau, une figure ou un bloc de code) d'être réparti sur deux pages.

Pour le code moderne, migrez vers les propriétés de fragmentation équivalentes :

• break-before — remplace page-break-before.
• break-after — remplace page-break-after.
• break-inside — remplace page-break-inside.

Consultez le guide @media print pour des conseils sur la création d'une feuille de style d'impression complète, et les propriétés orphans et widows pour contrôler combien de lignes d'un paragraphe sont laissées sur une page avant ou après un saut.

Pratique