Une table des matières parfaite avec HTML CSS

Cet article détaille la construction d'une table des matières robuste et accessible (COT) en utilisant uniquement HTML et CSS, une entreprise étonnamment difficile mais gratifiante. L'objectif était de créer un TOC adapté aux pages Web (avec des liens navigables) et aux médias imprimés (livres, brochures), en gérant gracieusement les titres à plusieurs niveaux.

Construire une table des matières

La structure fondamentale d'un TOC est simple: chaque entrée relie un titre de section à son numéro de page, souvent avec des «leaders» visuels (points, tirets, etc.) les connectant. Bien que facilement généré dans les traitements de texte, ce n'était pas possible étant donné un flux de travail basé sur HTML. La solution nécessitait une approche automatisée compatible HTML, assurant l'accessibilité et la lecture de l'impression.

Les recherches initiales ont révélé des solutions utiles mais incomplètes. "Build a Table of Contents of Your HTML" de Julie Blanc et les lignes de leader TOC réactives de Christoph Grabo avec CSS "ont fourni des informations précieuses sur les techniques de mise en page (givré basé sur le flotteur vs grille CSS), mais non plus parfaitement répondu aux exigences.

Sélection de balisage optimal

La correction sémantique a guidé le choix du balisage. Initialement,<table> et<code><dl></dl> ont été pris en compte, représentant la relation de numéro de page de titre en paires de valeurs clés. Cependant, ceux-ci se sont révélés insuffisants pour les TOC à plusieurs niveaux (chapitres et sous-sections). Imbriqué<dl></dl> Les éléments manquaient de clarté sémantique.

L'approche choisie a exploité une liste ordonnée (<ol></ol> ) - plus approprié qu'une liste non ordonnée (<ul></ul> ) pour la nature séquentielle d'un TOC. La relation de numéro de page de titre a été maintenue en incluant explicitement "page" avant le numéro de page dans chaque élément de liste. Ce simple ajout clarifie le contexte, même sans indices visuels.

Un squelette HTML de base l'illustre:

<ol role="list">
  <li>
    <a href="https://www.php.cn/link/8f646834ef1adefaef52d74d5ea8329d">
      Page 1 du titre du chapitre ou de la sous-section
    </a>
    <ol role="list"></ol>
  </li>
</ol>

Styliser la table des matières

Le style impliquait plusieurs étapes:

1. Supprimer les numéros générés automatiquement: la numérotation manuelle permet des éléments non numérotés (avant-propos, etc.) communs dans les livres.

2. Style de liste: la liste de niveau supérieur utilise padding: 0 pour l'alignement avec les paragraphes. Les listes imbriquées sont en retrait en utilisant padding-inline-start: 2ch (rembourrage basé sur le caractère pour l'indépendance des polices). Surtout, role="list" a été ajouté pour préserver la sémantique de liste dans les navigateurs WebKit lorsque list-style-type: none utilisée.

3. Titre et numéro de page Style: CSS Grid a fourni un alignement supérieur, en particulier pour les titres multi-lignes. Les deux colonnes de la grille ( grid-template-columns: auto max-content ) s'assurent que le titre se développe pour remplir l'espace disponible, tandis que le numéro de page ( text-align: right ) s'aligne à droite. Le texte "page" est visuellement masqué à l'aide d'une classe visually-hidden pour l'accessibilité.

4. Implémentation du leader: la fonction CSS leader() , bien que spécifiée, manque de support du navigateur. La solution, empruntée aux articles précédents, utilise A ::after un pseudo-élément avec une longue chaîne de points. Cependant, cela a été amélioré pour l'accessibilité en enroulant les points dans un élément avec aria-hidden="true" pour empêcher les lecteurs d'écran d'annoncer les points.

5. Touche finale: les éléments de niveau supérieur sont en gras ( font-weight: bold ), et une marge ( margin-block-start: 1em ) sépare les chapitres des sous-sections. font-variant-numeric: tabular-nums ET min-width: 2ch Assurez la largeur cohérente du numéro de page sur différents chiffres pour un alignement de leader approprié.

Le CSS résultant est efficace, flexible et accessible et accommodant les sous-sections imbriquées sans modification. La solution est tout aussi efficace pour la navigation Web et la sortie d'impression. Le crédit est accordé à Julie Blanc, Christoph Grabo et Sara Soueidan pour leurs contributions et leurs idées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!