Maîtriser l’impression CSS

  • Profil : Débutant
  • Technologie : CSS
  • Thème : Mise en page
  • Auteur : Nicolas Hoffmann
  • Mise à jour : 26/09/2010

En bref

Les feuilles de style destinées à l’impression (CSS print) sont un moyen économique de proposer une version imprimable de vos documents en ligne, mais elles ne produisent pas toujours le résultat escompté. Voici un inventaire des soucis les plus fréquents, accompagné de quelques conseils qui vous permettront de mieux gérer ces difficultés.

Proposer une version imprimable reposant uniquement sur une feuille de style pour le media print appliquée à la page affichée par le navigateur offre plusieurs avantages immédiats :

On rencontre cependant deux sortes de difficultés :

En fait, l’utilisation des styles print se heurte à deux écueils : les CSS ont certaines limites intrinsèques issues de leurs principes de conception, mais aussi d’autres limites liées aux implémentations.

D’une part, contrairement au monde de l’imprimerie, il est impossible pour l’auteur d’un site Web de contrôler totalement un rendu Web, quelque soit le media : d’une manière générale, le rôle des CSS est de ménager une large part de contrôle final par l’utilisateur, et non de donner tout pouvoir à l’auteur du site. C’est notamment le cas quand les styles sont utilisés pour l’impression d’une page via le navigateur : la configuration de ce dernier joue un rôle essentiel, et l’emporte systématiquement sur ce que l’auteur a décidé.

D’autre part, les navigateurs actuels ne prennent pas en compte la totalité des propriétés théoriques d’impression, celles-ci ayant été définies initialement de manière très, ou trop, ambitieuse par CSS2. Entre les documentations en ligne les plus courantes sur les possibilités offertes par les CSS print et leur usage réel, il y a donc plusieurs limites à connaître.

Le plus souvent, il s’agit donc de favoriser une impression de bonne qualité sans tenter de la contrôler au pixel près. Parfois, un usage plus précis des styles d’impression peut être pertinent, selon le contexte où est imprimé du document.

Les problèmes d’impression peuvent être classés en deux catégories :

Ce qui dépend de la configuration du navigateur

Les couleurs et fonds d’écran

Supposons que la lisibilité de votre page repose sur la présence d’une couleur d’arrière-plan défini dans une CSS. Par défaut, ce jeu de couleurs n’apparait pas quand l’utilisateur demande un aperçu avant impression ou une simple impression. Le résultat peut donc être une sérieuse perte d’information, comme l’illustre l’exemple ci-après, où une mise en couleur CSS véhicule une information (la couleur des maillots) :

Dans cet article de Wikipédia, CSS est utilisée pour créer la couleur des maillots de joueurs : le résultat imprimé est fréquemment un maillot blanc.

Cela est dû à la configuration par défaut du navigateur : pour éviter une surconsommation d’encre, les couleurs et images CSS ne seront prises en compte que si l’utilisateur prend l’initiative de modifier l’option correspondante, comme dans l’exemple ci-dessous (Safari).

Configuration de l’impression sous Safari : le navigateur propose l’option 'Imprimer l’arrière-plan'

Dans tous les cas, il faut concevoir le contenu et les styles d’impression en sachant que les images et les couleurs de fond ne seront a priori pas prises en compte. Pour prendre un exemple classique, le logo du site doit être inclus dans le code HTML sous forme d’une image (élément IMG) et non d’un arrière-plan CSS. De plus, il faut garder à l’esprit que l’internaute peut également décider d’imprimer en niveaux de gris... même si l’option d’arrière-plan est cochée.

D’une manière générale, le détournement des images de background CSS pour insérer un contenu, quelque soit la technique utilisée, est à proscrire pour des raisons d’accessibilité et d’interopérabilité du contenu : CSS n’est fondamentalement pas destiné à produire du contenu, mais uniquement à l’habiller.

Les informations de la page

Le contenu des en-têtes et pieds de page sont déterminés par le navigateur de manière totalement autonome. Ce contenu est variable selon les navigateurs, comme l’illustre l’exemple de Firefox ci-dessous :

Configuration de l’impression sous Firefox : le navigateur propose des options avancées pour le contenu des en-têtes et pieds de page

Il n’est pas possible d’agir côté auteur sur l’impression de ces informations : le choix est donc entièrement laissé à l’utilisateur.

Dans l’hypothèse où celui-ci n’aurait pas configuré son navigateur comme attendu, faut-il alors utiliser CSS print pour forcer l’impression de certains de ces contenus ?

