Feuille de style "print" - Styles de base

Une feuille de style print peut être assez basique. Elle peut uniquement compléter le graphisme fait pour l’écran, en adaptant à l’usage et aux limitations spécifiques du papier.

Précédent | 11/12 | Suivant

Cette page se base sur la deuxième méthode évoquée dans la première partie de ce didacticiel : ajouter des style print à une css existante pour une page web.

Nettoyer la page

Lorsqu’une page web est imprimée, elle quitte son environnement hypertexte pour devenir un contenu isolé. Elle cesse aussi d’être intéractive. Plus de clic, plus de mouse over. Plus d’arborescence et de navigation. De ce fait, une série d’informations vitales du site deviennent inutiles.
Le premier travail de la feuille de style print va être de nettoyer la page de ces informations inutiles.

Typiquement, une page web contient un header (contenant le titre du site sous forme de texte ou logo et une navigation), un contenu principal et un footer. La plupart du temps, la feuille de style va simplement les faire disparaitre de l’impression papier.

On déclare donc dans la css des déclarations qui s’appliqueront uniquement aux imprimantes :

@media print {
/* ici à l'intérieur, le code css spécifique à l'imprimante */

  header, sidebar, footer {
  display:none;
  }
}

On va ensuite normaliser une série de comportements visuels : le fond sera blanc, le texte noir, on supprime tout box-shadow et text-shadow (les ombres portées).

* {
       background: transparent !important;
       color: #000 !important; /* Black prints faster: h5bp.com/s */
       box-shadow: none !important;
       text-shadow: none !important;
   }

Comportement spécifique au média papier

Une page web longue se scrolle. On ne scrolle pas du papier, on imprime plusieurs pages. Ceci produit des problèmes spécifiques. Un des plus connus des graphistes est la veuve, nom donné à une ligne en fin de paragraphe qui se retrouve en haut de la page suivante, seuls, ce qui est inélégant. Un autre est l’orphelin, nom donné aux premières lignes d’un paragraphe qui commence en bas d’une page. Là aussi, il est considéré comme inélégant de voir juste deux lignes d’un paragraphe, isolées en bas d’une page.
Il existe heureusement des commandes CSS, widows et orphans qui permet de choisir le nombre de lignes minimal se retrouvant isolé sur une page. Généralement, 3 lignes sont acceptées.

p, h2, h3 {
       orphans: 3;
       widows: 3;
   }

Certains types de contenus ne doivent pas être coupés. Typiquement, il faut éviter qu’une image ne soit coupée en deux par un changement de page. On placera donc une commande explicite à ce sujet. Dans certains cas, on évite aussi de couper dans les tables, sauf si elles sont tellement longues que c’est inévitable.
On utilise pour ça la commande page-break-inside

   img, tr {
       page-break-inside: avoid;
   }

Dans le même ordre d’idée, on va éviter le saut de page juste après un titre. Là, c’est la commande page-break-after qui sera employée :

   h1,h2,h3,h4 {
       page-break-after: avoid;
   }

page-break-before, page-break-inside et page-break-after peuvent être associée à n’importe quel sélecteur avec les valeurs auto|always|avoid|left|right|initial|inherit

Ces déclarations représentent la forme la plus simple de css print, et la plus courante dans le css proposées sur le net. Mais il est possible d’aller plus loin dans la mise en page, et de personnaliser polices, couleurs, marges, etc.