Le projet

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 feuille de style spécifique, qui permettra d'imprimer proprement votre document original depuis n'importe quel navigateur respectueux 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.

Pour lier vos styles d'impression à vos pages XHTML

Si vous utilisez des feuilles de style externes

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" />
      

Si vous utilisez une feuille de style interne

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…
}
      

Orientation et marges

Pour tout le contenu

• 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 un élément spécifique

• 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.

Couleurs

Arrière-plans

• 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.

Avant-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.

Impression sélective

• 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.

Sauts de page et lignes orphelines

• 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 couter cher en papier, en sont donc à utiliser avec modération ;
• pour en savoir plus sur les sauts de page.

Impression des URL

• 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.

Consultez les feuilles de style d'OpenWeb :

• la CSS screen qui détermine la présentation à l'écran ;
• la CSS print qui gère l'impression.