Comment insérer un saut de page dynamique en HTML avec JavaScript et CSS

Gérer les sauts de page en HTML est une problématique courante dès qu’un projet web implique une mise en page destinée à l’impression ou à la génération de documents. Que l’on travaille avec des tableaux, des blocs de texte ou des éléments dynamiques, il existe plusieurs approches complémentaires en CSS et en JavaScript pour contrôler finement la pagination. Voici un tour d’horizon des techniques les plus efficaces.

Utiliser les propriétés CSS page-break et break-after

Le CSS offre depuis longtemps des propriétés dédiées à la gestion des sauts de page, initialement sous la forme de page-break-before, page-break-after et page-break-inside. Ces propriétés ont été modernisées dans les spécifications récentes par leurs équivalents break-before, break-after et break-inside, qui s’appliquent de manière plus large aux contextes de fragmentation, qu’il s’agisse de colonnes CSS ou de pages imprimées. L’idée générale est de signaler au navigateur à quel endroit du document il doit couper le flux visuel pour passer à une nouvelle page.

Configurer la règle break-after pour forcer une nouvelle page

Pour insérer un saut de page après un élément donné, on applique la valeur always à la propriété break-after. Concrètement, un div auquel on associe ce style dans une feuille CSS ou dans un bloc @media print sera suivi d’un saut obligatoire vers la page suivante. Cette déclaration se rédige ainsi dans le code : break-after: always;. La valeur always garantit qu’aucun contenu ne déborde sur la page courante après l’élément concerné. Cette approche est particulièrement utile pour structurer un rapport ou un document long en plusieurs sections distinctes, chacune commençant sur une nouvelle page à l’impression.

La propriété symétrique break-before: always produit un effet identique mais en amont de l’élément : le navigateur insère alors le saut avant d’afficher le bloc ciblé. Ces deux règles peuvent être combinées selon la logique du document, en veillant à ne pas créer de sauts redondants qui généreraient des pages blanches superflues.

Gérer les options avoid et always sur les éléments div

À l’inverse de always, la valeur avoid demande au moteur de rendu d’éviter un saut à cet endroit précis si c’est possible. Elle s’avère précieuse pour protéger certains blocs cohérents, par exemple un titre suivi de son premier paragraphe ou un encadré d’information. En appliquant break-after: avoid à un titre, on réduit le risque de le voir isolé en bas de page, séparé du texte qu’il introduit. La valeur auto, quant à elle, laisse le navigateur décider librement en fonction de l’espace disponible, ce qui correspond au comportement par défaut de tout élément div ou bloc de texte.

Maîtriser l’impression des tableaux et des blocs de texte

Les tableaux constituent un cas particulièrement délicat : leurs lignes peuvent être coupées en plein milieu d’une cellule lors du passage à une nouvelle page, ce qui nuit gravement à la lisibilité du document imprimé. Le CSS propose des solutions ciblées pour y remédier, en agissant directement sur les lignes du tableau ou sur les blocs de texte encadrant ces données.

Éviter les coupures de ligne intempestives avec break-inside

La propriété break-inside permet de contrôler ce qui se passe à l’intérieur même d’un élément lors d’une fragmentation. En lui assignant la valeur avoid, on indique que le contenu du bloc ne doit pas être coupé entre deux pages. Appliquée aux lignes d’un tableau via tr { break-inside: avoid; }, cette règle préserve l’intégrité visuelle de chaque ligne, évitant les désagréables coupures au milieu d’une cellule. Cette technique fonctionne aussi très bien sur des blocs de texte, des messages ou des encadrés qu’on souhaite maintenir solidaires. Pour un style d’impression cohérent, il est recommandé de regrouper toutes ces règles dans un bloc @media print afin qu’elles n’influencent pas le rendu à l’écran.

Ajuster le style du tableau et des marges margin left et right

Au-delà du contrôle des sauts, la mise en page d’un tableau destiné à l’impression nécessite souvent d’ajuster les marges. Les propriétés margin-left et margin-right permettent de centrer un tableau ou d’imposer des espaces latéraux adaptés au format papier. Un tableau dont la largeur dépasse la zone imprimable sera tronqué sur certains navigateurs ; définir une largeur maximale en pourcentage couplée à des marges automatiques avec margin: 0 auto résout généralement ce problème. La gestion du style global de la page imprimée passe aussi par la déclaration @page qui permet de préciser les marges extérieures du document entier.

Manipuler le code JavaScript pour un saut dynamique

Si le CSS suffit pour des cas statiques, les projets qui génèrent du contenu à la volée nécessitent souvent d’injecter des sauts de page de façon programmatique. JavaScript, le langage de script incontournable des navigateurs, permet de manipuler le DOM en temps réel pour insérer ou retirer des éléments HTML de rupture juste avant de lancer l’impression. La programmation côté client déplace ainsi la logique applicative vers le navigateur, rendant les documents dynamiques sans intervention serveur.

Injecter un element HTML de rupture avant l’impression

Une approche courante consiste à écouter l’événement beforeprint, que le navigateur déclenche juste avant l’ouverture de la boîte de dialogue d’impression. Dans la fonction abonnée à cet événement, on crée un nouvel élément div avec JavaScript, on lui applique dynamiquement le style break-after: always, puis on l’insère au bon endroit dans l’arbre DOM grâce aux méthodes comme document.getElementById ou document.querySelector. Il est tout aussi important de supprimer ces éléments lors de l’événement afterprint pour ne pas polluer le rendu à l’écran. En déclarant les variables locales avec let et en utilisant l’égalité stricte === pour les vérifications de conditions, on adopte les bonnes pratiques introduites par ES6, la version du langage publiée en 2015, qui a profondément modernisé la syntaxe JavaScript.

Modifier le style des messages et du contenu à la volée

JavaScript permet également de modifier dynamiquement le style des messages ou de n’importe quel bloc de texte avant l’impression. Par exemple, on peut parcourir une collection d’éléments avec une boucle for ou while, tester leur contenu avec des conditionnelles if et else, puis leur appliquer break-before: always ou break-inside: avoid selon leur nature. Cette logique applicative, exécutée intégralement dans le navigateur web, offre une flexibilité maximale pour adapter la pagination à des contenus variables, comme des listes de produits, des rapports ou des messages dont le nombre et la longueur changent à chaque session. En combinant intelligemment CSS et JavaScript, on dispose d’un contrôle complet sur les sauts de pages dans tout document HTML complexe.