Faire une feuille de style CSS print pour l'impression

Pourquoi une feuille de style pour l'impression ?

Un nombre impressionnant d'utilisateurs passe régulièrement par une imprimante pour garder une trace des contenus d'une page web. Par exemple pour lire une page sans connexion, plus tard, ou conserver une archive d'une confirmation de réservation, d'un achat, voire un billet de spectacle.

Si vous avez cherché vous-même, à plusieurs reprises et sur plusieurs sites différents, à imprimer des contenus web, vous savez que cela peut être une expérience assez frustrante. Le réflexe « naturel » est de demander au navigateur web d'imprimer la page, par exemple en choisissant « Fichier > Imprimer… ». Mais le résultat peut être très aléatoire selon le site. Le plus souvent, on se retrouve avec trois pages à imprimer, pour une seule vraie page de contenu, avec des éléments inutiles sur papier tels que d'imposants menus de navigation ou pieds de page.

Certains sites proposent également des versions « imprimables », pages HTML simplifiées, générées au cas par cas, ou des documents PDF mais cela demande un investissement supplémentaire en temps de développement.

Il est donc important de proposer une solution simple, intégrée au navigateur et fonctionnelle pour toutes les pages d'un site. C'est là qu'interviennent les feuilles de style CSS pour l'impression. Avec les CSS print, on va permettre aux utilisateurs de vraiment profiter de la fonctionnalité d'impression des navigateurs.

Caractéristiques des médias écran et papier

Pour commencer, il faut bien faire la distinction entre l'écran et l'imprimé : le Web (média écran) est un média non paginé contrairement au média d'impression sur papier. Le média écran a ses propres règles, ses propres lois qui s'expliquent très facilement : un écran peut avoir différentes largeurs, orientations, notamment sur les mobiles, et surtout les concepts de « page » et de « fin de page » n'existent pas : un document web utilise un ascenseur. Il n'y a pas de notion de « hauteur de page ».

Il en découle que toutes les tentatives de calculs précis de hauteur, ou d'alignement vertical sont vouées à être redoutablement compliquées… tout simplement parce que les concepteurs web essayent d'appliquer des choses non adaptées au média… alors qu'ils feraient mieux d'essayer de s'adapter eux.

Si la restitution d'un contenu Web sur écran supporte peu ou mal les valeurs de tailles et mesures utilisées dans l'imprimerie (points, centimètres, etc.), l'impression de ce contenu sur papier doit en revanche en tirer parti au maximum. Pour cela nous disposons d'un outil, la feuille de style CSS print spécifiquement destinée à cet usage. En effet, puisque les CSS permettent d'adapter un contenu unique à des supports différents, autant pousser la démarche plus avant et appliquer autant de soin à la qualité d'une reproduction papier qu'à l'affichage sur l'écran.

Il y a cependant quelques limites dont il faut avoir conscience.

Possibilités et limites des feuilles de style pour l'impression

Théoriquement, les feuilles de style pour l'impression permettent de gérer une mise en page relativement complète, avec des options proches de celles d'un logiciel de traitement de texte. Dans la pratique, il faudra se limiter à des choses beaucoup plus basique, en raison d'un support très partiel par les navigateurs des propriétés CSS relatives à l'impression.

Certaines parties des spécifications CSS n'étant pas ou peu supportées par la majorité des navigateurs, on ne pourra pas utiliser de façon fiable :

• la gestion du format de papier ;
• la gestion des marges d'impression ;
• les sauts de page avant/après un élément ;
• les paragraphes solidaires ;
• la gestion des lignes veuves et orphelines ;
• et autres propriétés avancées de mise en forme sur papier.

Il sera donc nécessaire de faire simple. Pensez aux feuilles de style pour l'impression comme à une facilité offerte à l'utilisateur, mais surtout pas comme à un moyen d'obtenir une version imprimée de qualité d'un document. Pour les impressions au rendu fidèle, le format de prédilection est le PDF.

Pour les marges du document imprimé, les spécifications CSS préconisent des marges de 10%, que l'on peut appliquer avec le code suivant : @page { margin: 10% }.
Cependant, la plupart des navigateurs n'en tiennent pas compte, et appliquent des marges par défaut, ou bien des marges configurées par l'utilisateur.

Créer une feuille de style pour l'impression

Une feuille de style pour l'impression est une feuille de style simple. La seule manipulation « spéciale » à faire consiste à indiquer au navigateur que la feuille de style en question doit s'appliquer au média print.

Lier une feuille de style pour l'impression

