CSS/@-Regeln/@counter-style

Die @counter-style-Regel bietet die Möglichkeit, CSS Counter in unterschiedlichen Stilen zu deklarieren. Die für list-style-type aufgeführten Stile werden damit zu Werten eines allgemeinen CSS Datentyps <list-style-type>, für den sich jederzeit neue Ausprägungen mittels @counter-style definieren lassen.

Das W3C hat eine umfangreiche Liste erstellt, in der die @counter-style-Definitionen etlicher vordefinierter Listenstile sowie auch weitere Listenstile zu finden sind.

Syntax

  @counter-style counter-style-name {
     system: system-name;
     symbols: symbol symbol symbol ... ;
     additive-symbols: wert symbol, wert symbol, ... ;
     range: wertebereich;
     negative: symbol symbol;
     pad: ganzzahl symbol;
     prefix: symbol;
     suffix: symbol;
     fallback: ersatz-stil;
     speak-as: sprachstil;
  }

Der counter-style-name ist ein selbstdefinierter Name für den Counter-Stil. Die Stile der klassischen CSS 2.1 Listenstile (decimal, disc, square, circle), für das <details>-Element (disclosure-open, disclosure-closed) und none sind allerdings gegen Überschreiben geschützt und als Name eines Counter-Stils verboten. Im Übrigen gelten die Regeln für selbstdefinierte Namen in CSS.

Da es diverse Möglichkeiten gibt, Zähler darzustellen, und die menschlichen Kulturen sehr kreativ darin waren, sich Schreibweisen für Zahlen auszudenken, ist die Definition eines Counter-Stils eine komplexe Sache.

Stilsysteme

Mit dem Deskriptor system legen Sie das zu nutzende Stilsystem fest. Es gibt 6 Stilsysteme sowie die Möglichkeit, Vererbungshierarchien zu erstellen. Alle Stilsysteme benötigen einen Satz an Ziffernsymbolen, deswegen ist der Deskriptor symbols oder additive-symbols Pflicht.

Verfügbare Stilsysteme

cyclic

Der Zähler durchläuft die unter symbols aufgelisteten Symbole, der Zählerwert 1 entspricht dabei dem ersten Symbol. Nach dem letzten Symbol beginnt er wieder von vorn. Ein vordefinierter Stil wie disc ist ein cyclic-Stil mit einem einzigen Symbol.

cyclic benötigt einen symbols-Deskriptor mit mindestens einem Symbol.

Mit cyclic können auch negative Zählerwerte dargestellt werden. Das Durchlaufen der Symbolliste wird dabei so begonnen, dass mit Zählerstand 1 wieder das erste Symbol erreicht wird.

fixed

Der Zähler durchläuft die unter symbols aufgelisteten Symbole. Nach dem letzten Symbol beginnt er nicht wieder von vorn. Statt dessen setzt CSS die Counter-Formatierung mit dem Fallback-Stil fort. Diesen können Sie entweder explizit über den fallback-Deskriptor festlegen oder CSS verwendet decimal als Standard-Fallback.

fixed benötigt einen symbols-Deskriptor mit mindestens einem Symbol.

Wenn Sie N Symbole auflisten, dann kann der fixed-Stil nur die Zählerwerte von 1 bis N darstellen.

fixed item

Sie können den fixed-Stil durch eine Ganzzahl erweitern. Diese Ganzzahl legt den Zählerwert fest, für den das erste Symbol in der Symbolliste dargestellt werden soll. fixed 3 würde also in einer Liste die ersten beiden List-Items mit dem Fallback-Stil nummerieren und ab dem dritten List-Item die Symbole des Counter-Stils verwenden.

symbolic

Ähnlich wie cyclic. Aber im zweiten Symboldurchlauf wird jedes Symbol zweimal dargestellt, im dritten Symboldurchlauf dreimal, und so weiter.

symbolic benötigt einen symbols-Deskriptor mit mindestens einem Symbol und kann nur positive Zählerwerte darstellen.

numeric

