Mettre en place une feuille de style pour l’impression

Leaves
Copyright : Kara Eads

Dans le monde du Web, on oublie souvent de penser à l’impression quand on crée le design d’une page. Pourtant l’internaute à la recherche d’informations aura sans aucun doute recours à l’impression si le contenu de la page qu’il parcourt lui semble pertinent.

Aujourd’hui, très peu de sites implémentent une feuille de style dédiée à l’impression en présumant que leurs informations apparaissent conformément à leurs attentes. Malheureusement, c’est rarement le cas. Ci-dessous une liste non exhaustive des points à surveiller attentivement lors de la création de cette feuille de style.

Créer des règles CSS pour l’impression

Dans un premier temps, il convient de préciser aux navigateurs les règles CSS qui sont uniquement réservées à l’impression. Il existe deux manières simples de parvenir à cet effet.

La première est de spécifier dans l’entête de la page HTML une feuille de style destinée uniquement à l’impression. Dans l’exemple présenté ci-après, la feuille de style est appelée print.css et le média destiné à lire la page sera l’imprimante. Ainsi les styles prévus pour l’impression sont séparés de la mise en page particulière destinée aux différents moniteurs. C’est donc entre les balises <head /> que l’on utilise cet appel.

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

Il est également possible d’utiliser une requête sur le type de média qui parcourt la page HTML et d’ensuite proposer les styles à appliquer en fonction de celui-ci. C’est à l’aide des media queries qu’est rendue possible cette intégration.

Les media queries permettent d’indiquer de manière précise à quel type de média sont attribuées les règles CSS énoncées. On les utilise notamment pour la création d’un design évolutif dit responsive, et permettre l’adaptation d’une application à tous les supports. Cette fois, il convient d’ajouter au sein d’une des feuilles de style appelées dans la page la condition suivante @media print et d’insérer les règles CSS concernées au sein de ses accolades.

@media print {
  /* On redéfinit l'élément paragraphe pour l'impression */
  p {
    font-size: 15pt; /* On fixe la taille de la police à 15 points */
    color: black;    /* On attribue la couleur noire au texte */
  }
}

Avec l’utilisation d’un préprocesseur CSS (LESS, SASS), il est possible de coupler ces deux méthodes.

Créer des règles CSS pour l’impression revient à surcharger les règles définies au préalable pour leur attribuer un comportement différent à l’impression. La surcharge CSS est l’opération qui consiste à utiliser des propriétés déjà définies pour leur affecter une nouvelle valeur. Concrètement, c’est l’acte de modifier le comportement d’un élément selon un contexte bien défini. À titre d’exemple, au moyen de la surcharge CSS, il est ainsi possible d’avoir un lien hypertextuel qui s’affiche en bleu sur une page Web, que celui-ci devienne orange au survol de la souris et violet quand le lien a été visité.

Supprimer les éléments inutiles

Il faut veiller à bien retirer tous les éléments nécessaires à la compréhension de l’interface Web qui ne sont plus d’aucune utilité sur un support papier. Il s’agit essentiellement de supprimer l’affichage des entêtes de pages, des éléments de navigation, du pied de page, des informations contextuelles (les publicités, les modules de recherche, les barres latérales, les mots-clés, etc.), des images animées ou non selon leur importance vis-à-vis du corps de texte, etc. Pour cela, on utilise simplement la propriété display à laquelle on assigne la valeur none.

.header,
.footer,
.ads {
  display: none; /* Permet de cacher les éléments */
}

Il est important de bien déterminer quelles sont les informations que tout potentiel lecteur serait ravi de pouvoir conserver. Il faut ainsi faire attention à ne pas supprimer du contenu jugé essentiel. Une mauvaise pratique serait, par exemple, de supprimer les données liées à l’auteur ou la provenance d’un texte : l’utilisateur aura tendance à oublier, avec le temps, d’où lui proviennent ces informations qu’il a souhaité conserver.

Améliorer le formatage d’une page

Le formatage de la page sur le support papier est nécessairement différent de celui de la page Web. Les informations présentes pour le Web prennent rarement la largeur globale de l’écran qui les parcourt, que l’on soit sur un écran classique ou sur une quelconque tablette. En revanche, on s’attend à ce qu’il n’y ait pas cette limitation d’espace sur le support papier. Pourquoi utiliser seulement la moitié de la surface papier quand on veut pouvoir lire agréablement un texte ?

Il convient donc de penser à l’utilisateur qui souhaiterait optimiser le nombre de feuilles de papier qu’utilisera son imprimante, et c’est également un bon moyen d’agir pour l’environnement. Pour cela, de simples règles peuvent être ajoutées à l’élément recueillant le contenu textuel.

#content {
  width: 100%; /* Le contenu prend toute la largeur de la page */
  margin: 0;   /* Les marges définies pour l'écran sont réinitialisées à 0 */
  float: none; /* Tout flottement prédéfini est supprimé */
}

Une autre bonne pratique ici consisterait à diminuer la taille de la police utilisée pour le corps de texte principal. Mais pour cela il faut d’abord réellement comprendre le comportement des polices. L’excellent article CSS font-size em vs px vs pt vs % de Kyle Schaeffer est une synthèse de ce qu’il faut savoir sur les unités des polices pour le Web. Il existe des équivalences entre les unités de valeurs textuelles : 1em = 12pt = 16px = 100%. Sachant que les points sont utilisés pour l’imprimerie, on peut ainsi aisément désigner la taille du texte pour l’impression voulue. Par la même occasion, il peut être intéressant de revenir à des couleurs d’impression par défaut et donc de proposer l’affichage du texte en noir si celui-ci est d’une autre couleur à l’écran.

