Alain Éric Gauthier

Bien utiliser le CSS pour l'impression

Vous est-il déjà arrivé d'imprimer une page web et de vous apercevoir que le document imprimé utilise deux fois plus de papier que nécessaire et que vous avez gaspillé beaucoup trop d'encre pour imprimer de belles images décoratives mais inutiles ?

Imaginez qu'un visiteur vive la mème expérience sur votre site...

Mais ne paniquez pas, vous pouvez prendre le contrôle de la situation sans sacrifier l'apparence de votre site web grâce à CSS. Comme si ce n'était pas suffisamment épatant, il est possible d'utiliser le CSS pour créer de très gros PDF et des documents imprimables (par vous ou l'usager). Finalement, il est aussi possible de combiner HTML et CSS pour créer des livres électroniques (kindle, epub) mais celà dépasse la portée de cet article.

Dans la situation ou un visiteur décide d'imprimer une page de votre site, vous ne voulez pas qu'il imprime sur papier tout ce qui s'affiche à l'écran. Vous devrez donc empêcher l'affichage de la navigation, des publicités, des pied de page, etc. Vous voudrez aussi, dans une certaines mesure, modifier l'apparence de certains éléments comme les couleurs et les images de fond, le choix et la taille de la police. Vous voudrez aussi modifier les couleurs pour optimiser le contraste pour une impression en noir et blanc et utiliser moins d'espace sur papier qu'à l'écran pour limiter la consommation de papier. Mais vous voudrez aussi préserver le branding de votre site; vous devrez faires des choix préserver une cohérence entre la mise en forme à l'écran et la mise en forme sur papier.

Il y a donc beaucoup de facteurs à considérer pour rendre l'expérience de l'usager plus agréable. Mais avant de modifer le CSS, il faut bien comprendre comment vous allez ajouter ces règles CSS à votre site.

Lier le CSS

Il y a quatre stratégies prinicipales en combinant l'attribut media de l'élément LINK dans le HTML et en utilisant les règles @media screen et @media print dans le CSS.

Tout d'abord, il faut décider si vous voulez séparer complètement ce qui s'affiche à l'écran et ce qui s'imprime. Ensuite, vous devez décider si vous utiliserez des feuilles de style distinctes ou une seule feuille de style. Cela vous permettra de choisir parmi les 4 possibilités.

Séparation complète par l'élément LINK

En spécifiant media="screen" ou media="print" pour l'élément LINK, tout le contenu de chaque feuille de style s'appliquera seulement au media approprié. Ce qui vous permet, sans vous préoccuper de la cascade et de l'héritage, de faire deux designs complètement différents : un pour l'affichage à l'écran et un autre pour l'impression.

<link rel="stylesheet" media="screen" href="screen.css" />
<link rel="stylesheet" media="print" href="print.css" />

Dans l'exemple ci-dessus, le code s'insére entre les balises <head> et </head> de la page web. Notez que les deux feuilles de styles seront chargées par le navigateur peu importe que la page soit imprimée ou seulement affichée à l'écran. C'est seulement lorsque le document sera prêt à être rendu par le navigateur que les règles de style s'appliqueront en fonction du média choisi pour afficher la page.

Par l'élément LINK avec CSS en commun

Si vous voulez écrire moins de code et que votre design à l'écran et à l'impression aura beaucoup de points en commun, il est préférable d'avoir une feuille pour les règles de style communes aux différents média et une feuille pour les règles de style qui seront spécéfiques l'àffichage à l'écran et à l'impression. Vous aurez donc trois feuille de style en tout.

<link rel="stylesheet" media="all" href="style.css" />
<link rel="stylesheet" media="screen" href="screen.css" />
<link rel="stylesheet" media="print" href="print.css" />

Notez que media="all" n'est pas nécessaire pour lier la première feuille de style car c'est la valeur par défaut pour cet attribut. N'oubliez pas que l'ordre des feuilles de style est importante. Si un même sélecteur se trouve dans le fichier style.css et dans le fichier screen.css, ce sont les propriétés du fichier screen.css qui vont supplanter les propriétés du fichier style.css.

Comme dans bien des situations, il n'y a pas qu'une seule bonne solution. Vous pourriez décider de n'utiliser que deux feuilles de style, une pour le code qui se trouve uniquement à l'écran et le code commun aux deux média et une deuxième feuille pour le code qui s'applique à la version imprimée.

Séparation complète par les règles @media

Dans le cas où vous choisissez d'utiliser une seule feuille de style, vous pouvez tout de même séparer complètement les règles qui s'appliquent à l'affichage à l'écran et pour l'impression en utilisant la règle @media.

@media screen {
  /** CSS pour l'affichage à l'écran seulement **/
}
@media print {
  /** CSS pour l'impression seulement **/
}

Il important qu'aucune règle de style ne se trouve à l'extérieur des accolades, les règles qui s'y trouvent s'appliqueront autant pour l'affichage à l'écran que pour l'impression.

Par les règles @media, code commun

