Impression avec saut de page en CSS

C'est une chose de faire de la mise en page pour le web, c'en est une autre de pouvoir l'imprimer correctement. En fait, ce n'est pas tout à fait évident, surtout quand on veut faire imprimer une liste de type "publipostage", où on doit faire un saut de page pour créer des lettres distrinctes. Lorsqu'on détecte un nouvel enregistrement, on veut passer à la page suivante pour le prochain envoi plutôt que de poursuivre l'impression sur la même page.

Le truc que j'ai trouvé pour palier à ce problème est d'utiliser une propriété CSS : page-break-after. À partir de ce snippet de code HTML, on peut appliquer le CSS comme suit :

<h3>Page 1</h3>
<p>Lorem ipsum dolor sit amet...</p>
<br style="page-break-after:always;" />

<h3>Page 2</h3>
<p>Lorem ipsum dolor sit amet...</p>
<br style="page-break-after:always;" />

<h3>Page 3</h3>
<p>Lorem ipsum dolor sit amet...</p>

Faites un aperçu avant impression (print preview) et vous verrez que chaque entête se retrouve sur une page différente. Évitez aussi d'en placer un après le dernier bloc si vous ne voulez pas imprimer une page blanche.

Dire qu'on disait qu'avec l'arrivée de l'informatique, on imprimerait moins de papier. Visitez le site w3schools.com pour en apprendre plus sur les styles CSS pour l'impression et devenez maître dans l'art de faire gaspiller des feuilles blanches à vos clients!