CSS dédiée à l’impression: Mise en place et bonnes pratiques

De nombreux internautes ont tendance à imprimer les pages web: Même si la plupart du temps, cela s’avère inutile et pas écolo pour un sou, imprimer une page peu néanmoins s’avérer fort utile. Et dans ces cas là, quoi de plus énervant qu’une page qui s’imprime mal, coupée en deux, avec de grands espaces entre les paragraphes, les bannières de pub en couleurs…
Nous allons nous atteler à la création d’une feuille de style totalement dédiée à l’impression: Grâce à elle, le développeur contrôle ce qui doit être imprimé, et comment.

A savoir, avant de commencer

• J’ai déja eu la blague: les versions d’Internet Explorer inférieures à 6 ne font pas la différence entre une feuille de style normale et une feuille de style pour imprimante. Résultat, votre site s’affichera à l’écran comme vous auriez souhaité le voir en version imprimée. L’utilisation d’un commentaire conditionnel résoud sans peine ce problème.
• Si votre site est bourré de tableaux, il y à fort à parier que le résultat ne sera pas celui escompté. Plus votre site est valide XHTML, mieux ce sera.
• Par défaut, les images de fond (c’est à dire, celles insérées via la feuille de style principale) ne seront pas imprimées. Par contre, les images inclues en html via la balise <img src… seront quand à elles visibles à l’impression.
• Si vous en avez l’occasion, ajoutez une classe .noprint au éléments HTML que vous ne souhaitez pas imprimer (barre de navigation, par exemple). Il sera ensuite facile de masquer ces éléments dans la css print via la propriété display.

Création et inclusion de la feuille de style

Au niveau de la syntaxe, rien ne différencie une feuille de style “print” d’une css classique. Toute la différence se situe au niveau de l’attribut html media, qui va indiquer au navigateur dans quel cas utiliser cette css.

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

Commençons à coder notre css:

html {
     width:100%
}

body {
    background-color: #fff;
    color: #000;
    font-size: 12pt;
}

a {
    color: #000;
}

img {
    border: 0;
}

Réglons la taille à 100%: Cela va permettre à l’imprimante d’utiliser toute la longueur disponible sur la feuille. N’oublions pas non plus de spécifier que la couleur de fond est blanc: L’internaute fera ainsi des économies d’encre. Pour le texte, nous allons l’imprimer en noir à une taille de 12 points, ce qui garantira une bonne lisibilité sur le papier, que ce soit au niveau du contraste que de la taille des caractères. Personnellement, je ne vois pas l’intêret d’appliquer une couleur différente au liens. Je les ai mis de la même couleur que le reste du texte, ce qui évitera à l’internaute d’avoir des mots totalement illisibles. C’est particulièrement ennuyeux…

Désormais, nous allons attaquer le gros du boulot, qui constitue essentiellement à masquer les nombreux éléments inutiles sur une version imprimée.
Si vous avez suivi mon conseil et utilisé une classe .noprint dans votre document HTML, voici ce qui vous reste à faire:

.noprint{
    display: none;
}

N’oubliez pas non plus de masquer tous les autres éléments qui n’ont plus d’utilité sur une feuille de papier:

#nav, #footer, #sidebar {
    display:none;
}

Vous avez fait le plus gros. Voyons maintenant comment il est possible d’améliorer encore le rendu à l’impression.

Controller l’affichage sur papier avec CSS

Les propriétés CSS page-break-inside, page-break-before et page-break-after, bien que faisant partie intégrante du standard CSS 2, sont relativement méconnues. Pour cause, elles n’ont d’utilité que lors de l’impression d’une page web.

Ces 3 propriétés contrôlent les sauts de page et permettent de spécifier là ou il est possible de passer à la page suivante.
Il existe six valeurs possibles pour page-break-before et page-break-after mais auto et always sont les plus répandues:

• auto: La valeur par défaut. Insère un saut de page uniquement si l’imprimante se trouve en bas de page.
• always: Insère automatiquement un saut de page.

Concernant page-break-inside, sont rôle et de spécifier s’il est permis où non de répartir un élément sur deux pages distinctes. Il accepte trois valeur distinctes, avoid, qui permet d’interdire de couper l’élément, auto, et inherit.

Reprenons le codage de notre feuille de style: Il est évident que nous ne voulons pas, par exemple, qu’un titre se trouve tout en bas de page avec le texte correspondant imprimé sur la page suivante. C’est la que page-break-before va se montrer très intéressant.
Dans le même esprit, nous allons préciser que nous ne souhaitons pas couper un paragraphe sur deux pages différentes grâce à page-break-inside:

h1, h2 {
    page-break-before: auto;
}

p {
    page-break-inside: avoid;
}

Voici maintenant notre feuille de style, quasi prête à l’emploi:

html {
     width:100%
}

body {
    background-color: #fff;
    color: #000;
    font-size: 12pt;
}

a {
    color: #000;
}

img {
    border: 0;
}

.noprint{
    display: none;
}

h1, h2 {
    page-break-before: auto;
}

p {
    page-break-inside: avoid;
}