CSS : feuille de style pour impression

Certains internautes en particulier les plus âgés, veulent souvent imprimer une ou des pages d'un site.
Cette opération ne doit pas se traduire par l'impression d'un nombre élevé de feuilles et une consommation importante d'encre.
Beaucoup de sites proposent une version imprimable de certaines pages sous forme d'un fichier pdf. C'est une solution dépassée car le CSS est désormais capable de gérer une mise en page de qualité en vue de l'impression.
Il suffit désormais de prévoir une feuille de style pour l'impression !

Feuille de style multimédias

Vous pouvez donner à votre feuille de style externe la structure interne suivante : @media all { *{...} body {...} ... } @media screen { *{...} body {...} ... } @media print { *{...} body {...} ... }

On utilise les media queries pour créer des styles conditionnels.

règles de style pour tous les médias : @media all
règles de style qui s'appliquent en cas d'affichage de la page : @media screen
règles de style qui s'appliquent en cas d'impression de la page : @media print

Feuilles de style externes spécialisées

Plutôt que de regrouper toutes les règles de style en une seule feuille on peut créer une feuille de style par média. Donc la page web peut contenir différentes instructions link comme l'exemple ci-dessous :

...
<head>
	<link rel="stylesheet"  href="generale.css" media="all" />
	<link rel="stylesheet"  href="impression.css" media="print" />
	<link rel="stylesheet"  href="ecran.css" media="screen" />
</head>
...

Dans l'exemple ci-dessus il y a des liens vers trois feuille de style externes spécialisées.
Notez le nouvel attribut de la balise link : media. La valeur par défaut de cet attribut est all.

La feuille de style generale.css contiendra les règles de style communes à tous les médias
la feuille de style impression.css va gérer la mise en page en cas d'impression
La feuille de style ecran.css contiendra les règles de style pour affichage écran.

Eventuellement le fichier ecran.css doit gérer les différents types d'écrans (de l'écran d'ordinateur de bureau à l'écran de smartphone). C'est ce qu'on appelle le responsive web design. La technique la plus répandue consiste à utiliser CSS et plus précisément les media queries.
Pour plus d'explications sur un site "responsive" via les media queries : les requêtes de média

Exemple de page liée à une feuille de style multimédias

Le code HTML correspondant

...
<body>
<h1>Premier chapitre</h1>
<h2>Première section du chapitre 1</h2>
<p><img src ="../images/toucan.jpg">Tu autem, Fanni, quod mihi tantum tribui ...
...
<a href ="#">Retour haut de page </a>
<h2>Deuxième section du chapitre 1</h2>
<p><img src ="../images/riviere.jpg">Cum haec taliaque sollicitas ...
...
<a href ="#">Retour haut de page </a>
<h1>Deuxième chapitre</h1>
<h2>Première section du chapitre 2</h2>
<p><img src ="../images/tortue.jpg">Iamque non umbratis fallaciis res agebatur ...
...
<a href ="#">Retour haut de page </a>
<h2>Deuxième section du chapitre 2</h2>
<p><img src ="../images/foret.jpg">Quod cum ita sit, paucae domus studiorum ...
...

Notez les balises H1 et H2, les insertions d'images et les liens hypertextes pour revenir en haut de page ...

La feuille de style correspondante

@media all 
	{
	*{font-family :serif ;}
	h1,h2{text-align : center ; }
	h1{font-size : 150% ; }
	h2{font-size : 120% ; }
	p {text-align : justify; }
	}
@media screen
	{
	*{font-size : 18px ; color : navy ; background : aqua ; 
			margin : 0px ; padding : 0px ; }
	body{width : 900px ; margin : 20px auto 20px auto ; }
	h1 {margin : 20px auto 20px auto ; }
	h2 {margin : 10px auto 10px auto ; }
	img {width : 300px ; float : left ; margin : 10px ; }
	a {display : block ; margin : 10px 0px 10px 0px ; }
	}
