La feuille de style oubliée : « print.css »

De nos jours visiter un site sans CSS c’est un peu comme de voir un film muet. Comprendre l’histoire est tout à fait possible mais ce n’est pas vraiment le summum de la technologie. Pourtant de nombreux webmasters oublient un élément fondamental des CSS : la feuille de style d’impression.

Print, par The Italian VoiceLa feuille de style CSS est indispensable pour la mise en forme des pages web contemporaine. Tout webmaster qui se respecte doit avoir appris à travailler avec. Pourtant beaucoup de créateurs de sites internet oublient que les CSS ne servent pas qu’a mettre en page l’affichage écran mais aussi, par exemple, les impressions !

A quoi bon une feuille de style supplémentaire, se disent-ils, puisqu’une feuille css peu contrôler l’apparence de tous les médias en même temps.

« Contrôler« , voilà le mot clef. Car si une page web doit fournir des menus, des liens, des accès vers d’autres news, etc. A quoi bon garder toutes ces informations sur une page imprimée ? Combien de fois avez-vous pesté après avoir lancé l’impression d’une page web pour vous retrouver avec autant de publicité que de texte utile ? La feuille de style configurée pour le média print donne justement la possibilité d’écarter tout ce qui n’est pas nécessaire sur une feuille de papier et même d’ajouter des compléments d’informations.

Principe et intégration de la feuille de style

Quand un visiteur tente d’imprimer votre page (et seulement dans ces cas là, inutile donc de s’inquiéter de google) le navigateur du client va chercher si vous avez une feuille de style prévue pour les impression et l’appliquer au document. La première chose à faire est donc de signaler la css en question.

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

La seule différence avec une feuille de style ordinaire est dans le « media = print » (impression). Bien sûr vous aurez pris soin de configurer votre css standart pour le média « screen » (écran). Le nom de la feuille de style importe peu, mais par confort « print.css »  sera souvent utilisé.

Configurations générales de la css

Pour commencer votre print.css vous devriez configurer quelques éléments commun à toute la feuille de style.
/* Réglages généraux */
*{
background-color:#fff;
color: #0F0F0F;
font-family:serif;
font-size:12pt;
}

  • La couleur de fond : spécifier une couleur n’est pas indispensable, puisque par défaut la couleur de fond des document imprimés est fixé à blanc par tous les navigateur (de même le texte est formaté pour être noir). Cela dit c’est toujours frustrant de se retrouver dans un cybercafé avec une feuille toute rouge. Préciser que le fond doit être blanc ne peu donc faire que du bien.
  • La couleur du texte : Dans le même ordre d’idée un texte légèrement grisé peu aider à la lecture, en particulier si les titres eux sont plus sombres.
  • La police : Verdana et Georgia sont des polices prévue pour l’écran, pas forcément adaptées au print. C’est pourquoi on utilisera plus volontier du « times » ou du « serif« .
  • La taille du texte : Vous l’aurez noté, nous avons mis une mesure en points (pt) au lieu de pixels (px), car nous sommes en print ! la mesure en points s’adapte mieux  à l’impression et permets de contrôler plus justement le rendu final.

Les zones à ne pas imprimer

Un simple « display:none; » et vous faites disparaitre tout ce que vous voulez écarter de votre feuille imprimée. A vous de faire le tri évidemment. Vous pouvez sélectionner des id, des classes, des attributs, etc. Comme dans tous css.
/* ne pas imprimer ce qui suit */
#social, #menu_a, #slider, #left-sidebar, #right-sidebar, .flash , #footer, .comments, .addthis, .sharethis{
display: none;
}

Mise en page générale

Après avoir exclu ce qui n’est pas désiré vous devez formater ce que vous voulez garder, sans quoi vous risquez de vous retrouver avec des zones blanches.
/* Formater la mise en page de ce qui suit */
#content{
width: 100%;
margin: 0;
padding: 0 5pt;
float: none !important;
}

Le « #content » est ma div qui contient mes articles. La votre peu s’appeller #page, #articles, ou comme vous voulez. C’est bien sûr la même que sur le document html.

  • Width (largeur) : Nous lui avons donné une largeur de 100% pour qu’elle remplisse toute la page. Un choix comme un autre.
  • Margin (marges externes) : Elles sont définie à 0 car par défaut le navigateur crée ses propres marges.
  • Le padding (marges internes) : Il sert éviter qu’une partie du texte soit coupé sur les bords. Vous noterez que cela est définit en pt.
  • Pas de float : Cette règle est là pour eviter le bug de certains navigateurs qui coupent parfois le bas du texte quand il est dans une div en « float ».

