additive-symbols

Baseline 2023
Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Der additive-symbols Deskriptor der @counter-style at-Regel wird verwendet, um Zählzeichen anzugeben, wenn der @counter-style system Deskriptorwert auf additive gesetzt ist. Das additive System wird verwendet, um Sign-Wert-Nummerierungssysteme wie römische Zahlen zu konstruieren.

Syntax

css
/* Single tuple */
additive-symbols: 3 "*";

/* Comma-separated list of tuples */
additive-symbols:
  3 "0",
  2 "\2E\20",
  1 url(symbol.png);

/* Binary counter */
additive-symbols:
  2 "1",
  1 "0";

/* Etruscan (a civilization in ancient Italy) counter  */
additive-symbols:
  100 "𐌟",
  50 "𐌣",
  10 "𐌢",
  5 "𐌡",
  1 "𐌠";

Werte

Der Deskriptor akzeptiert eine durch Kommas getrennte Liste von additive tuples, wobei jedes Tupel aus den folgenden zwei Werten besteht, die durch ein Leerzeichen getrennt sind:

<integer>

Ein nicht-negativer Ganzzahlenwert, der das Gewicht des zugeordneten Symbolwerts des Tupels angibt.

<symbol>

Gibt das Zählsymbol an, das für den durch den zugeordneten <integer>-Gewichtswert des Tupels definierten Gewichtswert verwendet werden soll.

Hinweis: Die additive Tupel müssen in absteigender Gewichtungsreihenfolge angegeben werden; andernfalls ist die Deskriptor-Deklaration ungültig und wird ignoriert.

Beschreibung

Der additive-symbols Deskriptor definiert eine durch Kommas getrennte Liste von additive tuples. Jedes additive tuple enthält eine durch Leerzeichen getrennte nicht-negative Ganzzahl und ein Zählsymbol. Um gültig zu sein, muss die Liste in absteigender Reihenfolge der Ganzzahlen sein. Die Ganzzahl und das Symbol werden zusammengefügt, um das Zählsymbol zu bilden.

Wenn der system Deskriptorwert cyclic, numeric, alphabetic, symbolic oder fixed ist, verwenden Sie den symbols() Deskriptor anstelle von additive-symbols.

Formale Definition

Zugehörige @-Regel@counter-style
Anfangswertn/a (required)
Berechneter Wertwie angegeben

Formale Syntax

additive-symbols = 
  [ <integer [0,∞]> && <symbol> ]#  

<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Beispiele

Spezifikation additiver Symbole

HTML

In diesem Beispiel spezifizieren system: additive zusammen mit den additive-symbols Deskriptorwerten, wie Zahlen als römische Ziffern dargestellt werden sollen. Der Wert jedes <li> Elements in der Liste wird entsprechend den in @counter-style definierten Regeln in eine römische Ziffer umgewandelt.

html
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li value="109">109</li>
  <li>110</li>
</ul>

CSS

css
@counter-style uppercase-roman {
  system: additive;
  additive-symbols:
    1000 M,
    900 CM,
    500 D,
    400 CD,
    100 C,
    90 XC,
    50 L,
    40 XL,
    10 X,
    9 IX,
    5 V,
    4 IV,
    1 I;
}

ul {
  list-style: uppercase-roman;
  padding-left: 5em;
}

Ergebnis

Für das Listenelement mit dem Wert 109 repräsentiert die Zahl C 100 und IX repräsentiert 9. Dies erzeugt CIX als Zähler für das Listenelement 109. Das nächste Listenelement erhält automatisch den Wert 110. Die römische Zahl CX wird von C für 100 und X für 10 abgeleitet.

Spezifikationen

Specification
CSS Counter Styles Level 3
# counter-style-symbols

Browser-Kompatibilität

Siehe auch