En ce qui concerne les liens hypertextes figurant dans le corps principal du texte, on peut naturellement en changer la couleur ou l’épaisseur pour mieux les différencier du contenu textuel simple. Mais surtout, sur le support papier, la page pointée par le lien en question n’est pas du tout répertoriée : il est complètement impossible de se rendre sur cette page et une information parfois capitale pour la compréhension d’un article est donc perdue. Pour contrecarrer cet effet, on peut avoir recours à une simple manipulation décrite ci-après, qui permet de présenter l’URL à laquelle renvoie le lien en question juste après le texte surligné du lien.

#content a:link:after,           /* Après un lien classique */
#content a:visited:after {       /* Après un lien visité */
  content: " (" attr(href) ") "; /* L'attribut href du lien est ajouté */
  font-size: 90%;                /* La taille de police correspond proportionnellement à 90% de la taille du lien */
}

Forcer l’affichage des arrière-plans

Par défaut, la propriété background n’est pas implémentée par la feuille destinée à l’impression. Si l’on souhaite faire apparaître de la couleur ou une image quand on passe à l’impression sans pour autant modifier le code HTML, il existe une solution.

Pour faire apparaître une image prédisposée en background-image sur un élément à l’écran, il faut utiliser le sélecteur :before sur l’élément en question et en spécifier la propriété content. Ci-après une illustration de ce procédé : on imagine ici qu’une page d’accueil propose l’affichage de son logo à l’aide d’un background défini en CSS. On pourrait imaginer une structure HTML telle que celle présente ci-dessous.

<h1 id="logo">
  <a href="#">One chapter a day</a>
</h1>

Sur la feuille de style classique, l’image est affichée par le biais d’une propriété d’arrière-plan sur l’élément #logo a. Sur la feuille de style liée à l’impression, les styles à mettre en place sont les suivants :

#logo { position: relative; }

#logo:before {
  content: url("../img/logo.png"); /* L'URL de l'image est indiquée */
  position: absolute;  /* Une position "absolute" est fixée */
  left: 0;             /* L'image est alignée à gauche */
  top: 0;              /* ... et en haut de la page */
  width: 100px;        /* Il faut préciser la largeur */
  height: 50px;        /* ... et la hauteur de l'image à imprimer */
}

Pour faire apparaître un arrière-plan coloré, cette même solution peut donc être utilisée. L’astuce ici est de créer une image ayant une couleur unie correspondant à la couleur souhaitée pour l’élément en question. En revanche, ce procédé a la particularité de ne pas permettre au concepteur de préciser la largeur et la hauteur sur lesquelles doit se superposer la couleur : en clair, il est impossible d’optimiser le poids de l’image utilisée en précisant que l’arrière doit être répété sur un axe prédéfini. Il faut donc prévoir une image suffisamment grande pour recouvrir toute la superficie où doit être apposée la couleur convoitée. C’est donc une pratique à utiliser avec parcimonie et uniquement s’il y a vraiment un intérêt prouvé pour l’utilisateur.

Consolider l’affichage des tableaux

Selon la structure que vous mettez en place pour les tableaux présents sur l’ensemble de vos pages HTML, il se peut que ces derniers ne présentent à l’impression aucune des données figurant à l’écran. Là encore, une solution assez simple à mettre en place a été trouvée comme réponse à cette problématique.

De manière générale, les entêtes de tableaux, symbolisés par les balises <thead> et <th> en HTML classique, ne sont pas prises en compte à l’impression. Il peut arriver que les données figurant dans le corps du tableau ne s’affichent pas à l’impression non plus. Il convient alors d’utiliser la propriété display pour pallier à ce problème et de lui conférer les valeurs suivantes table-header-group, table-row-group et table-footer-group correspondant respectivement aux éléments thead, tbody et tfoot.

Il peut aussi être intéressant d’interdire aux imprimantes l’impression sur deux pages d’un tableau et de prévoir le saut de page dans le cas où ce tableau serait situé en bas de page. On peut ainsi préciser que seules les lignes de ce tableau doivent être insécables. La propriété rendant possible cette opération est page-break-inside, à laquelle on affecte la valeur avoid.

Avoir une réflexion sur le sujet

Comme susmentionné, cette liste de bonnes pratiques pour l’impression n’est pas exhaustive et constitue un moyen de contrer les cas les plus aisés liés à une mauvaise impression de votre page web. C’est avec des cas concrets que l’on apprend le mieux à savoir manipuler les styles pour l’impression.

Quatre réflexions sur « Mettre en place une feuille de style pour l’impression »

  1. Suite logique de l’article précédent sur ce sujet http://onechapteraday.fr/web-print-issues/. Merci de nous avoir rappeler ces quelques bonnes pratiques. Il est vrai qu’on a tendance à mettre un peu de côté les feuilles de style pour l’impression et d’oublier à quel point il est important de penser aux personnes qui prennent du plaisir à lire sur le support papier.
    En tout cas, merci encore One chapter a day pour cet article qui, comme pratiquement tous tes articles, aborde des sujets traités avec soin et cela au plus grand plaisir de tes lecteurs.

    1. Merci iceteamango !
      Je pense que le papier a encore de beaux jours devant lui, quelles que soient les avancées technologiques du Web. En tout cas, je préfère continuer à lire sur papier personnellement, surtout après une longue journée devant l’ordinateur au bureau…

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.