Faire une feuille de style CSS « print » pour l`impression

Faire une feuille de style CSS « print » pour l'impression
Référence :
http://www.alsacreations.com/tuto/lire/586-feuille-css-impression.html
Pourquoi une feuille de style pour l'impression ?
Certains concepteurs web ont la fâcheuse habitude de tout lire à l'écran, et de ne jamais imprimer les
pages des sites web qu'ils consultent. Pourtant, un nombre impressionnant d'utilisateurs passe
régulièrement par une imprimante pour accéder aux contenus d'un site web, ou pour les conserver.
C'est pénible de lire à l'écran, je préfère imprimer les articles pour les lire plus tard, tranquillement, etc.
Le réflexe « naturel », pour imprimer une page est, par exemple en faisant « Fichier > Imprimer… ». Mais
le résultat peut être très aléatoire. Le plus souvent, on se retrouve avec trois pages à imprimer, pour une
seule vraie page de contenu.
Certains sites proposent également des versions « imprimables », pages HTML épurées ou documents
PDF, de certains de leurs contenus. Le problème, c'est qu'il est difficile de savoir à l'avance quelle page
un utilisateur voudra imprimer.
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.
Limites des feuilles de style pour 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 choix est le PDF.
La feuille de style pour l'impression est appelée de la manière suivante :
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Attention à bien préciser media="screen" à votre CSS principale sous peine de voir la feuille de style
print.css hériter des styles réservés à l’affichage :
<link rel="stylesheet" href="normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
css-print.docx
1/6
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.
Nous avons donc la possibilité de ne 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.
•
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êmes 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.
css-print.docx
2/6
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. 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.
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.
Les liens imprimés
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 un document papier. #div
a:link:after (voir l'exemple).
CSS3 offre la possibilité de transformer un grand nombre de liens relatifs en liens absolues. 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. Donc, nous pouvons sélectionner n'importe quel href qui commence par une barre
oblique et insérer suffisamment de texte pour remplir la valeur. 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. #content a[href^="/"]:after (voir l'exemple)
Non supporté par IE6. IE7, IE8, Opera et les navigateurs basés les moteurs Webkit (Safari et Chrome) et
Gecko (Firefox) supporte ces sélecteurs.
Saut de page manuel
Si vous voulez forcer ou empêcher un saut de page, vous pouvez le faire au moyen de page-breakbefore ou de page-break-after (voir l'exemple).
Les astuces
Voici quelques exemples :
•
Enlever tout background sur la page imprimable
html body {
background: none;
}
css-print.docx
3/6
•
Supprimer la navigation
#menu, #menu-utilitaire {
display: none;
}
•
Supprimer les éléments qui ne seront pas affichés
#banniere, #col-droite, #footer {
display: none;
}
•
Affichage du titre
h1 {
margin: 0;
padding: 0;
text-indent: 0;
line-height: 25pt;
font-size: 25pt;
}
•
Modification de la couleur des titres et des liens
h2, h3, #contenu h3, #contenu a, a {
color: #000;
}
•
Pour les marges imprimées
@page { margin: 10%; }
•
/* pour les marges de l'imprimante */
Augmenter la largeur du texte à lire
#contenu {
width: 100%;
margin: 0;
padding: 0;
float: none !important;
}
•
/* ou margin: 0 5%; */
Remettre les backgrounds aux valeurs par défaut
body {
background: #fff;
}
/* ou background: none; */
#content {
background: transparent;
}
•
Remettre la couleur des textes par défaut
#author {
color: #000;
}
•
Afficher la destination des liens, les rendant utiles à quiconque ayant un document papier
a:link:after {
content: " (" attr(href) ") ";
}
css-print.docx
4/6
•
CSS3 offre la possibilité de transformer un lien relatif en lien absolue. Elle ne peut rien pour les URL
relatives qui ne commencent pas par des barres obliques.
Par exemple, un lien relatif comme suit : /
a[href^="/"]:after {
content: " (http://www.alistapart.com" attr(href) ") ";
}
#contenu a[href^="/"]:after {
content: " (http://www.alistapart.com" attr(href) ") ";
}
•
Faites ressortir des liens présents dans le texte
a:link {
font-weight: bold;
/* moi, je préfère sans… */
text-decoration: underline;
color: #00f;
/* ou #000; */
}
•
Enlever les bordures autours des liens
img, img a, a {
border: none !important;
}
•
Utiliser des tailles de polices cohérentes avec une imprimante
body {
font-size: 12pt;
}
•
Modifier les polices de caractère
body {
font-family: "times new roman",times,serif;
}
•
Penser à gérer l’affichage des commentaires s’ils sont nombreux
#comments {
page-break-before: always;
}
•
Remettre le texte des droits légaux au centre de la page
#legal {
text-align: center;
}
•
Afficher un message à l’impression uniquement
#printMsg {
display: block;
}
css-print.docx
5/6
Note 1 :
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.
Note 2 :
Pensez en particulier au fait que votre document pourra être imprimé en noir et blanc, par exemple sur
une imprimante laser d'entreprise. 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.
Note 3 :
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>.
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/
http://www.pompage.net/pompe/votreimpression/
http://actuel.fr.selfhtml.org/articles/css/mise_en_page_imp/ (très bien)
http://www.kiwano.fr/utiliser-nouveaux-selecteur-css-3/ (CSS 2.1 et CSS3)
css-print.docx
6/6