Arnulf Sopp – Numerieren ohne Listen in HTML

Das Folgende richtet sich an Webdesigner, die sich mit HTML und CSS zumindest ganz passabel auskennen. Wer seine Website mit einem WYSIWYG-Editor oder gar MS-Word o. dergl. gestaltet hat, kann damit jedoch nichts anfangen. Um nicht missverstanden zu werden: WYSIWYG-Editoren und Word als HTML-Editor haben ihre Daseinsberechtigung, sind aber nicht halb so effizient und erzeugen nicht halb so schlanken Code wie reine HTML- und CSS-Editoren. Viele Optionen bleiben damit unerreichbar, z.B. auch diese:

Für fortlaufende Numerierungen in Websites werden gerne Listen verwendet, <ol> (ordered list, sortierte Liste mit Ordinalzahlen oder -buchstaben) bzw. <ul> (unordered list, unsortierte Liste mit Aufzählungspunkten o.ä.). Das hat jedoch verschiedene Nachteile; z.B. werden alle Absätze nach <ol> oder <ul> eingerückt, was erst umständlich mit einer CSS-Eigenschaft wieder entfernt werden müsste, ebenso wie die Aufzählungszeichen. Außerdem ist

<ol> <li>…</li> <li>…</li> … </ol>

eine räumlich begrenzte Liste, wie sie vielleicht gar nicht gemeint ist. Man möchte evtl. nur Fußnoten oder Kapitel der Seite an beliebigen Stellen durchnumerieren. Es wäre fehlerträchtig, innerhalb dieser Liste viel weiteren HTML-Code unterzubringen, der obendrein nur innerhalb der Liste wirksam wäre.

Das zu umgehen, bietet CSS eine Möglichkeit: counter (Zähler; w3schools.com/css/css_counters.asp). Dort wird erklärt, wie ein Zähler erst mal aufgesetzt, also initialisiert wird. Ist das geschehen, genügt es, an beliebiger Stelle im HTML-Quelltext den Auslöser, im hiesigen Fall <z1></z1>, <z2></z2> oder <z3></z3> beliebig oft einzusetzen. Diese Trigger erhöhen jeweils ihren Zähler um 1 und zeigen ihn dann an.

Der Befehl dazu lautet immer einfach nur <z#></z#>2. Man darf also jederzeit an beliebiger Stelle der HTML-Datei <z#></z#>2 eingeben; die laufenden Nummern sortieren sich dann automatisch neu.

Nachteil: In diesem Text tragen einige Stellen einen Verweis auf eine von nur zwei Fußnoten. Verweise auf dieselbe Fußnote häufen sich also. Die hier beschriebene Technik kann dies nicht lösen. Solche Wiederholungen ein und derselben Zahl müssen dann diskret eingegeben werden. Der Automatismus der Counter-Technik versagt hier.

lfdnr-fussn.htm1 ist die Beipieldatei, die diese Technik veranschaulichen soll.

Die beiden Zähler 1 (braun) und 2 (grün) sind per CSS so designt, dass sie sich zu einem Zähler-Doppel nach dem Muster 4.2, 2.5 o.ä. verknüpfen. Ein zusätzlicher Zähler nach dem Muster 3.1.5 scheint nicht möglich zu sein. Wenn eine solche dritte Listennr. nicht angestoßen wird, weil es keine dritte Ebene gibt, erscheint trotzdem als 3. Ordnungszahl immer die 0, also z.B. 3.1.0, was nach den ungeschriebenen Regeln für wissenschaftliche Texte nicht sein darf.

Zähler 3 (rot) folgt keiner Systematik und geistert an beliebiger Stelle durch den HTML-Code. Er dient hier als Fußnoten-Zähler. Deshalb wird er nach dem Text erneut aufgesetzt, damit die Fußnoten am Seitenende wieder mit 1 beginnen.

Auch was du soeben liest, hat Fußnoten, deren erstes Auftreten jeweils auf dieselbe Weise entstand. Da aber jedes weitere <z#>…<z#>2 die Zahl erhöhen würde, sind Wiederholungen derselben Ordnungszahl auf diese Weise nicht machbar. Man muss hier von Hand die aktuelle Zahl diskret eintragen, wie weiter oben schon dargestellt.

Die Beispieldatei zeigt die Numerierung der Absätze und der Fußnoten. Wie das geht, ist aus dem Quelltext ersichtlich. Er wird mit Strg+U angezeigt. Er enthält zahlreiche Kommentierungen, die hoffentlich die Logik des Procederes verdeutlichen. Dabei sind folgende <style>-Angaben notwendig:

Container für den Zähler, Initialisierung der Zählvariablen:
Zähler {counter-reset: Zählvariable}
Trigger zum Anzeigen der lfd. Nr.:
Anzeige {… (evtl. Style-Eigenschaften)}
Vor der Anzeige Zähler um 1 erhöhen, dann den Inhalt der Anzeige vorgeben – hier nur die lfd. Nr., sonst nichts:
Anzeige::before {counter-increment: Zählvariable; content: counter(Zählvariable)}

Im Textkörper (<body>) Sind zwei Angaben erforderlich:
<Zähler> (Initialisiert den Zähler, worauf die CSS-Angaben bisher nur vorbereitet haben.)
<Anzeige></Anzeige> (Zeigt die aktuelle lfd. Nr. an, die sich mit jeder Wiederholung um 1 erhöht. Dieser Anzeigebefehl heißt in der Beispieldatei lfdnr-fussn.htm1 <z#> </z#>2.)

Warum noch einmal erklären, was schon in w3schools.com/css/css_counters.asp1 steht? Weil dieser Artikel alles andere als selbsterklärend ist und unter diesem Link gewöhnliche HTML-Tags für diese Zwecke verbogen werden, die dann für andere Verwendungen evtl. nicht mehr vollumfänglich zur Verfügung stehen. Die hier vorgestellte Lösung verwendet ausschließlich benutzerdefinierte Tags, die anderweitig keine Verwendung finden. Außerdem ist die schematisierte Benennung der Variablen und ihrer Tags (zaehler# (Zähler), zaehl# (Zählvariable), z# (Anzeige) geeignet, an beliebige andere Namensgebungen angepasst zu werden.

Beim Ausprobieren stellte sich heraus, dass einige gängige Browser fehlertolerant genug sind, um sich zum Hochzählen und Anzeigen eines Zählers mit (z.B.) <z#>2 zufriedenzugeben. Das abschließende </z#>2 kann entfallen. Es wäre jedoch töricht, sich darauf zu verlassen. Es wird empfohlen, immer die Kombination <z#></z#>2 zu verwenden, weil dies mit restlos allen Browsern klappt.

Die Beispieldatei eignet sich gut für einen Download (Rechtsklick auf den Dateinamen, dann Linksklick auf Seite speichern unter …. So kann diese Technik offline belauert und immer wieder befragt werden. Sie ist mit ihren Formatierungen usw. unabhängig von den Vorgaben dieser Website, also auf neudeutsch stand alone oder portable.

Wie auch <ol> und <ul> kann counter nur auf einer Seite bzw. in einer HTML-Datei wirksam sein. Es ist nicht möglich, eine Zählung in einer Nachfolgedatei fortzusetzen: Datei 1 mit Kapitel 1-4, Datei 2 mit Kapitel 5-7, das geht nicht.

Sollte es in sehr seltenen Fällen doch mal erforderlich sein, dann hilft diese Krücke:

<p style="visibility: invisible">  <z#></z#> <z#></z#> </p>

Weiter mit der Beispieldatei lfdnr-fussn.htm1

Laufende Nummern ohne Listen