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és ~~font-weight~~ et ~~font-style~~). Par la même occasion, évitez les images d'arrière-plan. Vous pouvez les supprimer via la mention ~~background-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 valeurs ~~auto~~ (format normal de sortie), ~~landscape~~ (format paysage) ou ~~portrait~~.
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 de ~~margin~~ suivi d'une ou de plusieurs valeur(s), soit en détaillant ~~margin-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 valeurs ~~crop~~ et ~~cross~~, 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.

/img-articles/lp/35/art-23/fig-1.jpg

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