Si vous maitriser l'emploi d'un traitement de textes vous savez que l'on dispose d'une fonctionnalité très intéressante : la numérotation automatique des titres. Par exemple les titres de niveau 1 sont précédés d'un chiffre romain en majuscules (I, II, ...), les titres de niveau 2 sont précédés d'une lettre majuscule (A,B, ...) et les titres de niveau 3 d'un chiffre arabe (1,2,...).
Ou bien vous optez pour la numérotation hiérarchique décimale. Ce qui donne alors :
1-Titre de niveau 1 11-Titre de niveau 2 12 -Titre de niveau 2 2-Titre de niveau 1 21-Titre de niveau 2 22-Titre de niveau 2 221 -Titre de niveau 2 ...
Bonne nouvelle : c'est possible dans une page Web d'obtenir la numérotation automatique des titres (h1 à h6) grâce à CSS. Cette fonctionnalité peut être particulièrement utile pour la version imprimable d'une page c'est à dire dans la feuille de style pour impression.
Pour obtenir la numérotation automatique dans une page web il faut entre autres utiliser le pseudo élément ::before avec la propriété CSS content. C'est ce dont nous allons traiter dans cette page.
Dans l'exemple ci-dessous les titres commencent toujours soit par 'chapitre : 'soit par 'section :' .
Or ces textes n'ont pas été saisis à l'intérieur des balises titres (h1, h2) !
Par quel miracle le contenu des balises H1 et H2 est modifié ???
Visualisez l'exemple !
Tout est dans la feuille de style donc dans le code CSS !
h1::before { content : 'Chapitre : ' ;} : on fait précéder le texte d'une balise H1 du texte : chapitre :
h2::before { content : 'Section : ' ; } : on fait précéder le texte d'une balise H2 du texte : section :
Il existe aussi le pseudo élément ::after qui permet, vous en doutez, d'insérer du texte à la fin.
Dans l'exemple précédent nous nous sommes contentés de faire précéder un titre de niveau 1 de la chaîne "chapitre:" et d'un titre de niveau 2 de la chaîne "section : "
Maintenant nous passons aux choses sérieuses : la numérotation automatique des titres.
Dans ce deuxième exemple de page les titres sont numérotés (numérotation décimale non hiérarchique).
Visualisez la page
Il est strictement identique à celui du premier exemple.
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(niveau2) ". "; }
Il faut donc créer des compteurs : le compteur niveau1 pour numéroter les balises H1 et le compteur niveau2 pour numéroter les balises H2.
Le texte de la balise H1 est précédé du contenu du compteur niveau1 suivi d'un point :
h1:before{content: counter(niveau1) " . " ;}
Le texte de la balise H2 est précédé du contenu du compteur niveau2 suivi d'un point :
h2:before{content: counter(niveau2) ". " ;}
Mais attention il faut aussi programmer l'incrémentation des compteurs (propriété counter-increment) :
- le compteur niveau1 doit être incrémenté pour chaque balise H1 : h1{counter-increment : niveau1 ; }
- le compteur niveau2 doit être incrémenté pour chaque balise H2 : h2{counter-increment : niveau2 ; }
Il faut aussi réinitialiser les compteurs à zéro (propriété counter-reset) :
- le compteur niveau1 doit être initialisé au chargement de la page : body {counter-reset : niveau1 ; }
- le compteur niveau2 doit être initialisé sur chaque balise H1 : h1{counter-reset : niveau2 ; }
Dans la page précédente les balises H1 et H2 étaient précédées d'un nombre. En effet par défaut la numérotation est décimale.
Mais au prix d'une légère adaption du CSS on peut numéroter les titres avec des lettres ou des chiffres romains majuscules ou minuscules.
Numérotation personnalisée
Les titres de niveau 1 (balises H1) sont précédées d'un chiffre romain majuscule ; les titres de niveau 2 (balise H2) sont précédées d'une lettre majuscule.
body {counter-reset : niveau1 ; }
h1 {counter-reset : niveau2 ; }
h1 {counter-increment: niveau1; }
h2 {counter-increment: niveau2 ; }
h1::before {content: counter(niveau1 , upper-roman) " . ";}
h2::before {content: counter(niveau2 , upper-alpha) ". "; }
La feuille de style est identique à celle de la page précédente à une exception près. l'attribut counter comprend désormais deux paramètres : le nom du compteur suivi du type de numérotation.
Seriez vous capable de produire une numérotation décimale hiérarchique du genre : 1.1, 1.2 .... 2.1, 2.2 ... ?
Page avec numérotation hiérarchique des titres
Je vous mets sur la piste. En fait c'est très simple. A partir d'un titre de niveau 2 il faut faire précéder le texte d'une expression
complexe récupérant les valeurs de plusieurs compteurs !
Donc on pourra trouver une règle de style telle : h2:before {content: counter(niveau1) "." counter(niveau2); }
Ce qui veut dire que le texte de la balise H2 (titre de niveau 2) est précédé du contenu du compteur "niveau1" puis d'un point et enfin
du contenu du compteur "niveau2".
Rien ne vous interdit de produire une numérotation hiérarchique avec des chiffres romains ou des lettres. Il suffira alors de rajouter un deuxième argument à l'attribut counter.
Retour menu