Fiche CSS : Impression.


Objet de la fiche

État de la fiche Terminée validée


Plan de la fiche

Avant propos

L'écran et l'imprimante  sont des modes de sortie très différents pour des données structurées agréablement. Ces deux modes de sortie ont leurs propres règles. Pendant qu'à l'écran des écritures claires auront belle allure sur des fonds sombres, ce n'est pas une bonne solution pour la sortie à l'imprimante. De plus les mises en pages sont nécessairement différentes, il faut tenir des dimensions des pages d'impression, des sauts de page etc.

Image avertissement Toutes les directives présentées sur cette fiche ne fonctionnent pas avec tous les navigateurs.

Fichier CSS pour mode de sortie impression

Les feuilles de style offrent la possibilité d'incorporer différents fichiers de feuilles de style pour les différents modes de sortie, qui peuvent contenir des définitions de formats différentes. Le logiciel doit décider lors de la présentation des pages quel fichier CSS incorporé est déterminant. Si le navigateur Web par exemple affiche les pages à l'écran, il doit utiliser le fichier CSS qui fixe expressément l"écran" comme mode de sortie, et si l'utilisateur imprime une page, le navigateur doit employer à la place le fichier CSS que vous avez mentionné pour le mode "imprimante".

Cas des feuilles de style interne

On utilise l'attribut "media= print" de l'élément style pour attacher une feuille de style interne au média impression  :

<style media="print" type="text/css">
   .... directives de style ....
</style>

Cas des feuilles de style externe

On utilise l'attribut "media= print" de l'élément link pour attacher une feuille de style externe au média impression  :

<link rel="stylesheet" media="print" href="impression.css">

Information Pour construire la feuille de style relative à l'impression, une bonne technique consiste à reproduire le schéma de style utilité pour l'écran, lui affecter le média "print", et appliquer les directives présentées dans cette fiche.

Définir la mise en page

La mise en page est définie en style global avec le mot clé page.

Syntaxe

@page { mentions sur la mise en page  }

Mentions sur la mise en page


L'attribut @page et ses mentions
Mentions Commentaires et exemples Valeurs
size Taille de la page
Déterminer la largeur et la hauteur de la mise en page.En cm,in,%		 auto : Format normal du mode de sortie (par défaut).
landscape : Format  paysage.
portrait : Format  portrait.
Mentions numériques : 2 mentions séparées par un espace largeur et hauteur en cm
@page { size:landscape; size:21.0cm 29.7cm;}
margin Définir  les marges de pages margin-top : marge supérieure.
margin-bottom : marge inférieure.
margin-left : marge gauche
margin-right : marge droite
margin : par déterminer une marge unique pour l'ensemble des côtés.
@page { size:landscape;margin-left:2cm;}
marks Traits de coupe (coupe de pages) et repères de montage (alignement de la page pour photocopie et impression). none : pas de traits ni de repères(réglage normal).
crop(1) : poser des traits de coupe.
cross(1) : poser des repères de montage.
@page { size:landscape;margin-left:2cm;marks:crop cross;}

Nota (1) : crop et cross peuvent être définies individuellement ou touts les deux, séparés par un espace. Dans ce cas les deux types de marque sont pris en compte.

Information Les directives @page doivent se trouver en tête de feuille de style.

Pages droite/gauche et première page

On peut définir des mises en pages différentes pour les pages droites et gauche, ainsi que pour la première page.

Syntaxes

Ces mises en page sont définies en style global avec le mot clé page.

@page :left { mentions sur la mise en page  des pages de gauche }
@page :right { mentions sur la mise en page  des pages de droite }
@page :first { mentions sur la mise en page  de la première page uniquement }

Les mentions que l'on peut appliquer sur la mise en page  des pages de gauche, droite ou première page sont les mêmes que précédemment, à savoir size, margin, marks.

Information Les directives @page doivent se trouver en tête de feuille de style.


Pages nommées

On peut définir différents formats spéciaux pour certains éléments de la manière suivante :

<style type="text/css">  
@page monFormat { size:landscape; } On défini une page par son nom (ici comme exemple monFormat) avec sa règle de style qui utilise les mentions de mise en page décrites ci-dessus.
div.PersonnalisationDiv { page:monFormat; /* autres mentions CSS */ } Exemple : toutes les balises div possédant l'identificateur class="PersonnalisationDiv" se verront appliquées la définition de monFormat.
</style>  

Polices de caractères

Utiliser des polices avec empattement comme 'times new roman', times, serif beaucoup plus lisibles à l'impression que les polices sans empattement.

Image polices de caractères

Cacher des éléments à l'impression

Dans le fichier CSS concernant l'impression utiliser display:none au lieu de visibility:hidden pour supprimer les éléments qui ne doivent pas apparaître à l'impression. En effet visibility:hidden cache l'élément mais l'espace réservé n'est pas libéré, ce qui peut entraîner des zones blanches à l'impression. display:none fait comme si l'élément n'existait pas.

Définir les sauts de page

Si vous voulez forcer ou empêcher un saut de page, vous pouvez le faire au moyen de 2 attributs CSS page-break-before et page-break-after.

Syntaxes

Pour imposer ou empêcher un saut de page avant l'élément sur lequel s'applique le style.

<h1 style="page-break-before:always">xxxxxxxx</h1>

Pour imposer ou empêcher un saut de page aprés l'élément sur lequel s'applique le style.

<h1 style="page-break-after:always">xxxxxxxx</h1>

Attributs


