CSS : numéroter automatiquement les titres

Si vous maitrisez 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 3
	...

Bonne nouvelle : c'est désormais possible dans une page Web d'obtenir la numérotation automatique des titres (balises h1 à h6) grâce à CSS. Cette fonctionnalité peut être particulièrement utile pour la version imprimable d'une page c'est à dire dans le cadre de la feuille de style pour impression : Pour une impression 'nickel' d'une page

Le pseudo élément ::before

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 voir dans ce chapitre.

Dans l'exemple ci-dessous les titres commencent toujours soit par la chaine 'chapitre : ", ou la chaine 'section :' selon qu'ils sont balisés Par H1 ou H2.
Or ces chaines n'ont pas été saisies à l'intérieur des balises titres (h1, h2). Par quel miracle le contenu des balises H1 et H2 est modifié ???
Visualisez l'exemple !

Le code de la page (extrait)

Commentaire du code

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.

La numérotation automatique des titres : exemple2

Dans l'exemple précédent je me suis contenté 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 véritable 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

Le code HTML de l'exemple 2

Il est strictement identique à celui du premier exemple.

Le code CSS

	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 éléments 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) ". " ;}

Personnaliser la numérotation automatique : exemple 3

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.

Le code CSS correspondant

	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 l'exemple précédent, à une exception près. l'attribut counter comprend désormais deux paramètres : le nom du compteur suivi du type de numérotation.

Exercice

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