/* Formater la taille des titres */
h1, h2, h3{
page-break-after: avoid.
}
h1{
clear:left;
font-size:18pt;
}
h2{
font-size:14pt;
text-decoration:underline;
}

  • Page-break : Le petit code général aux titres permet d’éviter un titre orphelin. Aucun titre ne sera donc suivit d’un saut de page.
  • La taille des titres : Bien sûr vous pouvez laisser le navigateur imposer ses propres règles pour les titres. Mais si vous voulez rajouter des couleurs, souligner les h2, etc. Il faudra le préciser.
  • Le « clear:left » : Il sert à éviter que vos titres soit à côté des images. C’est un choix.

/* Formater vos images */
img{
float:left;
margin-right:10pt;
}

  • Les images : float sur les images permets que le texte les contourne. On ajoute une petite marge pour que le tout ne soit pas collé.

/* Formeter les liens */
a{
color:#0C4F5F;
text-decoration:underline;
}

  • Les liens : Changer la couleur des liens ou au moins les souligner permets de montrer que ce sont des liens et qu’ils ont une importance différente dans le texte.

Que faire avec des liens dans du print ?

La mise en forme de vos pages imprimée est presque terminée. Avouez que ce n’est pas compliqué. Soyez certain que même si vous n’en faites pas plus les visiteurs de votre site vous remercieront. Mais il faut reconnaître que des mots soulignés en guise de liens, sur une feuille de papier, ça ne sert pas à grand chose.

heureusement il y a une petite astuce pour indiquer aux lecteurs (à titre d’aide mémoire par exemple) la destination de vos liens :

#content a:link:after, #content a:visited:after{
content: " (" attr(href) ") ";
font-size: 90%;
}

Ce petit code ajouté à votre css va écrire après chaque lien, entre paranthèses « ( » le contenu de l’attribut href « attr(href) ».

Une print.css encore meilleure

Au delà de cette étape nous entrerions dans une préparation plus compliquée. Mais il est important de signaler que la feuille de style pour impression peut encore être améliorée.

Nous pourrions imaginer par exemple, pour ne pas parasiter le texte imprimé, une zone apparaissant dynamiquement en javascript en fin de page de vos articles, avec la liste de tous les liens de la page. Il faudrait alors penser à les référencer (1, 2, 3, etc.) dans le texte, à effacer les liens dupliqués, etc.

Un logo différent (en noir et blanc par exemple) pourrait apparaître sur les feuilles imprimée uniquement. Une div avec une image de fond uniquement sur le « print.css » ferait l’affaire.

Les commentaires ? Le débat est permanent, certains préfèrent les imprimer par défaut, d’autres pas.

Si on utilise dans sa page l’attribut « abbr » pour les abréviation, on peu utiliser un système similaire à celui des liens pour écrire la première occurrence de chaque abréviation en clair. Mais autant le faire directement dans l’article écran.

Vérifier le rendu d’impression

Pour les ajustements de marges, taille de caractères, couleurs, etc. Il est préférable de vérifier le rendu final de votre feuille css pour impression. pour cela allez sur un de vos article (ou toute page imprimable de votre site) puis dans le menu fichier, puis « aperçu avant impression« .

Publié dans : Sur le webdesign | Par : Hernan

Hernan Carricaburu est créateur de sites internet en auto-entreprise. Ancien journaliste il se forme aux techniques du web en 2010 et fonde "Pour le web" en association avec d'autres webmaster, webdesigner, des graphistes, photographes, illustrateurs, etc.

2 commentaires pour “La feuille de style oubliée : « print.css »”

  1. truffo dit :

    Le Web en général n’est pas adapté pour l’impression pour une impression un peu pro, il vaut mieux passer par un export PDF.

    Pour les liens et plus généralement, tous les balises qui possède une partie de leur contenu dans un attribut, tu peut utiliser la fonction CSS attr (http://truffo.fr/2010/08/imprimer-ladresse-des-liens-lors-de-limpression-dune-page-web-content-after-attr/).

    Cette technique à l’avantage de ne pas polluer le code HTML.

  2. Hernan dit :

    Bonjour Truffo, merci pour ton commentaire. Oui, j’ai effectivement évoqué la solution dont tu parles dans mon article (c’est celle que j’emploie sur mon site), mais je ne la trouve pas très esthétique. C’est pourquoi une solution en javascript avec une classe du type « .only-for-print » me paraît plus indiquée si on à le temps de la mettre en place.