Avec cette approche, toutes les règles qui ne sont pas entre les accolades de la règle @media print s'appliqueront à l'écran et pour l'impression. Pour modifier une règle de style spécifiquement pour l'impression, il faut utiliser le même sélecteur et y spécifier les propriétés pour l'impression. C'est aussi à cet endroit que vous devrez inclure les propriétés spécifiques à la mise en page.

/** CSS pour tous les médias **/
@media print {
  /** CSS pour l'impression seuilement **/
}

Visualiser les changements

Une fois que vous avez organisé vos fichiers CSS, vous devez maintenant vous faire un flot de travail pour visualiser les changements que vous faites. Pour ce faire, vous avez quatre possibilités ayant chacune des avantages et des inconvénients. Plutôt que vous limiter à une seule méthode, je vous suggère d'y aller de manière progressive et d'utiliser la méthode qui convient le mieux à votre situation.

Votre navigateur devient une page

Avec cette méthode, vous ajustez la largeur de la fenêtre de votre navigateur pour être le plus près possible de la largeur du document imprimé. Pour connaître cette largeur, utilisez la fonction qui vous permet d'exporter votre page web en PDF (le plus souvent cela se fait par l'impression vers un fichier au format PDF). Regardez les premières lignes de texte et notez quels sont les mots à la fin de chacune. Ajustez la largeur de votre fenêtre de navigateur pour que les mêmes mots soient à la fin des lignes.

Évidemment, pour que vos changements soient visibles à l'écran, n'oubliez pas de modifier l'attribut ou la règle media en fonction de la méthode que vous avez choisi. Il va sans dire que vous ne pourrez pas voir les sauts de pages ou de colonnes, la largeur des marges, etc. Mais vous pourrez vous concentrer sur la typographie, les retraits, l'indentation, la disposition des images et bien d'autres choses. Une fois que vous en serez à la mise en page elle-même, vous devrez commencer à exporter le document (voir plus bas).

Developpers' tools

Si votre navigateur le permet, vous pouvez utiliser des outils de développement pour faire quelque chose de semblable à la méthode que je viens de décrire. Firefox et Chrome vous permettent d'utiliser le menu Developper's tools pour simuler à l'écran le résultat de l'impression. Mais n'oubliez pas que cette fonctionnalité ne peut pas vous montrez les sauts de page.

Cette page vous donne les instructions pour activer ce mode pour Google Chrome.

Et cette page (en anglais sur strackoverflow) donne les instructions pour Firefox.

Prévisualisation de l'impression

Pour voir vos changements, il n'est pas nécessaire d'imprimer sur papier votre document en entier. Votre première option, la plus rapide, est d'utiliser la fonction qui vous permet de prévisualiser l'impression. À ma connaissance, tous les navigateurs offrent cette option, elle est relativement rapide à exécuter et vous donnera une bonne idée du résault final.

Exporter en PDF

Encore une fois, la plupart des navigateurs offrent la fonction imprimer pour exporter le document en PDF plutôt que de l'envoyer à l'imprimante. À peu de choses près, vous aurez le même résultat qu'avec la fonction d'aperçu avant l'impression que je viens de décrire mais l'exportation pourrait vous être utile si vous devez montrer le résultat final à d'autre personnes.

Et lorsque vous êtes certain de la qualité de votre travail, le test utiltime est d'imprimer le document sur papier. Je vous suggère de le faire au moins une fois pour voir le rendu. Le fait d'avoir une version papier donne un autre regard sur le résultat final. Ceci dit, si vous avez un site contenant plusieurs centaines de pages (voir plus), ce n'est pas nécessaire de la faire pour toutes les pages.

Rendre votre page web imprimable

Une fois que votre flot de travail est en place, vous pouvez commencer votre CSS pour l'impression. Parmi les premières choses à considérer, nous verrons ici comment retirer des éléments qui ne devraient pas être imprimés, changer l'ordre des éléments pour créer un flot de lecture linéaire, décider si vous utilisez des colonnes pour le texte et ajouter du contenu spécialement pour la version imprimée.

La bonne police

Les deux choses les plus importantes à savoir en ce qui à trait à la typpographie c'est que la taille la police se définit en point pour les documents imprimé et qu'une police avec empattement (serif en anglais) est plus facile à lire sur papier.

body {
  font-size: 12pt;
  font-family: serif;
}

Retirer ce qui est inutile

Plusieurs sections d'une page web typique sont présentes depuis tellement longtemps que parfois, je ne les vois pas vraiment. Mais lorsque j'imprime une page web je suis vraiment embêté quand j'ai 3 pages qui n'affichent rien d'autre qu'une très longue série de liens de navigation, des blocs de publicité et un pied de page soi-disant riche avec plus d'un vingtaine d'éléments.

CSS vous offre un règle très simple pour faire disparaître tous ces éléments qui ne seront pas utiles sur une feuille de papier. Par exemple, si vous voulez faire disparaître le menu de navigation qui se trouve dans l'entête de vos pages, la règle display: none; réglera l'affaire....

De plus, pour réduire la consommation d'encre, il est préférable de ne pas imprimer les images de fond ou les couleurs de fond. La meilleure solution est de les remplacer par une bordure. De cette façon la mise en évidence de ces éléments est préservée.