Der numeric-Stil formatiert einen Zähler als Zahl gemäß den Regeln eines Stellenwertsystems. Das erste unter symbols angegebene Symbol steht für die Ziffer 0, das zweite für die Ziffer 1, und so weiter. Die Anzahl der Symbole legt die Basis des verwendeten Zahlensystems fest, Sie können also problemlos Zählerdarstellungen basierend auf dem Binärsystem, Oktalsystem, Hexadezimal-System oder – wenn Ihnen danach ist – dem sumerischen Sexagesimalsystem (Basis 60) erstellen.

numeric benötigt einen symbols-Deskriptor mit mindestens zwei Symbolen.

alphabetic

Der alphabetic-Stil ist mit dem numeric-Stil fast identisch, mit dem Unterschied, dass es kein Symbol für 0 gibt. Wenn Sie die Symbole 'a', 'b' und 'c' festlegen, würde wie folgt nummeriert: 'a', 'b', 'c', 'aa', 'ab', 'ac', 'ba', ..., 'cc', 'aaa', 'aab', und so weiter.

alphabetic benötigt einen symbols-Deskriptor mit mindestens zwei Symbolen und kann nur positive Zählerwerte darstellen.

additive

Mit dem additive-Stil können Sie mit römischen Zahlen oder anderen additiven Zahlensysteme nummerieren. Für diesen Stil müssen Sie an Stelle des symbols-Deskriptors den additive-symbols-Deskriptor nutzen, mit dem man für jedes Symbol seinen Zahlenwert angegben kann. Auf den additive-Stil gehen wir in einem eigenene Abschnitt ein.

additive benötigt einen additive-symbols-Deskriptor mit mindestens einem Symbol und kann nur positive Zählerwerte darstellen. Die Spec sagt zwar, dass auch 0 ginge, das implementieren die Browser aber nicht.

extends vorlage

Mit extends können Sie einen vordefinierten Stil, oder einen anderen benutzerdefinierten Stil, anpassen. Das geschieht dadurch, dass Sie die Deskriptoren, für die Sie einen anderen Wert wünschen, im extends-Stil angeben. Die übrigen Deskriptoren werden vom Vorlagenstil übernommen.

Symbole

Die Deskriptoren symbols bzw. additive-symbols definieren den Zeichenvorrat des Zählers. Welchen Deskriptor Sie benötigen, ist bei den Stilen aufgeführt.

Der symbols-Deskriptor erwartet eine durch Leerzeichen getrennte Liste von Symbolen. Jedes einzelne Symbol kann eine Zeichenkette, ein CSS-Name oder ein Bild sein. Die Möglichkeit, CSS-Namen anzugeben, bedeutet lediglich, dass Sie für Zeichenketten, die einen gültigen CSS-Namen bilden, auf die Anführungszeichen verzichten können. Die Möglichkeit, ein Bild anzugeben, ist zur Zeit (Januar 2024) in keinem Browser implementiert und die Spezifikation bezeichnet diese Möglichkeit deswegen als "at risk". Die Angabe eines Bildes würde bedeuten, mittels url() eine externe Grafik zu laden, oder sogar einen CSS-Farbverlauf zu verwenden.

Beispiel

Zyklische Darstellung mit symbols

@counter-style emoji {
   system: cyclic;
   symbols: '😀' '😐' '😕' '😖';
}

Eine Liste mit list-style-type: emoji würde nun die ersten vier Listenpunkte der Reihe nach mit diesen 4 Emojis versehen und ab Punkt 5 wieder mit 😀 beginnen.

Additive Symbole

Der additive-symbols erwartet eine nach Wert absteigend sortierte Liste aus Wert-Symbol Paaren. Jedes Paar besteht aus einem ganzzahligen, positiven Wert sowie einem Symbol (wie in symbols). Die Reihenfolge von Wert und Symbol ist beliebig. Die Paare werden voneinander durch Kommas getrennt.

Beispiel

Römische Zahlen mit additive-symbols

@counter-style roman {
   system: additive;
   additive-symbols: 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;
}

