Une solution CSS qui remplace avantageusement la version imprimable d'un document.
Votre site propose de nombreuses ressources : images, textes... que vos visiteurs aimeront peut-être imprimer afin de les consulter à tête reposée. Mais une mise en page web est rarement reproductible telle quelle sur papier : les outils de navigation (menus, boutons...) y sont inutiles, l'écran est rarement respectueux du format A4, et vos lecteurs préfèreraient peut-être se passer de vos belles couleurs au profit d'une économie sur leur cartouche d'encre.
Bien-sûr, vous pouvez proposer une seconde version « imprimable » de vos documents. Mais vous gagnerez du temps en créant plutôt une simple une feuille de style spécifique, qui permettra d'imprimer proprement votre document original depuis n'importe quel navigateur respecteux des standards. Naturellement, elle doit être étroitement adaptée à la présentation de votre page : il n'y a pas de feuille de style-type d'impression.
Attention ! Le rôle d'une feuille de style n'est pas de contrôler au pixel près le rendu à l'écran. De la même manière, les règles d'impression CSS2 reposent sur la capacité des navigateurs à gérer par eux-mêmes une grande partie des problèmes de transfert sur papier de pages web. Si l'utilisateur l'a configuré ainsi, le navigateur outrepassera les règles de votre feuille de style d'impression. Vous devez compter également avec les particularités de son imprimante : notre propos est donc de garantir une impression correcte, mais non d'en déterminer précisément le moindre détail typographique.
Votre feuille de style d'impression est différente de votre
feuille de style « générale » : enregistrée dans
un fichier séparé (par exemple, print.css), elle
n'est utilisée par le navigateur que lorsque le visiteur imprime
la page consultée. Dans ce cas, les règles qu'elle contient
s'ajoutent aux règles de votre feuille de style générale. La
feuille de style d'impression a alors priorité sur la feuille de
style générale, puisqu'elle est spécifiquement dédiée au média
d'impression (print).
Le lien suivant doit être placé dans l'en-tête de votre page web :
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Vous pouvez ajouter à la section
<style>...</style> de
votre en-tête les styles spécifiques pour l'impression grâce à la
règle @media :
@media print {
... vos styles...
}
(Note : Netscape 4 ne tient aucun compte des feuilles de
style ayant le media print)
pour spécifier une orientation Portrait, utilisez la
règle : @page { size: portrait;
} ;
pour spécifier une orientation Paysage, utilisez la
règle : @page { size: landscape;
} ;
pour spécifier la taille des marges (ici, 2cm), utilisez
la règle : @page { margin: 2cm;
} ;
pour en savoir plus sur l'orientation et les marges.
pour spécifier une orientation différente (ici paysage)
pour l'impression d'un élément particulier de votre page web,
utilisez la règle : @page paysage {size:
landscape} ;
et pour l'appliquer par exemple à un tableau ou à une
image, attribuez la valeur paysage à la propriété page de
l'élément correspondant : table {page: paysage}
img {page: paysage} ;
pour en savoir plus sur les pages nommées.
pour spécifier un arrière-plan blanc, utilisez la
propriété : background-color:
#ffffff; ;
pour spécifier un arrière-plan sans image de fond,
utilisez la propriété : background-image:
none; ;
note : la plupart des navigateurs conformes aux standards gèrent eux-même correctement la suppression des arrières-plans de page à l'impression. Ces règles ne sont donc à employer que dans des cas particuliers ;
pour en savoir plus sur les styles d'arrière-plan.
pour spécifier la couleur noire d'un avant-plan, utilisez
la propriété : color: #000000; ;
pour modifier à l'impression la couleur d'une bordure (ici
noir), utilisez la propriété : border-color:
#000000; ;
pour en savoir plus sur la couleur d'avant plan ou des bordures.
pour empêcher l'impression d'un élément de votre page,
utilisez la propriété : display:
none; ;
pour en savoir plus sur la propriété display.
pour empêcher qu'un encadré soit imprimé « à
cheval » sur deux pages, utilisez la propriété :
page-break-inside: avoid; ;
pour forcer un saut de page avant un élément,
utilisez la propriété : page-break-before:
always; ;
pour forcer un saut de page après un élément,
utilisez la propriété : page-break-after:
always; ;
note : les sauts de pages peuvent coûter cher en papier, en sont donc à utiliser avec modération ;
pour en savoir plus sur les sauts de page.
pour imprimer entre parenthèses à la suite des liens
l'URL
correspondante, utilisez : a:after { content: " ("
attr(href) ") "; } ;
pour en savoir plus sur la propriété content.
Lisez Un exemple de feuille de style d'impression pour voir comment ces tecchniques sont mises en pratique.
Consultez les feuilles de style d'OpenWeb :