L’impression des pages web

Il peut paraître tout à fait paradoxal de vouloir imprimer des pages web aujourd’hui étant donné l’omniprésence d’Internet et de la culture des écrans. Il existe pourtant de nombreuses situations pour lesquelles cela s’avère utile, comme l’impression de billets de réservation, de documents administratifs ou réglementaires.

Souvent, l’expérience est très décevante. En effet, les concepteurs de ces pages ont laissé les barres de navigation, les bandeaux de publicité, toutes les couleurs et ont choisi des polices de caractères peu lisibles à l’impression. Ceci est généralement dû à la méconnaissance des styles CSS dédiés à l’impression des pages web.

Notez que certaines propriétés CSS dédiées à l’impression faisaient déjà partie de la spécification CSS 2. Le W3C travaille en ce moment sur un module CSS3 consacré au média paginé, le Paged Media Module Level 3 qui est en Working Draft au 14 septembre 2023 : https://www.w3.org/TR/css-page-3/

Les feuilles de style spécifiques

1. Les liaisons aux fichiers CSS

Pour gérer des styles CSS dédiés à l’impression, il convient de les séparer des styles CSS pour l’affichage à l’écran. Pour cela, nous allons utiliser l’attribut media dans l’élément <link>. Il est préférable de concevoir une feuille de style pour l’affichage sur écran et une feuille de style pour l’impression papier.

Voici la syntaxe :

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

Dans ces exemples, avec l’attribut media, nous précisons l’utilisation des feuilles de style :

Le fichier styles.css est fait pour l’affichage à l’écran : media="screen".
Le fichier impression.css est fait pour l’impression papier : media="print".

Notez que si vous ne spécifiez pas un média, les styles s’appliquent à tous les médias.

2. Les requêtes de média

Vous pouvez aussi parfaitement utiliser des requêtes de média pour définir des styles CSS dédiés à l’impression. Nous pourrions avoir ainsi plusieurs requêtes...

Les propriétés globales des pages

Les pages qui pourront être imprimées devront avoir des propriétés spécifiques qui ne gêneront en rien leur lecture. Pensez à ces propriétés :

Des marges et des remplissages internes différents.
Une couleur de fond blanche.
Pas d’image d’arrière-plan.
Une couleur de texte noire.
Une police de caractères classique.
Une taille de caractères en points.

Voici ce que nous pourrions avoir, avec une requête de média, avec l’utilisation de l’élément <body> :

@media print { 
   body { 
       margin: auto ; 
       padding: 20pt ; 
       background-color: #FFF ; 
       background-image: none ; 
       color: #000 ; 
       font-family: Arial, Helvetica, Times, "Times new Roman" ; 
       font-size: 12pt ; 
   } 
}

Les polices de caractères

Il est un point qui requiert toute votre attention, c’est l’utilisation des polices de caractères. Vous devez faire un usage différencié des polices et des tailles de caractères à l’écran et à l’impression.

Nous l’avons vu précédemment, la taille des caractères utilisée pour l’affichage à l’écran doit être relative. Vous utilisez notamment l’unité em pour définir les tailles des caractères. Pour l’impression sur papier, vous devez plutôt utiliser des tailles fixes, avec l’unité pt par exemple qui est similaire à celle utilisée dans les traitements de texte.

Sur le même principe, vous pouvez utiliser des polices de caractères plus ou moins graphiques pour les titres et des polices spécifiques pour les paragraphes à lire à l’écran. Par contre, pour les documents qui seront imprimés, vous devez retourner vers les grands classiques des traitements de texte, comme Arial ou Times new Roman.

Les éléments non imprimés

Il n’y a rien de plus agaçant que d’imprimer des pages qui contiennent des barres de navigation, des bandeaux de publicité, des images surdimensionnées...

Pour éviter à vos visiteurs tous ces déboires, veillez à créer une simple classe qui n’affiche pas ce type d’élément à l’écran et qui par conséquent ne sera pas imprimé.

Voici un exemple d’une classe :

.non-imprime { 
   display: none ; 
}

Ensuite, c’est à vous d’appliquer cette classe aux éléments voulus dans la feuille de style dédiée à l’impression ou dans la requête de média voulue.

Les ruptures de lecture

1. Les sauts de page

Les pages affichées sur un écran n’ont pas de taille, elles peuvent être potentiellement infinies avec l’utilisation de la barre de défilement dans les navigateurs. Il en est tout autrement dans les pages imprimées. C’est à vous de déterminer où pourront s’afficher les sauts de page et les lignes solidaires dans les textes.

La propriété page-break-before des CSS 2.1 permet de déterminer la rupture de page avant l’élément ciblé par le sélecteur. Sur le même principe, vous avez la propriété page-break-after pour insérer une rupture après l’élément. Vous pouvez utiliser ces principales valeurs :

auto, valeur par défaut, qui permet de n’imposer aucun saut de page.
always applique toujours un saut de page.
avoid indique que les sauts de page sont interdits.

Nous pourrions parfaitement souhaiter avoir toujours des sauts de page avant les éléments <h1> et jamais après les éléments <h1>, <h2> et <h3>. Ce qui respecte les principes de lecture courants.

Voici les règles CSS utilisées :

h1 { 
   page-break-before: always ;  
} 
h1, h2, h3 { 
   page-break-after: avoid ;  
}

2. Les lignes solidaires...

Les liens hypertextes

La gestion des liens hypertextes ne doit pas être la même entre l’affichage sur un écran et l’impression sur papier. Pour l’impression papier, vous pouvez, voire vous devez, conserver la mise en forme usuelle des liens soulignés. De la sorte, ils se distingueront du texte courant.

De plus, vous pouvez ajouter l’URL ciblée, ce qui permet d’imprimer une aide supplémentaire et très appréciable.

Voici ce que pourraient être ces règles CSS :

@media print { 
   ... 
   a { 
       text-decoration: underline ; 
   } 
   a[href]:after { 
       content: " (" attr(href) ")" ; 
   } 
}

Les feuilles de style pour l’impression