Ein perfektes Inhaltsverzeichnis mit HTML -CSS

In diesem Artikel wird beschrieben, dass ein robustes und zugängliches Inhaltsverzeichnis (TOC) nur mit HTML und CSS erstellt wird, ein überraschend herausfordernder und dennoch lohnendes Unterfangen. Ziel war es, ein TOC zu erstellen, das für beide Webseiten (mit navigierbaren Links) und Printmedien (Bücher, Broschüren) geeignet ist und Multi-Level-Überschriften anmutig bearbeitet.

Inhaltsverzeichnis erstellen

Eine grundlegende Struktur eines TOC ist einfach: Jeder Eintrag verbindet einen Abschnittstitel mit seiner Seitenzahl, häufig mit visuellen "Führungskräften" (Punkte, Striche usw.), die diese verbinden. Während dies in Textverarbeitungsprodukten leicht generiert wurde, war dies angesichts eines HTML-basierten Workflows nicht möglich. Die Lösung erforderte einen automatisierten HTML-kompatiblen Ansatz, der Zugänglichkeit und Druckreadiness gewährleistet.

Erste Untersuchungen ergaben hilfreiche, aber unvollständige Lösungen. Julie Blancs "Erstellen Sie ein Inhaltsverzeichnis aus Ihrem HTML" und Christoph Grabos "Responsive TOC-Leitlinien mit CSS" lieferten wertvolle Einblicke in Layout-Techniken (Float-basiertes gegen CSS-Grid), aber auch nicht die Anforderungen.

Optimale Auswahl der Markup

Semantische Korrektheit leitete die Markup -Auswahl. Anfänglich,<table> Und<code><dl></dl> wurden in Betracht gezogen, die die Beziehung zwischen Titel und Page als Schlüsselwertpaare darstellen. Diese erwiesen sich jedoch für mehrstufige TOCs (Kapitel und Unterabschnitte) nicht aus. Verschachtelt<dl></dl> In den Elementen fehlte die semantische Klarheit.

Der gewählte Ansatz nutzte eine geordnete Liste (<ol></ol> ) - Angemessener als eine ungeordnete Liste (<ul></ul> ) für die sequentielle Natur eines TOC. Die Beziehung zwischen Titel und Page wurde durch explizit "Seite" vor der Seitennummer in jedem Listenelement aufgenommen. Diese einfache Addition verdeutlicht den Kontext auch ohne visuelle Hinweise.

Ein grundlegendes HTML -Skelett zeigt Folgendes:

<ol role="list">
  <li>
    <a href="https://www.php.cn/link/8f646834ef1adefaef52d74d5ea8329d">
      Kapitel oder Unterabschnittstitel Seite 1
    </a>
    <ol role="list"></ol>
  </li>
</ol>

Das Inhaltsverzeichnis stylen

Das Styling umfasste mehrere Schritte:

1. Entfernen von automatisch generierten Zahlen: Manuelle Nummerierung ermöglicht nicht nummerierte Elemente (Vorstärke usw.), die in Büchern gemeinsam sind.

2. Listenstyling: Die Liste der obersten Ebene verwendet padding: 0 für die Ausrichtung auf Absätze. Verschachtelte Listen werden unter Verwendung von padding-inline-start: 2ch (charakterbreitbasierte Polsterung für die Unabhängigkeit der Schriftart) eingerückt. Entscheidend ist, dass role="list" hinzugefügt wurde, um die List-Semantik in Webkit-Browsern zu erhalten, wenn list-style-type: none wird verwendet.

3. Titel- und Seitennummernstyling: CSS-Netz lieferte eine überlegene Ausrichtung, insbesondere für Multi-Line-Titel. Die beiden Spalten des Gitters ( grid-template-columns: auto max-content ) stellen sicher, dass der Titel erweitert wird, um den verfügbaren Speicherplatz zu füllen, während die Seitennummer ( text-align: right ) nach rechts ausgerichtet ist. Der Text "Seite" wird visuell mit einer visually-hidden Klasse zur Zugänglichkeit versteckt.

4. LEASTER -Implementierung: Die leader() CSS -Funktion, obwohl angegeben, fehlt der Browserunterstützung. Die Lösung, die aus früheren Artikeln entlehnt wurde, verwendet a ::after pseudoelement mit einer langen Reihe von Punkten. Dies wurde jedoch für die Zugänglichkeit verbessert, indem die Punkte in ein Element mit aria-hidden="true" gewickelt wurden, um zu verhindern, dass Bildschirmleser die Punkte ankündigen.

5. Schliff beenden: Die Elemente der obersten Ebene sind fett gedruckt ( font-weight: bold ) und ein Rand ( margin-block-start: 1em ) trennt Kapitel von Unterabschnitten. font-variant-numeric: tabular-nums und min-width: 2ch stellen eine konsistente Seitenzahlenbreite über verschiedene Ziffern für die ordnungsgemäße Anführungsausrichtung sicher.

Das resultierende CSS ist effizient, flexibel und zugänglich und berücksichtigt verschachtelte Unterabschnitte ohne Änderung. Die Lösung ist für Webnavigation und Druckausgabe gleichermaßen effektiv. Julie Blanc, Christoph Grabo und Sara Soueidan für ihre Beiträge und Erkenntnisse erteilt.

Das obige ist der detaillierte Inhalt vonEin perfektes Inhaltsverzeichnis mit HTML -CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!