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.
The additive-symbols
descriptor of the @counter-style
at-rule is used to specify counter symbols when the @counter-style
system
descriptor value is set as additive
. The additive system is used to construct sign-value numbering systems such as Roman numerals.
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 "𐌠";
Values
The descriptor accepts a comma-separated list of additive tuples with each tuple consisting of the following two values separated by a space:
<integer>
-
A non-negative integer values specifying the integer weight of the associated symbol value of the tuple.
<symbol>
-
Specifies the counter symbol to be used for the weight value defined by the associated
<integer>
weight value of the tuple.
Note: The additive tuples must be specified in order of descending weight; otherwise, the descriptor declaration isn't valid and is ignored.
Description
The additive-symbols
descriptor defines a comma-separated list of additive tuples. Each additive tuple contains a space-separated non-negative integer and counter symbol. To be valid, the list must be in the descending order of integer. The integer and symbol are concatenated together to form the counter symbol.
When the system
descriptor value is cyclic
, numeric
, alphabetic
, symbolic
, or fixed
, use the symbols()
descriptor instead of additive-symbols
.
Formal definition
Related at-rule | @counter-style |
---|---|
Initial value | n/a (required) |
Computed value | as specified |
Formal 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>* )
Examples
Specifying additive symbols
HTML
In this example, system: additive
along with the additive-symbols
descriptor values specify how numbers should be represented as Roman numerals. The value of each <li>
element in the list is converted to a Roman numeral according to the rules defined in @counter-style
.
<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;
}
Result
For the list item with the value of 109
, the numeral C
represents 100
, and IX
represents 9
. This generates CIX
counter for the list item 109
. The next list item automatically gets a value of 110
. The roman numeral CX
is derived from C
for 100
and X
for 10
.
Specifications
Specification |
---|
CSS Counter Styles Level 3 # counter-style-symbols |
Browser compatibility
BCD tables only load in the browser
See also
@counter-style
descriptors:system
,symbols
,negative
,prefix
,suffix
,range
,pad
,speak-as
,fallback
- List style properties:
list-style
,list-style-image
,list-style-position
symbols()
function to create anonymous counter styles- CSS counter styles module