CSS: faire des pages web parfaitement imprimables
Dans votre navigateur web, vous pouvez cliquer sur le bouton imprimer, ce qui envoie la commande pour imprimer la page que vous êtes en train de visiter. Cette page sur votre écran contient des informations que le visiteur ne veut pas voir apparaitre dans la version imprimée. C’est pourquoi il est possible d’utiliser des feuilles de styles spécifiques au type de médium.
Appeler une feuille de style spécifique à l’impression
Lorsque vous liez une feuille de style pour tous type d’appareil, vous utilisez la ligne suivante entre les balises <head>:
<link rel="stylesheet" type="text/css" media="all" href="tous.css" />
Lorsque vous voulez spécifier des feuilles de style pour l’impression et pour l’écran, vous utiliserez le code suivant:
<link rel="stylesheet" type="text/css" media="all" href="tous.css" /> <link rel="stylesheet" type="text/css" media="print" href="print.css" />
Vous avez maintenant une feuille de style pour l’impression et l’autre pour les autres médiums et ainsi contrôler l’aspect de la page dans différentes situation.
Que faire apparaitre dans la copie imprimée d’une page?
Une chose importante à considérer est ce que l’on veut imprimer et ce que nous ne voulons pas. Voici une liste de points importants sur l’impression des pages:
Les éléments importants pour l’impression:
- Copie en noir et blanc
- Texte lisible
- Article et ses images
Les éléments qui ne sont pas importants ou non nécessaires pour l’impression:
- Publicités
- Images
- Menus
- Barres latérales
- Entête
- Pied de page
Commençons par cacher les éléments que l’on ne veut pas voir et faisons une version imprimée centrée sur ce que l’on a besoin.
Taille des polices
Quel que soit la taille de votre police de départ il est important de spécifier une taille de police adapté à la lecture des documents imprimés. Une police autour de 12 pixels est parfaitement adapté:
body { font-size:12px; }
Marges & Position
Si vous supprimez toutes vos barres, en-tête, pied de page et menus, vous devez arriver à la conclusion que votre version imprimée et étrangement situé sur le papier. Vous devez être certain de laisser assez de place autour du texte. En supposant que votre article soit dans la div #content vous pouvez le faire ainsi:
#content{ margin:5%; width:100%; }
Zones non nécessaires
Comme nous le venons de le spécifier précédemment il y a de nombreuses zones que l’on ne veut pas à l’impression. Vous pouvez les cacher dans votre feuille de style:
#header, #footer, #sidebar, #menu { display:none; }
Images
Nous voulons montrer les images de l’article mais ignorer celle qui sont à l’extérieur.
img { display:none; margin:0; padding:0; }
#content img { display:inline; }
Couleurs
Habituellement vous utilisez un certain nombre de couleurs dans les polices, mais également dans les fonds. Ces couleurs ne sont pas nécessaires dans la version imprimée de l’article. C’est pour cela que l’on va changer les couleurs pour les faire correspondre à celles du papier.
#content{ color:#000; background:#fff; }
Dans ce cas l’ensemble de l’article à un fond blanc et son texte est noir. Vous pouvez également changer le noir pour une couleur moins foncée, suivant votre choix.
Liens
Dans votre design, vous devez avoir spécifier des (hover) effets à vos liens. Dans la version imprimée, ces effets ne sont pas appropriés et ils ne seront pas identifiés comme liens par les visiteurs.
Dépendant du nombre de styles que vous avez déclarés, la déclaration de style suivant est généralement suffisante pour les faire ressembler à des liens. Si vous avez plus qe choses spécifiées dans votre feuille de style originale, n’hésitez pas à les changer pour un style plus général dans la feuille de style pour l’impression.
a:link, a:active, a:visited{ color:blue; text-decoration: underline; padding:0; margin:0; line-height:1 }
Contenu spécifique à l’administrateur
Lorsque vous utilisez des CMS, vous avez souvent l’option de pouvoir modifier les pages depuis le site. Mais lorsque l’administrateur doit imprimer la page il ne veut pas que le « edition page » apparaisse. Dépendant de la class dans laquelle est votre « édition page » vous pouvez cacher ces liens de la façon suivante:
a.edit-link{ display:none; }
Conclusion
Les noms de classes que nous avons mis en exemples ne correspondent pas toujours avec vos styles vous saurez les adapter à vos besoins. Appliquez ces règles à tous vos sites web cela les rendra plus professionnels avec des pages irréprochables à l’impression.