Cela peut se faire de plusieurs manières. La méthode de choix, ou du moins celle qui sera présentée ici, utilise l'élément HTML link. Si vous avez déjà créé une feuille de style CSS au moins une fois dans votre vie, ceci devrait vous être familier :

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

Le fichier impression.css sera un fichier CSS conventionnel (simple fichier texte contenant des sélecteurs et des propriétés CSS). La partie intéressante ici est l'attribut HTML media, qui permet d'indiquer le ou les médias d'application de la feuille de style. Si cet attribut est manquant, la feuille de style s'appliquera à tous les médias : affichage sur écran, affichage en projection, impression, etc.

Gérer les différentes feuilles de style

À partir du moment où on doit gérer des styles différents pour l'affichage sur écran et pour l'impression sur papier, se pose la question de la séparation de ces différents styles. Que se passe-t-il si on a déjà lié une autre feuille de style, sans préciser le média d'application ?

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

La première feuille de style s'appliquera pour tous les médias, y compris pour l'impression.

Il est séduisant de procéder ainsi, cela permet théoriquement, par exemple, de conserver un même style graphique à l'écran et sur le papier. La feuille de style pour l'impression apporte alors uniquement quelques « correctifs ». Le problème, c'est que de nombreux styles adaptés à l'écran (des largeurs en pixels, des textes en blanc sur une couleur de fond sombre, des tailles de texte en pixels ou en em…) ne sont pas adaptés pour l'impression. Les annuler ou corriger un par un, dans la feuille de style pour l'impression, peut être fastidieux. Pire encore, le risque est grand d'oublier certains correctifs et de se retrouver avec un contenu imprimé peu lisible.

On conseille donc plutôt de réaliser deux feuilles de styles différentes, une pour l'écran et une pour l'imprimante :

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

Préparer un document web pour l'impression

Maintenant que nous savons comment créer une feuille de style pour l'impression, il va s'agir de la remplir ! Pour cela, nous allons bien entendu reprendre, si on le souhaite, une partie de la charte graphique du site, en n'oubliant pas que certaines limites seront difficilement dépassables.

Pensez en particulier au fait que votre document pourra être imprimé en noir et blanc, par exemple sur une imprimante laser ou par économie d'encre couleur. Et même s'il est imprimé en couleur, il sera imprimé sur papier blanc, la plupart des navigateurs web désactivant par défaut l'impression des images et couleurs de fond.

Impression d'un document web : que faut-il imprimer ?

La première question qui se pose, c'est celle de l'opportunité d'imprimer – ou pas – certains éléments de la page. De nombreux éléments utiles à l'écran ne seront pas utiles sur le papier. Il s'agit alors de les identifier, et de les « supprimer » pour l'impression.

Si, par exemple, j'ai un menu de navigation qui est une liste non ordonnée (élément HTML ul), portant l'identifiant "navigation", je vais pouvoir écrire : #navigation {display: none;}. Ainsi, je demande au navigateur de ne pas afficher du tout le menu de navigation, c'est à dire de l'ignorer. Bien entendu, pour que cela fonctionne, il faut placer cette déclaration dans la feuille de style dédiée à l'impression, pas dans celle dédiée à l'écran !

Nous avons donc la possibilité de pas imprimer du tout certains éléments. Qu'est-ce qui doit être imprimé, et qu'est-ce qui ne doit pas l'être ? C'est à chacun de décider de ce qu'il souhaite voir figurer sur les pages imprimées. Voici tout de même quelques pistes :

• Faut-il imprimer l'en-tête, le logo ou le titre du site ? Ça n'est pas indispensable, mais on peut vouloir garder, à l'impression, une identification forte du site. En général, si on ne supprime pas complètement cet élément, on affichera quelque chose de sobre, ne prenant pas une surface papier trop importante. Petit rappel : les images de fond ne sont, la plupart du temps, pas imprimables. Si on veut imprimer un logo du site, ce logo devra être une image présente dans le contenu HTML, via la balise <img>.
• Faut-il imprimer le menu de navigation ? À partir du moment où il est impossible pour l'utilisateur de cliquer sur le papier (c'est une évidence, mais autant le rappeler), la présence d'un système de navigation ne se justifie pas vraiment. En général, c'est la première chose que l'on supprimera pour l'impression.
• On voudra peut-être imprimer le fil d'Ariane (un système de navigation du type : « Vous êtes ici : Accueil > Rubrique > Page en cours »), dans la mesure où il permet de situer la page imprimée dans l'arborescence du site. On pourra aussi considérer que cette information n'est pas indispensable, voire perturbante sur papier.
• Faut-il imprimer les formulaires, et plus généralement tous les éléments d'interaction avec le site ? Là encore, c'est peu probable. Pour la feuille de style print d'un blog ou d'un site offrant la possibilité de laisser des commentaires via un formulaire, on cachera probablement ce formulaire. S'il s'agit d'un formulaire sur une page d'inscription à un site, par contre, il se pourrait qu'un utilisateur veuille l'imprimer, et on pourra donc souhaiter le garder.
• Est-ce utile d'imprimer toutes les images présentes sur une page ? Les images prennent de la place sur la page et consomment beaucoup d'encre. Il ne faut donc imprimer que les images indispensables à la bonne compréhension du contenu textuel, ou apportant elles-même une information importante. À noter que, avec les navigateurs ayant une bonne compréhension des sélecteurs CSS avancés, il est possible de remplacer l'image par son texte alternatif (le contenu de l'attribut alt).
• Pour finir, attention à ne pas avoir la main excessivement lourde. Il ne s'agit pas de réduire un contenu à sa « plus pure expression », en supprimant des informations n'appartenant pas directement au contenu principal de la page. Certaines informations relatives à un article (catégorie, auteur, date de publication, date de modification…) sont utiles quel que soit le média de restitution.

