Counter styles

These samples, with some exceptions, convert the numerals in the character string "One: 1, Two: 2, Three: 3, Four: 4, Five: 5, Six: 6" by using the 'counter()' function with a counter style defined in a @counter-style rule. The numbers to be converted are in red.

system="cyclic" symbols="a b c"

Converts the numerals in the character string into the repeating sequence a, b, c, a, b, c ...

system="numeric" symbols="a b c"

The first symbol, 'a', corresponds to 0, so the converted numerals start from 'b'.

system="alphabetic" symbols="a b c"

Converts the numerals in the character string into the sequence a, b, c, aa, ab, ac, ba, bb, bc, ...

system="symbolic" symbols="a b c"

Converts the numerals in the character string into the sequence a, b, c, aa, bb, cc, aaa, bbb, ccc, ...

system="additive" additive-symbols="5 v,1 i"

Converts the numerals in the character string by converting 5 to v and remainder multiples of 1 to the same number of i.

system="fixed" symbols="a b c"

Converts the numerals in the character string into the sequence a, b, c and then displays higher numbers unchanged.

system="extends decimal" pad="2 '0'"

'pad' specifies padding for short representations. This displays up to 2 digits in the sequence 01, 02, 03, ...

system="cyclic" symbols="a b c" range="1 3" fallback="cjk-decimal"

'range' specifies the number range to which the style applies. 'fallback' specifies the fallback style for numbers outside that range. This sample applies a, b, c for numerals 1 to 3. It then falls back to using the 'cjk-decimal' style for 4 and above.

system="extends decimal" negative="[-" "]"

'negative' specifies the prefix and suffix character strings for negative values. This sample displays '[-' before, and ']' after, negative values.

Complex Predefined Counter Styles

Examples from Section 7, Complex Predefined Counter Styles, of Predefined Counter Styles.

'circled-decimal'

'filled-circled-decimal'

'fullwidth-upper-alpha'

'lower-greek'

'japanese-informal'

'japanese-formal'