Retrouvez cet article dans : Linux Pratique 35
Ca y est, vous disposez d'un magnifique CV en ligne, et vous croisez les doigts pour que les recruteurs vous remarquent... Oui mais voilà , votre CV apparaît proprement à l'écran, mais avez-vous pensé à sa version imprimable ? Je ne suggère pas ici un lien de téléchargement vers une version imprimable (pdf ou openoffice), mais, plus simplement, je fais allusion au document que va générer la fonction Fichier -> Imprimer dans le navigateur du visiteur...Eh oui, avec les CSS, il est possible de définir un style spécialement dédié à l'impression de vos pages Web. De cette façon, la personne qui désirera imprimer votre document, n'aura plus besoin de passer par un éventuel lien de téléchargement, mais pourra utiliser directement la fonction Imprimer de son navigateur Web.
La déclaration de la CSS en fonction du média
Je pars du principe que vous disposez déjà d'un CV au format HTML, ainsi que d'une feuille de style pour l'affichage à l'écran. Un CV est un bon exemple pour illustrer cet article, car c'est un document très susceptible d'être imprimé par les gens venus visiter votre site. Mais les règles que nous allons évoquer ici peuvent s'appliquer à n'importe quelle page Web. (Pour la création d'un CV en HTML/CSS, je vous renvoie à Linux Pratique, hors-série n°1, consacré au développement Web).
Comme vous le savez maintenant, la déclaration d'une feuille de style externe s'effectue dans l'en-tête de la page Web, entre les balises <head>, et s'introduit par une balise <link>, comme ceci :
<link rel="stylesheet" type="text/css" media="screen" href="cv_screen.css" />
L'attribut media permet de désigner le type de média de sortie. La plupart du temps, il prend la valeur screen (pour un affichage à l'écran). Mais nous allons créer ici une feuille de style pour l'impression, nous allons donc ajouter la ligne suivante dans l'en-tête de notre page HTML :
<link rel="stylesheet" type="text/css" media="print" href="cv_print.css" />
La valeur print permet d'indiquer au navigateur qu'en cas d'impression sur papier, il faut utiliser une autre feuille de style (en l'occurrence, nous l'avons appelée cv_print.css).
Si vous utilisez une feuille de style interne, la déclaration de la feuille de style spécifique à l'impression s'effectue comme suit :
@media print {
déclaration des styles ici...
}
Quelques règles simples à respecter...
La feuille de style que vous devez créer sera presque identique à la feuille de style créée pour l'affichage à l'écran. Seules quelques modifications sont à prévoir pour une impression optimale.
En effet, il y a plusieurs détails auxquels il faut prêter une attention toute particulière :
- Les couleurs
N'oubliez pas que la plupart des gens impriment sur des feuilles blanches, en noir et blanc. Tout d'abord, attention à la couleur d'arrière-plan de votre page Web ! Dans la CSS pour l'impression, privilégiez le blanc (pour épargner les cartouches d'imprimante). Plus généralement, on choisira le blanc pour l'arrière-plan et le noir pour tous les éléments graphiques (texte, cadre, bordures, etc.). Si vous souhaitez mettre en valeur un niveau de titre ou un bout de texte, vous pouvez éventuellement utiliser les styles gras et italique (via les propriétésfont-weightetfont-style). Par la même occasion, évitez les images d'arrière-plan. Vous pouvez les supprimer via la mentionbackground-image: none;.
- Pas d'éléments superflus
Alors qu'à l'écran tout est fait pour offrir un certain confort de navigation, à l'impression, on peut largement se passer de plusieurs éléments : les boutons (images ou liens) de navigation justement, les images décoratives qui n'apportent rien à la compréhension du contenu, les bannières, les menus généraux (qui se trouvent souvent sur la gauche ou en haut des pages Web), etc.
Pour éviter que l'un de ces éléments ne soit imprimé inutilement, il suffit d'utiliser la propriétédisplay: none; Ainsi, pour un bloc<div>d'identifiant menu, on écrira :#menu {display: none;}Enfin, concernant les listes non ordonnées, préférez les puces classiques aux puces images.
- Problème des éléments flottants
Il existe un bug bien connu chez certains navigateurs concernant l'impression des éléments flottants. En effet, les navigateurs basés sur le moteur Gecko (Netscape 6.x, Mozilla, Firefox, etc.) posent problème lors de l'impression de longs éléments flottants. Plus précisément, si un élément flottant dépasse le bas d'une page imprimée, le reste du contenu flottant disparaît, et n'est même pas imprimé sur la page suivante !
Pour résoudre le problème, l'astuce consiste à supprimer le flottement des éléments sur la feuille de style dédiée à l'impression. Autrement dit, il faut assigner la propriétéfloat: none;à tous les éléments flottants.
Définir la mise en page
Pour déclarer les différentes mentions de mise en page, il faut utiliser un sélecteur "spécial".
Il s'agit de :
@page {propriétés...}
Les différentes propriétés de mise en page qui vous sont proposées sont les suivantes :
- La taille de la page : propriété
size. Cette propriété accepte deux valeurs numériques (largeur, puis hauteur sans oublier de mentionner les unités), ou bien les valeursauto(format normal de sortie),landscape(format paysage) ouportrait. - Les marges de la page : propriété
margin, comme pour l'affichage à l'écran. Les marges se définissent comme à l'habitude. Soit à l'aide demarginsuivi d'une ou de plusieurs valeur(s), soit en détaillantmargin-left,margin-top, etc.
Ne vous inquiétez pas, ces marges ne modifieront en rien l'apparence de votre page à l'écran. Le navigateur fera bien la différence entre les deux feuilles de style. - Les traits de coupe : propriétés
marks. On ne rencontre pas souvent cette propriété. Elle accepte les valeurscropetcross, qui permettent respectivement d'ajouter des traits de coupe et des repères de montage.
Finalement, vous obtiendrez quelque chose de ce genre dans votre feuille de style :
page {
size: 21.0cm 29.7cm;
margin: 2.5cm 2cm 2.5cm 2cm;
}
Notez qu'il est possible de donner des instructions différentes pour les pages de droite (recto) et de gauche (verso) (pour permettre la reliure des pages imprimées par exemple). On peut penser notamment à égaliser la marge gauche des pages de droite et la marge droite des pages de gauche, comme ceci :
@page {
size: 21.0cm 29.7cm;
margin-top: 2.5cm;
margin-bottom: 2.5cm;
}
@page :right {margin-left: 2cm; margin-right: 1.5cm;}
@page :left {margin-left: 1.5cm; margin-right: 2cm;}
Il existe également la mention @page :first, qui permet de définir des caractéristiques spécifiques pour la première page.
Remarque importante : Bien que ces éléments soient reconnus officiellement comme spécifications CSS2 du W3C, le sélecteur @page ainsi que les propriétés associées sont encore peu supportées par les navigateurs actuels. Mais ceci ne saurait perdurer dans les versions à venir...
En outre, il est possible d'attribuer une mise en page spéciale pour un élément en particulier, en spécifiant un nom (de votre choix) derrière le sélecteur @page. Par exemple :
@page image {size: landscape;}
puis
#contenu img {page: image; autres propriétés CSS...}
Ici, nous avons défini tout d'abord la mise en page "image", qui impose que l'impression s'effectue au format paysage. Et par la suite, nous précisons que l'élément <img> du bloc contenu doit adopter cette mise en page, en l'occurrence, l'image sera imprimée au format paysage
Les sauts de pages : pour scinder correctement votre document
Une impression "propre" suppose qu'aucun paragraphe ne soit coupé entre 2 pages, qu'aucune ligne ne se "promène" seule en pied de page ou au début d'une nouvelle page, etc. Il est possible d'éviter ce genre de choses grâce à plusieurs propriétés CSS :
page-break-before: permet d'imposer ou d'éviter un saut de page AVANT l'élément auquel s'applique cette propriété. Par exemple :h1 {page-break-before: always;}Cette déclaration impose un saut de page avant chaque titre de niveau 1.
page-break-after: permet d'imposer ou d'éviter un saut de page APRÈS l'élément auquel s'applique cette propriété. Par exemple :h1 {page-break-before: avoid;}Cette déclaration permet de ne jamais avoir de saut de page après un titre de niveau 1. Pour connaître la liste des valeurs que peuvent accepter ces deux propriétés, je vous renvoie au premier lien énoncé en fin de l'article.
orphans: pour éviter qu'une ligne ne se retrouve seule en fin de page (le reste du paragraphe étant sur la page suivante).widows: pour éviter qu'une ligne ne se retrouve seule en début de page (le reste du paragraphe étant sur la page précédente).
Ces deux propriétés prennent pour valeur une valeur numérique, qui définit le nombre minimum de lignes d'un paragraphe qui doivent figurer sur la page avant (orphans) ou après (widows) le saut de page (par défaut : 2)
Exemple : p {orphans: 4;} signifie qu'il y aura au minimum 4 lignes du paragraphe p sur la page avant le passage à la page suivante.
Imprimer les liens
L'inconvénient principal lorsque l'on imprime une page Web est que l'on perd la plupart des liens (lorsque ceux-ci sont désignés par un autre texte que l'URL elle-même). Heureusement, il existe une technique en CSS pour récupérer ces URL lors de l'impression. Celle-ci fait en sorte que les URL soient affichées entre parenthèses à la suite de chaque lien. Il s'agit d'utiliser la pseudo-classe :after associée à l'élément <a>, ainsi que la propriété content (pour de plus amples explications au sujet de cette propriété, voir le didacticiel précédent : "un titre en relief").
Nous allons affecter à la propriété content, la valeur attr(href). Cette fonction va retourner la valeur de l'attribut href, soit l'URL que pointe le lien.
Pour afficher les URL des liens d'une page, on écrira la chose suivante :
a:after {content: "("attr(href)")";}
Attention ! La propriété :after n'est à ce jour pas reconnue par Internet Explorer. Faute de mieux, vous pouvez au moins indiquer la présence des liens en jouant sur le gras, voire le soulignement des liens hypertexte.
Références
- Les diverses propriétés CSS : Mise en page pour modes d'impression" : http://fr.selfhtml.org/css/proprietes/printlayouts.htm [fr].
- Traduction des spécifications du W3C : "Les médias paginés" : http://www.yoyodesign.org/doc/w3c/css2/page.html [fr].
- Denis Laurent, "Une feuille de style pour l'impression", Openweb : http://openweb.eu.org/articles/css_impression/ [fr].
- Meyer Eric, "Faites bonne impression avec les CSS !" : http://pompage.net/pompe/impression/ [fr].
- Meyer Eric, "CSS Design : Going to Print" : http://www.meyerweb.com/eric/articles/webrev/200001.html [en].