Das Verfahren, einen Zählerwert mit diesem Counter-Stil auszugeben, können Sie sich so vorstellen:

1. Z sei eine Variable, initialisiere sie mit dem aktuellen Zählerstand
2. C sei eine Variable, initialisiere sie auf eine leere Zeichenkette
3. S sei das erste Symbol in der Liste
4. Solange Symbole in der Liste sind, wiederhole:
   1. Solange Z größer oder gleich dem Symbolwert von S ist, wiederhole:
      • hänge das Symbol in S an den Inhalt von C an
      • subtrahiere den Symbolwert in S von Z
   2. setze S auf das nächste Symbol in der Liste
5. Ist Z nun gleich 0, gib C aus. Andernfalls formatiere den Zählerstand mit dem Fallback-Stil.

Der im letzten Schritt genannte Sonderfall kann vorkommen, wenn es kein Symbol für den Wert 1 gibt.

Weitere Stildeskriptoren

negative

Der negative-Deskriptor legt die Darstellung negativer Zahlen fest. Er erwartet ein oder zwei Symbole, die vor und hinter dem Zählerwert ausgegeben werden. Das zweite Symbol ist optional, sein Standardwert ist eine leere Zeichenkette.

Syntax

  negative: symbol;
  negative: symbol symbol;

Standardwert ist '-'.

pad

Mit pad können Sie festlegen, dass ein Zählerwert bis zu einer Mindestlänge mit Füllzeichen verlängert wird. Diese Füllzeichen werden dem Zählerwert vorangestellt. Ist der Zählerwert so lang wie der Mindestwert, oder länger, wird nichts aufgefüllt.

Syntax

  pad: wert symbol;

Die Reihenfolge von Wert und Symbol ist beliebig. Bei wert muss es sich um eine Ganzzahl handeln, die nicht negativ sein darf. Das symbol kann rein theoretisch beliebig lang sein, aber die Spezifikation empfiehlt dringend, nur einzelne Zeichen zu verwenden, weil sie keinen vernünftigen Weg gefunden haben, Füllsymbole aus mehreren Zeichen so zu verwenden, dass das Ergebnis immer die durch wert vorgegebene Länge hat. Deswegen zählt CSS die Anzahl der Glyphen (genauer: Graphem-Cluster), aus denen der Zählerwert besteht, bestimmt die Differenz als wert und dieser Anzahl und setzt symbol so oft davor, wie die Differenz angibt. Das bedeutet: Wenn ein Padding auf 5 Zeichen gewünscht ist und ein Zählerstand wie 123 vorliegt, würde ein symbol Wert von 'xy' dazu führen, dass am Ende 'xyxy123' ausgegeben wird.

range

Mit Hilfe des range-Deskriptors können Sie den Zahlenbereich, in dem ein Counter-Stil angewendet wird, eingrenzen. Damit können Sie beispielsweise festlegen, dass Sie die Werte von 1-50 als römische Zahlen darstellen wollen, höhere Werte aber lieber durch einen anderen Stil darstellen möchten.

Syntax

   range: auto;
   range: von bis, von bis, ...;

auto ist der Standardwert für range und legt den Zahlenbereich entsprechend der im Abschnitt Verfügbare Stilsysteme genannten Bereiche fest.

Die Alternative zu auto ist eine durch Komma getrennte Liste aus einem oder mehreren Zahlenpaaren. Sie beschreiben die Wertebereiche, für die dieser Counter-Stil angewendbar sein soll. Die Bereichsgrenzen gehören dabei zum Bereich dazu.

Beispiel

range: 5 10;           /* Stil gilt für Zählerstände von 5 bis 10 */
range: 5 10, 15 20;    /* Stil gilt für Zählerstände von 5 bis 10 und von 15 bis 20 */
range: 9 20, 5 12;     /* Stil gilt für Zählerstände von 5 bis 20 */
range: 100 infinity;   /* Der Stil gilt für alle Zählerstände ab 100 */
range: infinity 5;     /* Der Stil gilt für alle Zählerstände bis zur 5 */