Propriétés et attributs de saut de page
Propriétés Attributs Commentaires
page-break-before always Insère un saut de page avant l'élément actuel.
avoid Ne pas insérer de saut de page avant l'élément actuel.
left Avec Pages droite/gauche et première page insère un saut de page avec élément concerné sur la prochaine page de gauche.
right Avec Pages droite/gauche et première page insère un saut de page avec élément concerné sur la prochaine page de droite.
inherit Prend la mention de saut de page de l'élément parent (hériter).
auto Aucune mention de saut de page (par défaut).
page-break-after always Insère un saut de page après l'élément actuel.
avoid Ne pas insérer de saut de page après l'élément actuel.
left Avec Pages droite/gauche et première page insère un saut de page avec élément concerné sur la prochaine page de gauche.
right Avec Pages droite/gauche et première page insère un saut de page avec élément concerné sur la prochaine page de droite.
inherit Prend la mention de saut de page de l'élément parent (hériter).
auto aucune mention de saut de page (par défaut).

Lignes seules en fin de page ou début de page


En fin de page (lignes orphelines) : propriété orphans

On peut empêcher que des sauts de page dans du texte courant se fassent si une seule ligne se trouve sur une page et toutes les autres lignes du paragraphe sur la page suivante.

Pour cela on peut spécifier combien de lignes du texte courant plus long doivent au minimum figurer sur la page avant le saut de page. Un chiffre est permis qui exprime le nombre de lignes. Le réglage par défaut est 2.
Cette règle s'inscrit dans la feuille de style générale qui gère l'impression.

Exemple : <style type="text/css"> h1,h2,h3,h4,p,td,ul,li {orphans:3;} </script

En début de page (lignes veuves) : propriété widows

On peut empêcher que des sauts de pages dans du texte courant se fassent si malencontreusement une seule ligne se trouve sur la nouvelle page et que toutes les autres lignes du paragraphe se trouvent sur la page précédente avant le saut de page.

Pour cela on peut spécifier combien de lignes du texte courant plus long doivent au minimum figurer sur la page après le saut de page sur la nouvelle page. Un chiffre est permis qui exprime le nombre de lignes. Le réglage par défaut est 2.

Exemple : <style type="text/css"> h1,h2,h3,h4,p,td,ul,li {widows:3;} </script>

Faire apparaître le contenu des liens

Utilisez la fonction attr(x) associé aux pseudo-éléments after ou before et à l'attribut content pour faire apparaître la destination des liens.

Retrouvez ce mécanisme en détail dans la fiche "Structuration automatique des pages".

Exemple



Caractéristiques de la page exemple

Le titre général de l'article est délimité par la balise <h1> suivant l'exemple :
<h1>Déclaration des droits de l'homme.</h1>

Tous les blocs sont délimités par les balises de paragraphe <p> suivant l'exemple :
<P>Considérant que la reconnaissance de ....</p>

Les titres des articles sont délimités par la balise <h2> suivant l'exemple  :
<h2 style="page-break-before:always">Article premier</h2>

Feuilles de style appliquée à cet exemple.

Remarques sur la feuille de style

  • Le style media="all" est défini quelque soit le média : écran, impression etc.
  • Le style media="print" donne les directives spécifiques à l'impression :
  • Détermination du format des pages avec les directives @page
  • On empêche qu'une seule ligne se retrouve seule en tête de page avec la directive widows:3 appliquée sur les titres et paragraphes.
  • On change la police et la taille des caractères dans le <body>
  • On supprime l'impression de toutes les images (dans cet exemple) avec la propriété  img {display:none}
  • On affiche la destination des liens avec la directive after{content...
  • On supprime la décoration des liens hypertextes (soulignement, et couleurs)

La numérotation automatique des paragraphes est héritée du style media="all".

  • Le style media="screen" hérite du style media="all" et rajoute des compléments visuels comme la coloration des titres <h2> et le soulignement au survol des liens hypertexte.

Résultats obtenus en fonction des navigateurs


Navigateurs Résultats impression Commentaires
Internet Explorer
Logo pdf

Image avertissement Ne reproduit pas la destination du lien "Consultez ici la déclaration complète des droits de l'homme" dans la directive de style a:after{content:' (Ce lien pointe vers l\'adresse : ' attr(href) ')'

Image avertissement Ne reproduit pas la numérotation automatique des titres <h1> et <h2>
h2:before
  {
  content: counter(c_titre,decimal) ") - " ;
  counter-increment: c_titre;
  }

Image avertissement Ne semble pas tenir compte des lignes veuves avec la directive  h1,h2,p,{widows:3;}

Firefox Mozilla
Logo pdf

Image avertissement Ne semble pas tenir compte des lignes veuves avec la directive  h1,h2,p,{widows:3;}
Opéra / Safari
Logo pdf

Les plus complets

Application au projet de site web

Le but de l'exercice est de pouvoir imprimer (via la commande imprimer du navigateur) uniquement les informations concernant la Boutique du Fleuriste au niveau de la page d'accueil (index.html). Il s'agit en fait de récupérer une partie des informations contenues  dans la fenêtre qui apparaît lors du survol du titre ("Bienvenue sur ...), et de l'imprimer sous forme de carte de visite.

Il faudra pour cela créer une feuille de style externe de type "print" adaptée au résultat que l'on veut obtenir.

Pour obtenir le résultat suivant lorsque l'on demande l'impression de la page web :

Résultat impression

Retrouvez la solution


Respectons la propriété intellectuelle