additive-symbols

Syntax

/* 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 kommagetrennte Liste von additiven Tupeln, wobei jedes Tupel aus den folgenden zwei Werten besteht, die durch ein Leerzeichen getrennt sind:

<integer>

Ein nicht-negativer ganzzahliger Wert, der das ganzzahlige Gewicht des zugehörigen Symbolwertes des Tupels angibt.

<symbol>

Gibt das Zählersymbol an, das für den durch den zugehörigen <integer> Gewichts-Wert des Tupels definierten Gewichts-Wert verwendet werden soll.

Beschreibung

Der additive-symbols Deskriptor definiert eine kommagetrennte Liste von additiven Tupeln. Jedes additive Tupel enthält einen durch Leerzeichen getrennten nicht-negativen Ganzzahlwert und ein Zählersymbol. 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ählersymbol zu bilden.

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

Formale Definition

Formale Syntax

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

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

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

Beispiele

Angabe 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 gemäß den im @counter-style definierten Regeln in eine römische Zahl umgewandelt.

<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

@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 Ziffer C die 100, und IX steht für 9. Dies erzeugt den CIX Zähler für das Listenelement 109. Das nächste Listenelement erhält automatisch den Wert 110. Die römische Zahl CX leitet sich aus C für 100 und X für 10 ab.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• @counter-style Deskriptoren: system, symbols, negative, prefix, suffix, range, pad, speak-as, fallback
• Listenstil-Eigenschaften: list-style, list-style-image, list-style-position
• symbols() Funktion, um anonyme Zählerstile zu erstellen
• CSS Zählerstile Modul