14) Feuille de style "print" : fonctions avancées

Les feuilles de styles print disposent de quelques fonctions avancées pour permettre d’affiner l’impression de documents. Entête et pied de page, pagination, etc. Voyons ça.

Précédent | 16/16

@page : la taille, les marges

La taille de la page peut être indiquée dans la feuille de style print. On peut le faire sur base de taille en mm et cm, en inches, ou en choisissant un format existant, comme le A4 ou le legal US. Il est aussi possible de définir l’orientation de la page (landscape ou portrait)

@page {
  size: 20cm 10cm;
}

ou

@page {
  size: A4 landscape;
}

On peux aussi définir les marges du documents. Attention, certains navigateurs supplantent ces valeurs par les leurs. Les valeurs peuvent être les traditionnels px ou em, mais on utilise plus volontiers des valeurs en mm ou en cm. On peut aussi placer une, deux ou 4 valeurs.

@page {
  margin: 2cm 1.8cm 2.5cm 1.8cm;
}

Personnaliser la couverture

Il existe une déclaration permettant d’atteindre spécifiquement la couverture.

@page {
  margin: 2cm 1.8cm 2.5cm 1.8cm;
}

@page:first {
 margin: 0;
}

La pseudo-classe "before" et "after" et l’attribut "content"

La pseudo-classe before permet d’ajouter un élément créé en Css avant un élément. Ils ne sont pas spécifiques à la feuille de style print mais sont assez pratiques pour ajouter des informations au moment d’imprimer.

Pour ajouter un texte avant l’élément h2, par exemple, on écrira ceci :

h2:before {
 content: "un texte";
 color: red;
 font-size:2em;
}

On peut donc donner d’autres attributs à cet élément créé, comme une taille, une couleur, un positionnement...

L’attribut content est généralement du texte, mais il peut être aussi une image.

h2:before {
 content: url(img.png);
}

Afficher les adresses des liens avec content

Une page imprimée n’est pas intéractive, mais il est parfois utile d’afficher l’information des liens qu’elle contient. C’est possible grâce à des commandes (qui par ailleurs sont utilisables dans la page web).
La commande ci dessous demande à afficher l’url du lien (stockée dans l’attribut "href") après le lien, si celui-ci commence par "http" (pour éviter les lien internes).

a[href^=http]:after {
  content:" ( lien : " attr(href) ") ";
  font-size:10pt;
}

Utiliser des compteurs dans content

Il est possible d’ajouter des compteurs, toujours avec la pseudo-classe :before et :after. Par exemple pour numéroter les chapitres d’un texte. Ceci peut être fait pour la page web elle-même ou juste pour le print.

On peut par exemple numéroter les éléments h2 d’un texte.

On commencera par déclarer le compteur et le mettre à zéro :

body {
counter-reset: chapitre;
}

Ensuite on utilisera la classe "before" pour ajouter ce chiffre dans la page :

h2:before {
 counter-increment: chapitre;
 content: counter(chapitre) ". ";
 font-size:2em;
}

Ici le chiffre du chapitre est suivi d’un point et d’un espace. Il est en effet possible de mélanger texte (entre guillemet) et variables.
Counter-increment ajoute 1 au compteur, évidemment.