CSS : Numéroter automatiquement les titres

Si vous maîtriser 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 désormais possible dans une page web d'obtenir la numérotation automatique des titres (h1 à h6) grâce au CSS dans sa version 3 !
Cette fonctionnalité peut être très utile pour la version imprimable d'une page c'est à dire dans la feuille de style pour impression.

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 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 !

Le code de la page (extrait)

... <style> h1::before {content : 'Chapitre : ' ;} h2::before {content : 'Section : ' ; } ... <h1>définitions</h1> <h2>première définition</h2> <p>Eo adducta re per ... <h2>deuxième définition</h2> <p>Eo adducta re ... <h1>classement</h1> <h2>selon le secteur d'activité</h2> <p>Eo adducta ... <h2>selon la taille</h2> <p>Eo adducta re per Isauriam, ... ...

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 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

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 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 ; }

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 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.

Atelier

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