Malgré l’avènement des smartphones, encore beaucoup d’utilisateurs ont le réflexe d’imprimer les informations qu’ils trouvent sur internet, surtout concernant leurs achats.
Cependant, le rendu d’une page web n’est nativement pas fait pour s’afficher sur une feuille. Cela peut nous amener à avoir un résultat assez aléatoire : impression de 3 pages juste pour avoir une information, informations peu lisibles, impression d’éléments non-essentiels (comme le header ou le footer), etc.
En tant que développeurs, nous sommes habitués à utiliser les feuilles de style afin de gérer l’affichage du style sur les différents écrans. Mais il est aussi possible d’avoir un style dédié à l’impression, ce qui nous permet d’avoir un rendu différent de la version web qui sera plus qualitatif sur papier.
Les spécificités du style destiné à l’impression
Afin d’adapter au mieux le style du site sur une feuille, il est utile de connaitre certaines spécificités de styles liées à l’impression.
Par exemple, lorsque l’on fait du style pour une page web, celui-ci doit s’adapter aux différentes tailles d’écrans, différentes orientations d’écrans, différentes hauteurs… ce qui n’est pas le cas d’une feuille blanche (nous parlons ici d’une feuille A4, mais il est possible d’adapter son style d’impression sur des formats différents).
Cependant, une mise en page complexe peut être difficile à mettre en place dans un contexte d’impression : tous les navigateurs ne supportent pas de la même façon les balises d’impression (surtout IE). Tout ce qui concerne la gestion des marges, des sauts des pages, des propriétés avancées de mises en forme sur papier peut poser problème.
C’est pour cela qu’il est plutôt conseillé de faire une mise en page simple et efficace, pour que tous les utilisateurs aient le même rendu.
Il faut penser que certains utilisateurs peuvent imprimer le rendu en noir et blanc (par économie d’encre ou s’ils ont une imprimante laser). Il faut donc que les contrastes entre le texte et leur fond soient suffisamment élevés.
De plus, la plupart des navigateurs désactivent les images et les couleurs de fond d’un site lors de l’impression d’une page web.
La mise en place de la feuille de style
Pour mettre en place ce style dédié à l’impression, nous avons deux solutions:
- utiliser la balise
@media print{}dans une des feuilles de style appelée sur le site
@media print {
body {
font-size: 14px;
}
}
- créer une feuille de style à part avec comme propriété media
print. Si cette propriété n’est pas définie, le style s’appliquera sur tous les type de média, y compris la version web. Ensuite il suffit de la lier au projet comme une feuille de style classique :
<link media="print" href="print.css" />
La première solution est tout à fait viable et peut être utile si l’on prévoit de nombreuses impressions sur le site : en utilisant @media print{}, il est plus facile de prévoir le style d’impression au fur et à mesure que le projet évolue.
Cependant, la deuxième solution parait la plus adaptée car segmenter son code permet une meilleur lisibilité et maintenabilité du projet.
Lors de la création de cette feuille de style, son ordre d’appel est important. Elle doit être appelée sous les autres feuilles de style afin de surcharger uniquement les propriétés de style qui nous intéresse, sans devoir tout recommencer.
Cependant il faut faire attention : en se basant sur le style web, certaines propriétés peuvent poser problème (des tailles de textes en em, des tailles de blocs en pixels…). Il ne faut donc pas hésiter à surcharger certains styles pour un affichage correct.
Afin de ne pas avoir à surcharger trop d’éléments, il est aussi possible de créer deux feuilles de style séparées : une appelée uniquement pour le web (avec la propriété media screen) et une pour le print. Même si refaire le style de zéro pour l’impression peut paraître fastidieux, le résultat peut être plus qualitatif.
Cependant, en cas de mise à jour graphique de la version web, cela impliquera de faire aussi les modifications pour la version print.
Les styles dédiés à l’impression
Une fois que la feuille de style dédiée a été créée, nous pouvons définir le style pour l’impression. Il faut avant tout réfléchir aux éléments que l’ont souhaite ou non afficher lors de l’impression. Comme précisé précédemment, il vaut mieux ne laisser que les informations essentielles : tous les boutons, la navigations ou encore certaines décorations ne sont pas nécessaires à l’impression.
Toutes les images non nécessaires, ainsi que la plupart des éléments d’interaction n’ont pas d’utilité sur une version imprimée. Cela surcharge le résultat, peut perdre l’utilisateur et lui fait consommer plus d’encre et de feuilles lors de l’impression d’une page web.
Afin de masquer tous les blocs inutiles, nous pouvons simplement leur appliquer un display:none.
Il est aussi possible d’attribuer des classes destinées spécifiquement à l’impression :
<div class="print">Visible à l'impression</div>
<div class="no-print">non visible à l'impression</div>
@media print {
.no-print { display: none!important }
}
@media not print {
.print { display: none!important }
}
En revanche, laisser le logo ou certaines décorations peut permette de conserver une certaine identité propre au site.
C’est à chacun d’identifier ce qui est nécessaire ou non pour l’impression d’une page web.
Faciliter la mise en page en CSS
Il peut être intéressant de connaitre certaines propriétés CSS qui permettent de facilité la mise en page de la version print :
- là ou les valeurs en cm ou en point sont déconseillées en CSS pour les projets web, elles sont par contre tout à fait légitimes pour l’impression papier.
- il est possible d’éviter les veuves et les orphelines (ce sont les lignes d’un paragraphe qui se retrouvent seules en haut ou en bas d’un document lors de son impression). Pour cela nous pouvons utiliser les propriétés
orphansetwidowspour définir le nombre de lignes que l’on souhaite laisser grouper sur la même page.
p {
orphans: 3;
widows: 3
}
- de même que pour les orphelines, il est possible d’éviter que les titres se retrouvent seuls en haut ou en bas d’une page.
h1, h2, h3, h4 {
page-break-after:avoid;
break-after: avoid;
}
- Nous avons aussi la possibilité de forcer un titre à se retrouver en haut d’une page
h2 { page-break-before: always }
Il n’est pas toujours intuitif de penser à la version print d’un site web lors de sa création, mais en suivant ces quelques conseils, le site sera plus lisible et ergonomique en version papier.
