CSS - additive-symbols

The additive-symbols descriptor is similar to the symbols descriptor and allows the user to specify symbols to be used for counter representations when the value of the system descriptor is additive. The additive-symbols descriptor defines what are known as additive tuples, each of which is a pair containing a symbol and a non-negative integer weight. The additive system is used to construct sign-value numbering systems such as the Roman numerals.

Example

 

HTML Content

CSS
<ul class="list">
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
</ul>

CSS Content

CSS
@counter-style additive-symbols-example {
  system: additive;
  additive-symbols: I 1;
}
.list {
  list-style: additive-symbols-example;
}

Result

Syntax  

CSS
additive-symbols: 3 "0";
additive-symbols: 3 "0", 2 "\2E\20";
additive-symbols: 3 "0", 2 url(symbol.png);

Formal syntax

CSS
<a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/integer" title=""><integer></a> <a href="css/value_definition_syntax#double_ampersand" title="Double ampersand">&&</a> <a href="css/@counter-style/additive-symbols#symbol"><symbol></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><p>where <br><code><symbol> = <a href="css/string" title=""><string></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/image" title=""><image></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <ident></code></p>

Description  

The additive-symbols descriptor is similar to the symbols descriptor and allows the user to specify symbols to be used for counter representations when the value of the system descriptor is additive. The additive-symbols descriptor defines what are known as additive tuples, each of which is a pair containing a symbol and a non-negative integer weight. The additive system is used to construct sign-value numbering systems such as the Roman numerals.

When the value of the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed, the symbols descriptor is used instead of additive-symbols to specify counter symbols.

Related at-rule@counter-style
Initial valueN/A
Mediaall
Computed valueas specified
Canonical orderorder of appearance in the formal grammar of the values

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support 33 (33) No support No support No support
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support 33 (33) No support No support No support

See Also  

Specifications  

Specification Status Comment
CSS Counter Styles Level 3
The definition of 'additive-symbols' in that specification.
Candidate Recommendation Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/@counter-style/additive-symbols

@counter-style CSS CSS Counter Styles CSS Descriptor Reference