Feuilles de style d'impression : rendre une page web exploitable sur papier et en PDF

Objectif

Obtenir une page qui, imprimée ou enregistrée en PDF, ne contient que le contenu, avec une typographie lisible, des tableaux intacts, des cibles de liens visibles et des sauts de page à des endroits pertinents.

Prérequis

Un balisage sémantique (les règles d'impression cibleront nav, header, footer, aside, main), un aperçu avant impression du navigateur pour les tests, et la connaissance des mécanismes décrits par le guide d'impression de MDN : @media print pour les règles propres à l'impression, la règle @ @page pour les dimensions de page, l'orientation et les marges, les événements beforeprint/afterprint pour ajuster le document avant et après une demande d'impression, et window.print() pour ouvrir la boîte de dialogue.

Étapes

1. Ajouter un bloc @media print à la fin de la feuille de style (la spécificité continue de s'appliquer). Masquer l'habillage : nav, header, footer, aside, .toolbar, button { display: none } ; supprimer les positionnements fixes et adhérents, qui sinon se répètent sur chaque page.
2. Réinitialiser la page : fond blanc, texte noir, une police avec empattements ou la police du corps de texte, à une taille adaptée au papier, max-width: none sur la colonne de contenu pour qu'elle occupe la largeur de la page.
3. Déplier ce que l'écran masque : ouvrir les éléments details, afficher tous les panneaux d'onglets et les contenus d'accordéons, et imprimer en entier le texte tronqué. Utiliser l'événement beforeprint là où le CSS seul ne suffit pas (par exemple des listes virtualisées qui ne rendent que les lignes visibles).
4. Faire apparaître la cible des liens : a[href^="http"]::after { content: " (" attr(href) ")" }, à l'exclusion des ancres internes et des liens dont le texte est déjà l'URL. Afficher de même les titres des éléments abbr lorsqu'ils sont utiles.
5. Contrôler les sauts : break-inside: avoid sur les tableaux, les figures, les blocs de code et les groupes présentés sous forme de cartes ; break-after: avoid sur les titres pour qu'ils ne se retrouvent pas isolés en bas de page ; break-before: page avant les sections principales lorsque c'est pertinent ; laisser thead sur sa valeur par défaut display: table-header-group (ne pas la redéfinir), car les moteurs d'impression peuvent répéter les lignes d'en-tête sur chaque page occupée par un tableau.
6. Définir @page { size: A4; margin: 2cm } (ou letter), et envisager @page :first pour une marge différente sur la première page.
7. Couleur : les navigateurs suppriment généralement les couleurs et les images de fond à l'impression ; lorsqu'un fond porte du sens (pastilles d'état, coloration syntaxique), appliquer print-color-adjust: exact à cet élément seulement, et utiliser plutôt une bordure ou un libellé textuel pour les autres éléments.
8. Tester dans l'aperçu avant impression de deux navigateurs, en portrait comme en paysage, et une fois avec l'enregistrement au format PDF ; vérifier le nombre de pages et s'assurer qu'aucun sélecteur trop large n'a masqué quelque chose d'important.

Résultat attendu

L'impression produit un document compact contenant tout le contenu, sans navigation, avec du code et des tableaux lisibles, et des URL qu'un lecteur peut saisir à partir du papier.

Limites et base de vérification

Le comportement suit la documentation MDN citée ; la prise en charge des sauts de page et les fonctionnalités de @page varient selon les moteurs, et les générateurs de PDF sans interface graphique ont leurs propres valeurs par défaut. Le contenu interactif (cartes, graphiques dessinés sur un canvas) nécessite une image statique de remplacement fournie séparément.

Masquer l'habillage du site, pas tous les en-têtes

Les éléments header, footer et aside ont pour portée leur section la plus proche ; un simple header { display: none } supprime donc aussi le bloc de titre d'un article, les notes de bas de section et l'attribution d'une citation. Cibler plutôt l'habillage au niveau de la page, par position ou par classe :

@media print {
  body > header, body > footer, body > nav,
  .site-sidebar, .toolbar { display: none; }
  article header, article footer { display: block; }
}

Conserver les boutons qui indiquent un état (un bouton à bascule enfoncé, l'onglet sélectionné) et ne masquer que les commandes sans signification à l'impression. Reprendre ensuite l'étape 8 en inversant la question : dresser la liste de ce que la vue d'impression est censée contenir et vérifier que chaque élément est bien présent, plutôt que de chercher ce qui manque.