Faites bonne impression avec les CSS
Par Eric A. Meyer
Vous les avez forcément déjà croisés : des liens qui disent « Cliquez ici pour une version imprimable », ou une phrase du même genre. Chaque fois que vous suivez un de ces liens, vous chargez un document séparé qui présente exactement la même information avec une autre mise en page, et probablement un balisage différent.
Cela veut dire que quelqu'un (ou un script) a dû prendre le document original et le convertir en une version dépouillée plus adaptée à une sortie papier. Ce quelqu'un, c'était peut-être vous.
Les feuilles de styles imprimante à la rescousse
Une des merveilles du CSS, c'est qu'il permet, pour un même document, de créer différents styles propres à un médium spécifique (styles media-specific). Nous sommes déjà habitués à créer des styles pour le rendu écran, mais penser aux autres médias n'est pas encore devenu un réflexe. Et, comme l'attestent tous les liens de « versions imprimables », notre réflexion sur l'impression s'est limitée à recréer un document autrement.
Mais pourquoi se fatiguer, quand la capacité d'offrir à vos lecteurs un meilleur contenu imprimé ne demande qu'un document bien structuré et une feuille de styles media-specific?
En effet, vous pouvez prendre n'importe quel document (X)HTML et simplement lui adjoindre une feuille de style pour l'impression, sans avoir à toucher au balisage. Ainsi, les problèmes de différence entre versions web et papier appartiennent désormais au passé. Cerise sur le gâteau, la réalisation est simple. (Pour plus d'informations sur les principes de base de la création de feuilles de styles media-specific en général et les styles « papier » en particulier, voyez « Print Different » sur meyerweb.com.)
Voyons maintenant comment le site A List Apart s'est trouvé pourvu de feuilles de styles papier qui, tout en esquivant un bug de navigateur, ont rendu la sortie imprimée bien meilleure.
Réparer un float flappi
Comme vous pouvez le voir en allant voir la liste des bugs connus de A List Apart (NdT : ce lien est désormais malheureusement mort), ou en visitant l'article n°104040 de Bugzilla, les navigateurs basés sur Gecko, comme Netscape 6.x ou Mozilla, ont du mal à imprimer de longs éléments flottants. Si un élément flottant dépasse le bas d'une page imprimée, le reste du contenu flottant disparaît, n'étant pas imprimé sur la page suivante.
Cela veut dire que si vous avez un site utilisant un style similaire à celui de A List Apart, avec tout le contenu d'un article dans un même bloc flottant, les lecteurs ne pourront récupérer que la première page de l'article.
En fait, l'astuce est de supprimer le flottement du contenu quand la page est imprimée. En termes simples, tout ce que vous avez à faire c'est d'assigner float: none à tout élément flottant. Cela ramène l'élément flottant dans le « flot » normal du document, qui est alors imprimé comme vous le vouliez, une page à la fois jusqu'à la fin de l'article.
J'ai donc fait cette recommandation à Jeffrey Zeldman pour ALA, ce qui a résolu le problème d'impression. A l'heure où j'écris ceci, les navigateurs basés sur Gecko ont toujours ce bug, mais au moins il peut être facilement contourné.
Le point de départ
Voici la feuille de style papier qu'utilisait A List Apart une fois le bug de flottement réglé:
#menu {
display: none;
}
#wrapper, #content {
width: auto;
border: 0;
margin: 0 5%;
padding: 0;
float: none !important;
}
C'est un bon début. Cette feuille de style escamote complètement le menu de droite du document pour qu'il ne soit pas imprimé, et redéfinit les marges et le remplissage (padding) du contenu de l'article pour que le texte remplisse la page imprimable d'un côté à l'autre.
Le problème, pour moi, c'était que trop des styles destinés à l'écran se retrouvaient dans l'impression.
Si nous regardons le head d'un article récent de ALA, nous trouvons (entre autres) les lignes suivantes:
<style type="text/css" media="all"> @import "nucss2.css"; </style> <link rel="stylesheet" type="text/css" media="print" href="print.css" />
Nous avons une feuille de style, print.css, qui a été restreinte au médium imprimante grâce à l'attribut media. La feuille de style nucss2.css, qui est importée afin d'être invisible à Navigator 4.x, est utilisée dans tous les médias que supporte le navigateur : écran, imprimante, projecteur, lecteur vocal, etc. Si l'on n'est pas prudent, on peut se retrouver avec des couleurs d'arrière-plan et des tailles de polices en pixels dans notre rendu imprimé.
Occupons-nous donc de ces problèmes de mise en page, et de quelques autres.
Fonds blanchis
Beaucoup de couleurs d'arrière-plan sont appliquées aux objets de la barre de navigation de droite. Puisqu'elle disparaît dans la version papier, pas besoin de s'embêter à changer quoi que ce soit dans cette barre. Ce qui nous évite tout de suite de nombreuses migraines potentielles.
Puisque les imprimantes n'impriment pas le blanc, il faut passer l'arrière-plan de la page en blanc. Il faut aussi enlever toute image d'arrière-plan qui se serait glissée dans la version papier.
Si nous utilisons simplement la propriété background, nous pouvons accomplir ces deux tâches avec une seule valeur. Pour nous laisser un peu de flexibilité, nous allons régler l'arrière-plan de body en blanc, et les arrière-plans des éléments de contenu (content) et de couverture (wrapper) en transparent (laissant ainsi apparaître le blanc à travers) :
body {
background: white;
}
#menu {
display: none;
}
#wrapper, #content {
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent;
}
Régler la couleur de premier plan n'est pas absolument nécessaire, mais c'est toujours une bonne idée. Maintenant nous avons deux éléments non flottants (#wrapper, #content) sans arrière-plan visible, et une page avec un arrière-plan blanc.
Au cas où vous vous inquiéteriez que Navigator 4.x fasse des choses terribles à la valeur transparent, réjouissez-vous N: N4 ne remarque que les feuilles de style qui ont une valeur de media pour screen. Exactement comme avec @import, les styles de notre feuille de style papier sont dissimulés à tout jamais aux yeux chassieux de Navigator 4. Pas de soucis, donc.
Retailler la police pour l'impression
La feuille de style tous media taille le texte imprimé à 11px, un choix discutable. La famille de polices (Georgia d'abord, des polices serif ensuite) est bonne pour l'impression, où les polices serif sont généralement préférées. Seule la taille a besoin d'un changement. D'où :
body {
background: white;
font-size: 12pt;
}
« Une seconde! », vous exclamez-vous sans doute. « Hérétique! Tout le monde sait que les points sont mauvais! C'est Todd Fahrner qui l'a dit! »
Eh bien oui, il l'a dit, et il avait entièrement raison: pour le media écran, les points sont un choix épouvantable. Pour l'impression en revanche, les points sont depuis longtemps l'unité de référence. Et puisque nous sommes en train de créer un style pour une impression papier, une taille de police de body à 12 points est en fait un excellent choix.
Vous pouvez bien sûr choisir n'importe quelle taille, mais 12 points est une taille très courante. Et puisque les styles tous media de Zeldman taillent les éléments du contenu des articles relativement à body, nous sommes parés.
En marge
Les styles existant pour les divs wrapper et content ont leur marges de droite et de gauche fixées à 5%. Ce qui veut dire qu'il y aura un espace vide de chaque côté de l'article, et que chaque zone vide fera 10% de la zone imprimable de la page. En effet, div content se trouve à l'intérieur de wrapper, et ils ont tous les deux 5% de marge de chaque côté. Additionnez le tout et vous obtenez 10%.
Les styles tous media originaux fixent un remplissage à droite (padding) de 15% pour le div content. Les marges nous donnant déjà 10%, nous avons donc juste besoin de 5% supplémentaires, ce qui est très facile à obtenir:
div#content {
margin-left: 10%;
}
Une autre possibilité aurait été de laisser la marge tranquille et de donner au remplissage à gauche une valeur de 5%. Puisque le div content n'a pas d'arrière-plan visible, les deux approches devraient avoir le même effet.
Malheureusement, certains navigateurs ont du mal à contrôler correctement le remplissage; il vaut donc mieux pour le moment contourner le problème en utilisant les marges autant que possible.
Liens imprimés
Une question délicate était celle des hyperliens. De toute évidence ils ne sont pas aussi utiles sur papier que sur écran, mais il est souvent important d'indiquer qu'il y avait des liens dans l'original. Voici ce que j'ai donc conçu:
a:link, a:visited {
color: #520;
background: transparent;
font-weight: bold;
text-decoration: underline;
}
Ceci donne aux liens une couleur suffisamment sombre pour être proche du noir dans une impression en dégradés de gris, mais avec quand même une couleur rouge foncé qui apparaîtra sur une impression couleur. La mise en gras et le soulignement garantissent le contraste des textes de liens.
Dans un navigateur totalement conforme avec le CSS2, nous pouvons insérer entre parenthèses les URL des liens après chacun d'entre eux, les rendant ainsi utiles à quiconque ayant sous la main une copie du document et un navigateur. Voici la règle, qui restreint cet effet au div content et évite donc de coller une URL sur le titre général:
#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
Essayez cette règle dans un navigateur basé sur Gecko, comme Mozilla ou Netscape 6.x. Après chaque lien de la version papier, vous devriez voir l'URL du lien entre parenthèses.
Dans tout autre navigateur qui ne comprendrait pas cette règle, il ne devrait pas y avoir de conséquences désastreuses : les liens seront toujours en rouge foncé, soulignés et en gras. Aucune URL n'apparaîtra après le texte du lien, c'est tout.
Notez que les espaces avant et après la parenthèse font bien partie de la règle ci-dessus: les espaces doivent y apparaître pour être insérés dans le document.
Il y a tout de même un problème d'esthétique avec cette nouvelle règle, précisément parce qu'elle entraîne l'insertion verbatim de la valeur de l'attribut href de chaque lien.
D'autre part, si nous jetons un œil au code des pages de ALA, nous remarquons rapidement qu'il y a un grand nombre d'URL relatives comme /issues/144. Elles sont insérées dans le document telles quelles, ce qui les rend moins utiles que si elles étaient affichées comme une URL absolue.
Or, il se trouve que les sélecteurs du CSS3 nous offrent une solution. N'importe quel sélecteur d'attribut qui utilise l'opérateur ^= sélectionne des éléments basés sur le début de la valeur de l'attribut. Nous pouvons donc sélectionner n'importe quel href qui commence par une barre oblique et insérer suffisamment de texte pour remplir la valeur.
#content a[href^="/"]:after {
content: " (http://www.alistapart.com" attr(href) ") ";
}
Cette règle transforme une valeur comme /issue/144/ en http://www.alistapart.com/issues/144/. Elle ne peut rien pour les URL relatives qui ne commencent pas par des barres obliques, mais heureusement ALA n'en utilise pas.
Étendre le bloc titre
En effectuant une dernière relecture des styles papier, j'ai réalisé que le bloc titre du site m'embêtait. Pas tant par sa présence que par son « soulignement », qui faisait partie de l'image. Le souligné, bien sûr, s'arrêtait au bord de l'image. Il m'est apparu qu'il serait possible de faire un petit tour de passe-passe et d'étendre cette ligne à la largeur du texte de l'article.
La première étape était de donner au div content une bordure haute qui soit, comme le soulignement de l'image, une ligne continue rouge foncé d'1 pixel. Comme j'allais créer une bordure haute pour le contenu, il semblait aussi une bonne idée d'insérer du remplissage entre la bordure et le contenu.
div#content {
margin-left: 10%;
padding-top: 1em;
border-top: 1px solid #930;
}
Tout seul, ce code dessinerait une ligne juste en dessous de l'image du titre. Comme il se trouve que ladite image est enveloppée dans un élément div qui ne sert qu'à elle, la marge basse de ce div est donc utilisée pour tirer à lui le reste du contenu.
div#mast {
margin-bottom: -8px;
}
div#mast img {
vertical-align: bottom;
}
Ces règles simples font que la bordure haute du div content s'aligne avec le soulignement de l'image du titre. La bordure se trouve en fait posée par-dessus l'image, mais comme les couleurs s'accordent il est difficile (sinon impossible) de se rendre compte de ce qui ce passe. Même si un navigateur décidait de mettre l'image par-dessus la bordure haute du contenu, l'image et la bordure seraient tout de même alignées et créeraient l'illusion.
La deuxième règle, celle avec vertical-align, contourne un comportement intéressant de Mozilla qui n'est constaté que lorsqu'un document est rendu en mode « standards », comme le sont tous les articles de ALA. [Voir Better Living Through XHTML]
En ce qui concerne la couleur de fond de l'image du titre, il n'y a vraiment aucun moyen de l'enlever à part rendre transparents les pixels qui la composent. On pourrait assigner une couleur de fond similaire au div du titre, mais cela serait pousser le bouchon un peu loin pour un arrière-plan si léger.
Quoi d'autre?
Voilà tout ce que nous avons fait pour ce re-design, mais les possibilités sont loin d'être épuisées.
On pourrait par exemple bricoler les couleurs pour qu'elles passent mieux à l'impression, ou modifier les marges pour qu'elles soient réglées en points (ou en picas, ou même en cm.) au lieu de pourcentages. Dans le monde de l'impression papier, vous avez presque autant de liberté de design que sur écran.
Un domaine que nous n'avons pas creusé aussi en profondeur que nous l'aurions pu est la taille de polices. Un certain nombre de classes, comme superfine, ont été laissées à la charge des styles tous media, et donc traitées en pixels. Les retailler pour le papier est aussi simple que ce que nous avons fait pour l'élément body : il suffit d'écrire une règle qui traite les éléments en question, et assigne une nouvelle valeur à font-size.
Pour prendre un exemple, nous aurions pu écrire .superfine {font-size: 9pt:}... ou n'importe quelle valeur appropriée. D'autres éléments, comme les pieds de page et pre, auraient pu bénéficier d'un travail similaire, et il se pourrait que ce soit le cas dans de futures versions des feuilles de style papier de ALA.
Le résultat final
Voici la feuille de style papier que nous avons obtenue après changements.
body {
background: white;
font-size: 12pt;
}
#menu {
display: none;
}
#wrapper, #content {
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent none;
}
div#content {
margin-left: 10%;
padding-top: 1em;
border-top: 1px solid #930;
}
div#mast {
margin-bottom: -8px;
}
div#mast img {
vertical-align: bottom;
}
a:link, a:visited {
color: #520;
background: transparent;
font-weight: bold;
text-decoration: underline;
}
#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
#content a[href^="/"]:after {
content: " (http://www.alistapart.com" attr(href) ") ";
}
Aussi minimale et (par certains aspects) rudimentaire que puisse être cette feuille de style, son action devrait sauter aux yeux de n'importe quelle personne comparant une version imprimée à l'article en ligne. Des modifications similaires et tout aussi spectaculaires sont possibles pour presque n'importe quel design, du simple au sublime, et ce genre de styles media-specific libère les auteurs de l'obligation de créer une copie « facile à imprimer » d'un document.
http://alistapart.com/articles/goingtoprint/