Die Bereiche müssen nicht sortiert angegeben werden, und sie können sich auch überlappen. Der verwendete Gültigkeitsbereich des Stils stellt die Vereinigungsmenge aller angegebenen Bereiche dar.

Der spezielle CSS Zahlenwert infinity gibt an, dass der Bereich an dieser Seite unbegrenzt ist. Ein Paar infinity N definiert deshalb alle Zählerstände, die kleiner oder gleich N sind, als gültig, und ein Paar wie M infinity alle Zählerstände, die größer oder gleich M sind, als gültig.

Falls Sie ein Paar angeben, bei dem die Untergrenze größer ist als die Obergrenze, ist der ganze range-Deskriptor ungültig.

fallback

Mit dem fallback-Deskriptor legen Sie fest, welcher andere Counter-Stil verwendet werden soll, wenn sich ein Zählerstand nicht darstellen lässt (beispielsweise weil keine Symbole mehr vorhanden sind, oder der range-Deskriptor nicht zutrifft). Als Wert verwenden Sie den Namen eines anderen Counter-Stils.

Geben Sie fallback nicht an, wird decimal als Fallback verwendet.

Achten Sie darauf, dass Sie keine fallback-Schleifen erzeugen (B ist Fallback für C, A ist Fallback für B, C ist Fallback für A). Der Browser erkennt das und setzt den Fallback-Stil aller beteiligten Counter-Stile auf decimal.

prefix und suffix

Die prefix- und suffix-Deskriptoren legen Zeichenketten fest, die konstant vor beziehungsweise nach einem Zählerwert ausgegeben werden sollen. Falls der Zählerstand negativ ist, wird das Präfix vor dem Minuszeichen ausgegeben.

{{Beachten|Präfix und Suffix werden nur beachtet, wenn der Counter-Stil für die Defaultdarstellung eines Markers (z. B. als list-style-type) festgelegt wird. Wenn Sie der counter()-Funktion explizit einen Stil als zweiten Parameter übergeben, bleiben Präfix und Suffix unbeachtet, um nicht mit den weiteren Angaben in der content-Eigenschaft zu kollidieren.

Das nachfolgene Beispiel modifiziert den vordefinierten decimal-Stil so, dass die Nummern eingeklammert werden:

Beispiel

@counter-style brackets {
   system: extends decimal;
   prefix: '(';
   suffix: ')';
}

speak-as

Der speak-as-Deskriptor ist dazu vorgesehen, die Art der Sprachwiedergabe eines Zählerstandes festzulegen. Viele visuell interessanten Counter-Stile sind für einen Narrator nämlich reines Kauderwelsch.

Syntax

  speak-as: auto | bullets | numbers | words | spell-out | counter-style-name;

speak-as ist zur Zeit nur im Firefox implementiert.

Die Werte bedeuten:

auto

Die Wiedergabe hängt vom Stilsystem ab. alphabetic wird wie spell-out wiedergegeben, cyclic wie bullets. Die übrigen Stilsysteme werden wie numbers wiedergegeben. Wenn das Stilsystem extends ist, wirkt auto entsprechend dem Stilsystem des Basisstils.

bullets

Die Sprachwiedergabe behandelt die Liste wie eine ungeordnete Liste

numbers

Der Zahlenwert des Counters wird wie eine Zahl in der mit lang festgelegte Seitensprache behandelt.

words

Die vom Counterstil erzeugte Darstellung wird wie normaler Text der Seitensprache gesprochen. Falls die Counterdarstellung Bilder enthält, wird statt dessen die numbers-Methode verwendet.

spell-out

Die von Counterstil erzeugte Darstellung wird nach den Regeln der Seitensprache buchstabiert. Falls der Browser keine Regeln zum Buchstabieren in dieser Sprache hat, wird statt dessen die numbers-Methode verwendet.

counter-style-name

Verwende die Regeln des angegebenen Stil, um die Art der Sprachausgabe festzulegen

Siehe auch

• Listengestaltung mit CSS
• Nummerierung von Listen mit Countern