Les marges de page

Les marges par défaut sont également déterminées par le navigateur et, le cas échéant, l’utilisateur peut avoir modifié ces propriétés.

Les propriétés CSS permettent très logiquement de paramétrer les marges de votre document, mais en aucun cas ne peuvent outrepasser ces valeurs par défaut, le choix final est laissé à l’utilisateur. C’est le cas notamment dans Internet Explorer, comme l’illustre l’exemple ci-dessous, où une marge latérale de 5cm fixée par la feuille de style est modifiée par l’utilisateur via l’aperçu avant impression :

L'aperçu avant impression d'Internet Explorer offre des contrôles permettant de déplacer librement les marges du document.

Ce qui dépend des implémentations dans les navigateurs

La spécification CSS 2.1, qui correspond aux principales implémentations actuelles, comporte moins de propriétés pour les médias paginés (tel que l’impression) que la recommandation CSS 2.0. La raison en est simple : comme certaines propriétés CSS2.0 n’ont été que très peu ou pas implémentées, il a été décidé de ne conserver ce qui était suffisamment pris en compte.

CSS 2.1 étant donc plus restreint que CSS2.0, on pourra être sûr qu’un document respectant cette future recommandation aura plus de chances d’être mieux rendu.

La mise en page (paysage, portrait)

Un paramètre CSS permet en principe d’indiquer l’orientation de la page :

- @page { size: portrait; } ; /** portrait **/
- @page { size: landscape; } ; /** paysage **/

Mais la très grande majorité des navigateurs ne le prennent pas en compte. Opéra semble être un des rares navigateurs à l’implémenter.

Les sauts de page

Les propriétés page-break-after et page-break-before, bien qu’implémentées sur bon nombre de navigateurs, peuvent avoir parfois des résultats hasardeux. Il faut avoir à l’esprit que cette recommandation vise à favoriser une impression, mais c’est bien le navigateur qui décide s’il doit y avoir ou non un saut de page. De plus l’agent utilisateur peut avoir défini des styles utilisateurs différents de ceux de votre page (exemple : une taille de fonte plus grande, etc.), on comprend aisément pourquoi on ne peut que favoriser une impression et non la contrôler totalement.

Les coupures de page, les lignes veuves et orphelines

La propriété page-break-inside: avoid; qui donc incite le navigateur à éviter de couper un élément en deux n’est supportée que par Opéra. Idem pour la propriété widows, qui permet d’éviter les lignes veuves en début de page, ainsi que la propriété orphans, qui permet d’éviter les lignes orphelines en fin de page : seul Opéra les implémente.

Les repères de coupes

La propriété marks permettait d’ajouter des repères de coupe sur votre page (ex : des pointillés pour découper une invitation de 5 x 5 cm). Elle a été abandonnée dans la future recommandation CSS 2.1, faute d’implémentation des navigateurs : aucun navigateur ne la supporte !

Les pages nommées

Il était prévu de pouvoir utiliser un type de page propre à un élément identifié, ce qui aurait permis de donner des propriétés spécifiques à certaines pages :

    @page paysage { size:landscape; }
    div.resume { page:paysage ; /* et autres propriétés CSS de la classe resume */ }

Dans cet exemple, toutes les div class="resume" devraient utiliser une orientation en paysage, même si toutes les autres pages sont en portrait.

La phrase est volontairement au conditionnel, car cette propriété n’est implémentée sur aucun navigateur ! A l’instar de marks, elle a été abandonnée dans la future spécification CSS 2.1.

Propriétés pouvant causer des problèmes

Attention à l’utilisation de la propriété overflow: auto; et aux positionnements fixes ou absolus, ils occasionnent des bugs particulièrement pénibles et incompréhensibles (pages tronquées, impression multi-pages hasardeuses, etc.), c’est à éviter autant que possible : utilisez le flux normal de votre document.

Les éléments flottants très longs (plusieurs pages) peuvent également être tronqués, plusieurs navigateurs ont du mal à les gérer. La solution est d’utiliser les positionnements flottants avec parcimonie... ou plus radical, de vous passer de positionnements flottants sur les longs éléments via float:none;.

Sous Internet Explorer (version 8 comprise), les balises HTML5 non encore implémentées comme header, même si elles sont créées dans le DOM et sont correctement affichées pour le média screen, ne prendront tout simplement pas en compte les propriétés destinées au média print. Inutile donc de chercher à les styler directement, il faut passer par Javascript pour que la CSS print soit prise en compte pour ces nouvelles balises : IE Print Protector.