@media print
	{
	*{font-size : 14pt ; color : black ; }
	p {widows :3 ; orphans : 3 ; }
	@page {margin : 3cm 2cm 3cm 2cm ;}
	h1 {margin : 0.5cm auto 0.5cm auto ; }
	h2 {margin : 0.2cm auto 0.2cm auto ; }
	img,a {display : none ; }
	table {page-break-inside :avoid; }
		
			/* numérotation automatique des titres h1 et h2 */
	body {counter-reset : niveau1 ; }
	h1 {counter-reset : niveau2 ; }
	h1 {counter-increment: niveau1; }
	h2 {counter-increment: niveau2 ; }
	h1:before {content: counter(niveau1);)
	h2:before {content: counter(niveau1) "." counter(niveau2 ) ". "; }
	}

Analyse première partie

Dans la première partie (@media all) de la feuille de style on trouve toutes les règles communes aux différents médias telles la justification du texte pour les paragraphes, la majoration de taille pour les titres (majoration relative par rapport à la taille de base).

Analyse de la première partie

La deuxième partie contient toutes les règles de style pour l'affichage écran : @media screen
Remarquez que l'on raisonne en pixels ; taille de référence du texte = 18 pixels.
Notez que ce bloc de règles n'est pas "responsive" : pas de test en fonction de la largeur de la fenêtre. Mais, bien sûr il pourrait l'étre.

Analyse de la troisième partie

Dans la troisième partie on retrouve les règles de style pour l'impression : @media print
Notez le sélecteur @page qui signifie "pour toutes les pages".
On ne raisonne plus en pixels (ça n'a aucun sens pour une feuille de papier) mais en pt et en cm.
pt veut dire "point". Il n'est pas inutile de rappeler qu'un pt = 1/72 de pouce et un pouce (in) vaut 2,54 cm. Donc 14pt équivaut à 1/2 cm environ.

Dans le cadre d'une impression les images et les liens sont masqués : img,a {display : none ; }
Ne pas imprimer les images pour économiser l'encre et ne pas imprimer les liens car ça n'a pas de sens dans une version papier.

Dans cette troisième partie il existe une règle étrange.
p {widows :3 ; orphans : 3 ; } : c'est la gestion des veuves et orphelines.
Les utilisateurs chevronnés d'un traitement de textes connaissent cette notion. Dans le cadre d'une impression il faut éviter que seule la dernière ligne d'un paragraphe se retrouve en haut d'une page : veuve (widow).
Il faut aussi éviter que seule la première ligne d'un paragraphe se retrouve en bas d'une page : orpheline (orphan).
Grâce à la règle de style citée il y aura toujours au moins trois lignes de paragraphes en bas ou en haut d'une page.

table {page-break-inside :avoid; } : cette règle de style vise à éviter un saut de page en plein milieu d'un tableau de données.

Attention certaines propriétés CSS relatives aux impressions ne sont pas encore implémentées même par les navigateurs les plus célèbres ...
C'est le cas des propriétés pour gérer les veuves et orphelines en particulier mais aussi pour celle pour éviter un saut de page au sein d'un élément.

Dans la version papier d'une page web il peut être intéressant de numéroter les titres afin de bien indiquer la structure du document.
C'est le cas dans l'exemple avec 6 règles de style pour cette numérotation automatique des titres.
Je n'en dis pas plus dans cette page ; je vous renvoie au chapitre ad hoc.
Chapitre sur la numérotation automatique des titres

Le rendu

Aperçu de la page dans un iframe :

Si vous cliquez sur la commande "imprimer" du navigateur vous obtiendrez un aperçu avant impression et vous constatez alors que la mise en page est différente que sur l'écran : plus d'images ni de liens mais numérotation des titres, gestion des veuves et orphelines.
Utilisez la commande "imprimer..." du navigateur
Vous constatez que le texte sera en noir sur fond blanc, que les images et les liens n'apparaissent pas.

Traduction

Tutoriel CSS - sommaire

Révisions CSS2

Nouveautés CSS3

Nouveautés CSS3 - suite

Transformations, transitions & animations

Tutoriel CSS3 - recherche

L'auteur : Patrick Darcheville