Bien entendu, pour cacher (ou garder affichés) tous ces éléments, il faudra pouvoir les identifier clairement dans la feuille de style CSS. Cela signifie que le code HTML devra être correctement organisé, avec des éléments et des conteneurs portant des classes (attribut HTML class) et des identifiants (attribut HTML id) pertinents. Par ailleurs, il sera beaucoup plus facile de travailler avec une page réalisée sans tableaux de mise en forme (ou avec très peu de tableaux de mise en forme), plutôt qu'avec une page qui en abuserait.

En résumé, organisez bien vos contenus HTML, puis déterminez ce qui, imprimé, sera utile aux utilisateurs de votre site, et ce qui ne le sera pas. C'est à vous de faire les arbitrages nécessaires, mais le plus souvent ils se font facilement, et on ne garde à l'impression que le contenu vraiment utile. Au delà d'un contenu imprimé plus clair, il ne faut pas douter que l'internaute vous sera reconnaissant pour le temps d'impression plus court et les économies d'encre, de papier et d'énergie réalisés.

Les unités adaptées au format papier

Les unités les mieux adaptées à l'impression sont les points (pt), les centimètres (cm) et millimètres (mm), et les pourcentages (%).

Les points typographiques ou points, symbole pt, sont les plus adaptés pour fixer la taille du texte. Pour les valeurs à utiliser, faire des essais avec un logiciel de traitement de texte (Abiword, Open Office Writer, Microsoft Word, etc.).

Les millimètres (symbole mm) et centimètres (symbole cm), ainsi que les pourcentages (symbole %) seront utiles pour le dimensionnement des blocs, pour déterminer les marges des éléments, etc.

Un exemple de feuille de style pour l'impression

Voici un exemple simple de ce qui peut être réalisé. Pour cette page, nous allons :

1. passer le fond de page en blanc, et les textes de contenu (+ titres et liens) en noir ;
2. choisir une famille de police serif ;
3. supprimer les éléments devenus inutiles (la bannière de l'entête, les bordures de la page, le menu général, le pied de page, les publicités) ;
4. adapter la largeur du contenu restant à la page ;
5. modifier les unités (em et px vers pt).

Le document imprimé contiendra donc les titres, les textes et les images estimées comme complément indispensable à la bonne compréhension des textes.

Vous pouvez consulter directement :

• la page HTML (afficher le code source pour voir le code HTML) ;
• la feuille de style CSS pour l'écran ;
• et ce qui nous intéresse le plus, la feuille de style pour l'impression.

Et voici un aperçu partiel de cette feuille de style pour l'impression :

body { /* Modifications : la couleur de fond de page - la police - l'unité utilisée pour la taille de la police  */
  background-color :#fff;
  font-family :Serif;
  font-size :15pt;
}

#page { /* Modifications : suppression de la bordure - marges */
  margin :0;
  border :none;
}

#banner, #menuright, #footer { /* Les éléments qui ne seront pas affichés  */
  display :none;
}

h1#top { /* Affichage du titre */
  margin :0;
  padding :0;
  text-indent :0;
  line-height :25pt;
  font-size :25pt;
}

h2, h3, #contenu h3, #contenu a, a { /* Modification de la couleur des titres et liens */
  color :#000;
}

...

Aller plus loin…

Vous êtes prêt, maintenant, à réaliser une feuille de styles CSS dédiée au média print. Nous vous proposons ci-dessous quelques liens vers des tutoriels aux techniques plus avancées.

• http://www.pompage.net/pompe/impression/
• une feuille de styles de base pour le media print