Principe de conception

Il faut surtout bien concevoir son document : la version imprimable via CSS print tire son potentiel de votre structure de document (cacher un conteneur, afficher telle partie à tel endroit, l’ordre naturel de votre structure, etc.), donc ayez à l’esprit les parties qui vont foncièrement changer de positionnement (ou disparaître) du média screen au media print, et identifiez-les correctement dans votre structure, ce qui vous permettra de les positionner à votre guise. Attention néanmoins à ne pas surcharger excessivement votre structure d’attributs div et class.

Après, ce sont surtout de la logique et du bon sens... en voici quelques exemples :

Des réponses variées selon les contextes

Version HTML, CSS ou PDF ?

Les possibilités concrètes, les principes de fonctionnement et les limites de l’impression réglée via CSS étant à présent plus clairs, il peut être utile de revenir sur les choix fondamentaux pour la diffusion de contenu sur ce media.

Classiquement, trois techniques se présentent :

Le choix entre ces techniques n’est pas forcément exclusif, une version HTML spécifiquement destinée à l’impression peut être extraite automatiquement depuis le contenu... et utiliser également les propriétés des CSS print !

Ce choix peut également dépendre de contraintes telles que :

Si on cherche à obtenir une impression parfaitement contrôlée d’un document, on se tournera plutôt vers une version PDF. La version HTML spécifiquement destinée à l’impression sera moins précise qu’une version PDF, mais elle permettra en théorie un contrôle plus pointu qu’une simple CSS print.

Environnement maîtrisé ou Web ouvert ?

Dans le cadre d’un environnement maîtrisé du type intranet, les navigateurs utilisés sont connus et une configuration précise peut être attendue des utilisateurs. Les possibilités d’utilisation des CSS print sont alors plus étendues :

Les tests sont donc moins nombreux et l’usage des propriétés CSS peut être plus spécifique et plus pointu.

Avec ou sans l’interface Web ?

L’une des alternatives fréquentes oppose l’impression de la page telle qu’elle est affichée à une impression limitée au contenu, débarrassée des éléments propres à la consultation à l’écran (en-tête de page, menus de navigation, pieds de pages).

Il n’y a pas de règle absolue en la matière, ce n’est qu’un choix propre à la conception du site :

Quoi qu’il en soit, le débat reste ouvert.

Concernant l’impression du style des liens, on peut se dire légitimement que le concept des liens n’a pas de sens sur une version papier. Néanmoins, le débat n’est pas pour autant clos : supposons que l’internaute, dans un souci d’économie de papier, choisisse d’imprimer la page... dans un fichier PDF. Garder les liens peut être utile dans ce cas !

On peut également se tourner vers une solution hybride via :

a:after {
    content: " (" attr(href) ") ";
}

Ce qui ajoutera l’URL après le lien dans la version imprimable.

Des mécanismes à retenir

Opéra et Internet Explorer proposent des mécanismes d’adaptation des pages pour l’impression. Par exemple, ce dernier propose à l’utilisateur d’ajuster la taille de la fonte dans l’aperçu avant impression. Si ces mécanismes sont plutôt pratiques pour l’utilisateur, ils doivent convaincre une fois de plus le concepteur de la version imprimable de lâcher prise sur le contrôle de l’impression.

Conclusion

Mettre à disposition de vos visiteurs une déclinaison immédiatement imprimable de vos page Web est aujourd’hui une bonne pratique de qualité Web.

C’est un constat pragmatique : il n’y a pas de solution toute faite, mais plusieurs possibilités offertes, sachant que ces approches peuvent se compléter mutuellement. Il est tout à fait possible de favoriser une impression très correcte, mais à l’instar de lâcher prise sur votre design, on ne la contrôle pas au pixel près :

Gageons en tout cas que le support de nouvelles propriétés n’est qu’une question de temps, cela ne peut que s’améliorer ! A quand l’équivalent d’un test Acid pour l’impression par exemple ?

Références et compléments :

Une question, une remarque ? Écrivez à l'auteur.

3 Messages de forum

Répondre à cet article

Page valide XHTML 1 Strict, CSS2 et accessible AA.
Ce site s'affiche mieux dans un navigateur conforme aux standards, voici pourquoi.
Site hébergé par yterium (depuis 2010) et par l'APINC (2002-2010) . Propulsé par SPIP.