- Le responsive design, au cœur de l’expérience web, doit prendre en compte non seulement les appareils, mais aussi les supports de sortie (impression)
- Pour des raisons variées comme l’accessibilité, les exigences légales ou les déplacements, la qualité et l’utilité d’une page web imprimée restent importantes
- Les fonctionnalités CSS dédiées à l’impression comme
@media print, @page, les unités absolues et les sauts de page permettent de créer une mise en page propre, un découpage adapté et une impression efficace
- Il faut masquer les éléments inutiles comme la navigation ou le pied de page et compléter les informations pour le papier, notamment pour les liens et les abréviations
- En tenant compte de l’impression en noir et blanc, de l’économie d’encre et de la lisibilité, on peut limiter l’usage des couleurs et des arrière-plans tout en améliorant de façon complémentaire l’expérience à l’écran et à l’impression
Pourquoi concevoir le web pour l’impression
- Du point de vue de l’accessibilité, les personnes qui ne peuvent pas regarder un écran longtemps peuvent aussi accéder à l’information via du contenu imprimé
- Voyage sans connexion Internet, obligations légales ou de conservation documentaire au sein d’une organisation : les cas d’usage de l’impression restent nombreux
- Il existe aussi de nombreux points communs avec des formats de publication numérique comme EPUB, ce qui fait des styles d’impression une compétence très extensible
- Comme les gens impriment réellement des sites web pour les utiliser, la prise en charge de l’impression contribue à améliorer la qualité globale de l’expérience utilisateur
Comment appliquer des styles d’impression
- Avec
@media print en CSS, il est possible de définir des styles réservés à l’impression
- Il existe plusieurs méthodes, comme
<link rel="stylesheet" media="print">, @import url("...") print ou encore @media print { ... } dans une feuille CSS interne
- Pour les styles réservés à l’écran, on utilise
@media screen
Tester les styles d’impression
- Des navigateurs comme Edge, Chrome, Firefox et Safari proposent des fonctions de simulation du média impression
- Le résultat de la simulation peut différer du document réellement imprimé, et la plupart des navigateurs désactivent les arrière-plans par défaut (pour économiser l’encre)
- Il est recommandé de tester en tenant compte des conditions réelles d’impression
Unités absolues et règle @page
- Le CSS fournit diverses unités absolues comme cm, mm, in, pt et px, utiles pour des ajustements précis en impression réelle
- La règle
@page permet de définir le format de papier (A4, A5, etc.), les marges, l’orientation, etc.
- Il faut aussi tenir compte des limites de la zone imprimable du matériel, ainsi que des pieds de page et en-têtes ajoutés automatiquement par le navigateur
Découpage des pages et gestion des paragraphes
- Pour les contenus longs, le découpage en pages est indispensable, et les propriétés
break-before, break-after, break-inside permettent d’en contrôler précisément l’emplacement
- L’ancienne syntaxe
page-break-* reste également compatible
- Les propriétés
orphans et widows permettent de limiter les lignes isolées au début ou à la fin d’un paragraphe (même si certains navigateurs ne les prennent pas en charge)
- Avec
box-decoration-break, on peut préserver la cohérence visuelle d’éléments comme les bordures lors des sauts de page
Adapter les éléments interactifs à l’impression
- Sur papier, les liens et les abréviations ne sont pas interactifs ; on peut donc ajouter l’URL ou des informations utiles à l’impression avec
a[href]:after, abbr[title]:after, etc.
- Les éléments de formulaire peuvent être disposés comme des champs à remplir sur papier, et les conteneurs défilants doivent parfois être étendus avec
overflow: visible
- Les éléments inutiles comme la navigation ou le pied de page peuvent être supprimés avec
display: none, et on peut contrôler l’impression pour n’imprimer que main
Couleurs, encre et lisibilité
- En partant du principe d’une impression en noir et blanc et d’une économie d’encre, on peut remplacer certains effets visuels par des bordures plutôt que des couleurs d’arrière-plan
print-color-adjust: exact permet de forcer la conservation des couleurs sur certains éléments uniquement (à utiliser seulement si nécessaire)- Il est recommandé de limiter les images au strict nécessaire et de retirer les éléments gourmands en encre, comme les publicités
Conclusion
- Le web existe non seulement à l’écran, mais aussi dans le monde physique (le papier)
- Les styles d’impression CSS sont un élément clé pour renforcer l’accessibilité et la qualité de l’expérience utilisateur
- Pour que tous les utilisateurs puissent consommer le contenu de différentes façons, la prise en charge de l’impression est une compétence essentielle du développement web moderne
2 commentaires
En revanche, ce billet lui-même n’est pas optimisé pour l’impression.
Des éléments d’interface inutiles à l’impression, comme COPY TO CLIPBOARD, sont imprimés,
et les extraits de code sont tronqués avec une barre de défilement horizontale qui s’imprime.
Vous pouvez aussi consulter ce récapitulatif CSS pour l’impression sur papier.
L’impression d’une page web sur papier et l’export en PDF sont encore deux choses différentes (par exemple parce qu’on peut utiliser des couleurs sans se soucier de l’encre, ou parce qu’on peut utiliser des hyperliens), et pour cela il existe des bibliothèques comme paged.js.
C’est un point utile à prendre en compte lors de la création de manuels, de supports de formation et de fiches d’exercices !