Kapitel Nummerierungen mit CSS – Artikel in Buchform präsentieren oder Sitemaps auszeichnen

Kapitelnummerierung mit CSS einige einfache Beispiele
Bei dieser Kapitelnummerierung wurde mit zwei verschiedenen list-types gearbeitet.

Der Inhalt sollte nummeriert sein wie die Kapitel eines Buches. Das war der Wunsch, mit dem ich dieser Tage wieder einmal konfrontiert war. Das CSS dazu ist seit CSS2 bekannt. Der Browsersupport war nicht immer durchgängig gegeben, wie sooft. Selten gebraucht werden Kapitelnummerierungen, so stelle ich sie hier vor.

Ich habe diesen Artikel hier geteilt: Zuerst bringe ich die absolut schnelle Lösung. Kapitelnummerierungen copy&paste tauglich und minimale Anpassungen an das eigene HTML sind dann noch nötig.
Wer sich mit dieser Kapitel Nummerierung mehr auseinandersetzen mag und schlussendlich auch spielerisch einsetzen mag, den lade ich ein diesen Artikel bis zum Schluss zu lesen.

Doch völlig egal, ob Du copy&paste bevorzugst oder das genauere Wissen, ich freu mich übers Twittern und ein dickes +1 auf alle Fälle. 🙂

Kapitelnummerierung mit CSS

Hier die versprochene copy&paste Lösung. Die HTML Tags und etwaigen CSS Klassen bitte ergänzen.



h4.exampleh { 
counter-reset: section;
}
h5.examplehu { 
counter-reset: subsection; 
}
h5.examplehu::before {
content: counter(section) ". ";
counter-increment: section;
color:#99475f;
font-weight:bold; 
font-size:1.3em;
}
p.examplep::before {
content: counter(section) "." 
         counter(subsection) " ";
counter-increment: subsection;
}

/*fuer Listenpunkte*/
li.exampleli:before{

content: counter(section) "." 
         counter(subsection) " ";
counter-increment: subsection;
color:#99475f;

}




<h4 class="exampleh">Hauptkapitel</h4>
<h5 class="examplehu">Unterkapitel</h5>
<p class="examplep">Pkt eins Unterkapitel 1
</p><p class="examplep">Pkt zwei Unterkapitel 1
</p>

<h5 class="examplehu">Unterkapitel</h5>
<p class="examplep">Pkt eins Unterkapitel 2
</p><p class="examplep">Pkt zwei Unterkapitel 2
</p>

<h5 class="examplehu">Drittes  Unterkapitel mit Listenpunkten ul</h5>
<ul><li class="exampleli">Pkt eins Unterkapitel 3
</li><li class="exampleli">Pkt zwei Unterkapitel 3
</li></ul>

Das sieht dann so aus:

Hauptkapitel

Unterkapitel

Pkt eins Unterkapitel 1

Pkt zwei Unterkapitel 1

Unterkapitel

Pkt eins Unterkapitel 2

Pkt zwei Unterkapitel 2

Drittes Unterkapitel mit Listenpunkten ul
  • Pkt eins Unterkapitel 3
  • Pkt zwei Unterkapitel 3

Wobei ich der Nummerierung bei der ungeordneten Liste ul noch eine Farbe udn größere Schrift mitgab.

CSS kann zählen

Dass eine geordnete Liste ol Nummerierungen anzeigt ist vertraut. CSS kann aber jeden html Tag zählen, wenn man es denn läßt.

Dazu sagt die Spezifikation:

Automatic numbering in CSS 2.1 is controlled with two properties, ‚counter-increment‘ and ‚counter-reset‘. The counters defined by these properties are used with the counter() and counters() functions of the the ‚content‘ property.

w3c

Also mit counter-reset kann ich jedwede interne Nummerierung auf Null stellen. Sinnvollerweise macht man dies beim allerersten Kapitel eines Buches zb, dass man auf der Webseite schreibt. Der Anfang, das Vorwort, der absolute Beginn sollte damit ausgezeichnet werden.

Kapitel ist im techn. Englisch die „section„, ich könnte diesen Counter aber auch „anfang“ nennen.

HTMLtagHauptkapitel{ 
counter-reset: section; 
}

Unterkapitel ist hier die „subsection“ und auch deren Nummerierung wird auf Null gestellt,damit die Kapitelnummerierung auch richtig funktioniert:

HTMLtagUnterkapitel{
counter-reset: subsection;
}

Habe ich die interne Nummerierung der Unterkapitel auf Null gestellt, kann ich nun mit dem Pseudoklasse :before den Inhalt angeben, der angezeigt werden sollte.

Auch hier folgt der Syntax fast dem gesprochenen Wort:
1.1 Unterkapitel eins => bedeutet vom 1.Hauptkapitel den ersten Unterpunkt. Getrennt mit einem Punkt.

Das schreibt sich in CSS so:


HTMLtagUnterkapitel::before {

content: counter(section) ". ";
counter-increment: section;

}


counter-increment wird in der Spezifikation so beschrieben:

The ‚counter-increment‘ property accepts one or more names of counters (identifiers), each one optionally followed by an integer. The integer indicates by how much the counter is incremented for every occurrence of the element. The default increment is 1. Zero and negative integers are allowed.

w3c

Ich könnte also auch -1 angeben oder 0, wenn es denn mal sinnvoll wäre ;).

Ich kann damit aber auch endlose Kapitelnummerierungen erstellen wie 3.4.1.11

Ich kann die CSS counter benennen und designen

Selbstverständlich kann man die Kapitelnummerierung nach eigenem Bedarf darstellen. Die Schriftfarbe ändern, die Schriftart ändern, Aufzählungszeichen verwenden. Der Syntax ist so angegeben:


counter(
name
, 'list-style-type')

Hauptkapitel

Unterkapitel A
  • Pkt 1 des Kapitels A
  • Pkt 2 des Kapitels A
Unterkapitel B
  • Pkt 1 des Kapitels B
  • Pkt 2 des Kapitels B

Das CSS dieser Kapitelnummerierung sieht dann so aus:

h5.examplehh { 
counter-reset: subsection; 
}

h5.examplehh::before{ 
content: counter(section, upper-latin) "   ";
counter-increment: section;
}

.post ul li.examplelili:before{

content: counter(section,upper-latin) " " 
counter(subsection,decimal) " ";
counter-increment: subsection;

}

Wer sich gerne weitereinlesen mag, kann dies hier in der deutschen Übersetzung der W3c Spezifikation gerne tun: Aufzählungen, Nummerierungen.

Ich beantworte gerne Fragen, wenn es welche gibt.

mts

Ebenfalls informativ und lesenswert