header nav {display:none;}
footer {background: transparent none; border: solid 1pt black;}

Créer un flot linéaire

Les développement récents permettent de faire des mises en pages très intessantes avec CSS: notamment avec l'utilisation des flexbox et des grids. Par contre, ces techniques CSS ne sont pas bien supportées par les navigateurs quand vient le temps d'imprimer ces pages. Il vous faudra donc revoir le flot de vos documents et penser votre disposition du texte d'une manière linéaire.

p {
  display: block;
  width: 100%;
}

Les colonnes

Il n'est obligatoire de formater votre page en colonne pour l'impression mais sachez qu'un paragraphe avec des lignes trop longues est moins confortable à lire. Mais si votre texte contient beaucoup de figures, de tableaux et d'images la présentation par colonne n'est peut-être pas idéale. Bref, c'est un changement qui mérite d'être essayé mais ce n'est pas obligatoire.

.main {
  column-width: 17em;
  column-gap: 3em;
  column-count: 2;
  column-rule: thin solid black;
}

Ajouter du contenu

Comme nous l'avons vu plus haut, il est important de retirer ce qui n'est pas utile pour un document imprimé, mais il y a aussi des choses qui ne sont pas directement affichées dans une page web qui seront utiles si elles sont affichées sur une feuille de papier. Principalement, je parle des URL des liens.

a {text-decoration: none;}
a:after {content: " (" attr(href) ")"; text-decoration: underline;}

Voilà qui fait un bref survol des premières modification à apporter à votre CSS pour l'impression des pages web de votre site. Les prochaines modifications sont tout aussi importantes que celles que nous avons vus jusqu'à maintenant mais vous devrez utiliser l'aperçu avant impression ou l'exportation en PDF pour voir ces changements.

Mise en page

La prochaine étape pour créer une version imprimée plus agréable à lire est de faire des modifications sur la mise en page. Mais il ne faut pas oublier que si c'est le visiteur qui imprimera le document, il se peut qu'il fasse des choix qui entreront en conflit avec votre code CSS.

Le format de papier

Par exemple, vous pouvez décider que vos pages s'imprimeront sur du papier en format lettre (format courant en Amérique du Nord) mais si votre visiteur est en Europe, il aura très probablement du papier au format A4 (qui est légèrement différent du format lettre). Si votre mise en page est très spécifique au format de papier, il se pourrait que cela pose problème.

@page {size: letter landscape;}

Cette règle permet de faire beaucoup de choses. Par exemple, si vous voulez laisser le contrôle à l'utilisateur, vous utiliserez la valeur auto. Si vous voulez utiliser un format de papier sur-mesure, vous pouvez spécifier sa largeur (par exemple 3 pouces et demi) et sa hauteur (par exemple 7 centimètres) comme ceci :

@page {size: 3.5in 7cm;}

À ma connaissance, tous les formats de papier standard sont acceptés et si vous voulez plus de détails, cette page sur MDN offre une description complète des différentes possibiliés.

Définir les marges

Les navigateurs ont des valeurs par défaut pour les marges d'une page mais il se pourrait que vous décidiez de prendre le contrôle, par exemple dans le cas où vous prévoyez que les pages seront imprimées recto-verso ou si vous voulez définir une mise en page partuculière pour la première ou la dernière page.

À l'aide des pseudo-sélecteurs first, last, left et right, vous pouvez définir des mises en page pariculière pour la première, la dernière page ou encore pour la page de gauche et la page de droite quand vous imprimez recto-verso.

@page {margin: 2.5cm;}
@page:left {margin-right: 3.5cm;}
@page:right {margin-left: 3.5cm;}

Contrôler les sauts

Selon certains choix que vous ferez, vous voudrez peut-être forcer un saut de page ou au contraire l'empêcher dans certaines situations. Par exemple, avec un titre de niveau 1 (H1), vous voulez un saut de page et de la même manière vous ne voulez pas de saut de page après les titres de niveaux 2 à 6 (H2 à H6).

h1 {break-before: always;}
h2, h3, h4, h5, h6 {break-after: avoid;}

Et si on poursuit dans le même sens, afficher seulement la première ligne d'un paragraphe en bas de page ou la dernière ligne d'un paragraphe sur la dernière page est quelque chose à éviter. Dans le premier cas, nous parlerons de lignes veuves et dans le deuxième cas nous parlerons de lignes orphelines. CSS permet de définir un nombre minimum de ligne à afficher avant ou après le saut de page.

p {widows: 3; orphans: 3;}

Et comme si ce n'était pas suffisant, quoi de plus désagréable que de voir un saut de page au milieu d'un tableau ou d'une figure. Heureusement, il y a aussi un règle pour prévenir ce désagrément de la vie...

table, figure {break-inside: avoid;}

Voilà qui met fin à mon survol des principales règles CSS pour l'impression de vos pages web. J'espère que cela vous aura été utile. Si vous avez des questions ou des suggestions, n'hésitez pas à me contacter.