Une feuille de style pour l’impression

Openweb.eu.org > Articles  > Une feuille de style pour l’impression

Abstract

Une solution CSS qui remplace avantageusement la version imprimable d’un document.

Article

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.

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.

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.
Attention : — MSIE n'implémente pas 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.

À propos de cet article

  • Openweb.eu.org
  • Profil : Débutant, Expert
  • Technologie : CSS
  • Auteur :
  • Publié le :
  • Mise à jour : 25 janvier 2009
  • 13 commentaires

Vos commentaires

  • Damien Le 1er octobre 2010 à 17:52

    Bonsoir Monsieur,

    Je suis un projet mais des difficultés au niveau de l’impression.
    J’aimerais que vous m’aider avec le code qui permet de ne pas afficher l’url à l’impression.

    Merci d’avance.

  • arimas Le 16 mai 2011 à 18:16 En réponse à : Damien

    moi aussi j’ai des defficulty au niveau de l’impression degage par les figures de style
    svp help me any one hier me

  • Jim Le 23 juin 2012 à 12:54

    Énormément de détails, merci !

  • Nemo Le 9 octobre 2012 à 17:26

    DAMIEN> l’impression des URL se fait par le navigateur, afin de ne pas imprimer les URLs tu devra aller dans l’option du navigateur et décocher l’impression en-tete et pied de page

  • kamal Le 3 novembre 2012 à 12:11

    Bonjour,
    Svp j’arrive pas a imprimer l’arrière paln de mon div , j’attend votre aide
    Merci d’avance.

  • Pascale Lambert Charreteur Le 3 novembre 2012 à 17:55

    Les arrière-plans ne sont pas imprimables par défaut. Et c’est tant mieux d’ailleurs pour les économies d’encre !
    Vous ne pourrez imprimer un arrière plan qu’en changeant la configuration de votre navigateur. Vous ne pouvez en aucun cas l’imposer.

  • kamal Le 5 novembre 2012 à 11:18

    Bonjour, Est ce qu’il ya une moyen pour imposer l’impression de l’arriér plan par code ??

  • Pascale Lambert Charreteur Le 5 novembre 2012 à 11:51

    Relisez mon commentaire précédent, la réponse y est déjà clin d'œil

  • kamal Le 5 novembre 2012 à 12:42

    Merci de votre attention,

  • scorpion Le 3 décembre 2012 à 12:48

    Bonjour,
    comment empécher l’impression l’entete et pied de page
    Merci d’avance.

  • karl Le 4 décembre 2012 à 06:01

    Une des solutions est de mettre dans la feuille de style print un display:none sur les éléments dont tu n’as pas besoin lors de l’impression.

  • information Le 3 janvier 2013 à 22:36

    pas possible par css il faut Fichier > Aperçu avant impression > puis un clic sur l’icône "Mise en page" (ou Alt + M), on arrive dans la fenêtre de la mise en page.

  • Flo Le 22 septembre 2013 à 14:46

    Merci ce sont exactement les informations dont j’avais besoin avant de me lancer sourire

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom