Overview.src.html

<h1>CSS Counter Styles Level 3</h1>

<pre class=metadata>
Shortname: css-counter-styles
Level: 3
Status: ED
ED: http://dev.w3.org/csswg/css-counter-styles/
TR: http://w3.org/TR/css-counter-styles-3/
Previous Version: http://www.w3.org/TR/2012/WD-css-counter-styles-3-20121009/
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/
Abstract: This module introduces the ‘@counter-style’ rule, which allows authors to define their own custom counter styles for use with CSS list-marker and generated-content counters [[CSS3LIST]]. It also predefines a set of common counter styles, including the ones present in CSS2 and CSS2.1.
Issue Tracking: <a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=Counter%20Styles&resolution=---">Bugzilla</a>
At Risk: the counter styles ''cjk-decimal'', ''hebrew'', ''hiragana'', ''hiragana-iroha'', ''katakana'', ''katakana-iroha'', ''japanese-informal'', ''japanese-formal'', ''korean-hangul-formal'', ''korean-hanja-informal'', ''korean-hanja-formal'', ''simp-chinese-informal'', ''simp-chinese-formal'', ''trad-chinese-informal'', ''trad-chinese-formal'', and ''ethiopic-numeric''.
Ignored Properties: content, list-style-type, list-style
Ignored Terms: <image>, <integer>, <string>
</pre>
<style>
pre.stylesheet { white-space: pre-wrap; }
</style>

<h2 id='intro'>
Introduction</h2>

	CSS 1 defined a handful of useful counter styles based on the styles that HTML traditionally allowed on ordered and unordered lists.
	While this was expanded slightly by CSS2.1,
	it doesn't address the needs of worldwide typography.

	This module introduces the ''@counter-style'' rule which allows CSS to address this in an open-ended manner, 
	by allowing the author to define their own counter styles.  
	These styles can then be used in the 'list-style-type' property 
	or in the ''counter()'' and ''counters()'' functions.
	It also defines some additional predefined counter styles,
	particularly ones which are common but complicated to represent with ''@counter-style''.


<h2 id='counter-styles'>
Counter Styles</h2>

	A <dfn>counter style</dfn> defines how to convert a counter value into a string.
	Counter styles are composed of:
	
	<ul>
		<li>
			a name,
			to identify the style
		
		<li>
			an algorithm,
			which transforms integer counter values into a basic string representation
		
		<li>
			a negative sign,
			which is prepended or appended to the representation of a negative counter value.
		
		<li>
			a prefix,
			to prepend to the representation
		
		<li>
			a suffix
			to append to the representation
		
		<li>
			a range,
			which limits the values that a counter style handles

		<li>
			a spoken form,
			which describes how to read out the counter style in a speech synthesizer
		
		<li>
			and a fallback style,
			to render the representation with when the counter value is outside the counter style's range 
			or the counter style otherwise can't render the counter value
	</ul>

	When asked to <dfn title='generate a counter|generate a counter representation'>generate a counter representation</dfn> 
	using a particular counter style for a particular counter value, 
	follow these steps:

	<ol>
		<li>
			If the counter value is outside the <i>range</i> of the counter style, 
			exit this algorithm and instead <i>generate a counter representation</i> 
			using the counter style's fallback style and the same counter value.

		<li>
			Using the counter value and the counter algorithm for the counter style, 
			generate an initial representation for the counter value.
			If the counter value is negative
			and the counter style is <i>negative-capable</i>,
			instead generate an initial representation using the absolute value of the counter value.

		<li>
			If the representation uses less symbols than specified in the counter style's 'pad' descriptor,
			prepend symbols to the representation as specified in the 'pad' descriptor.

		<li>
			If the counter value is negative
			and the counter style is <i>negative-capable</i>,
			wrap the representation in the counter style's negative sign
			as specified in the 'negative' descriptor.

		<li>
			Return the representation.
	</ol>

	Note: the prefix and suffix don't play a part in this algorithm.  
	This is intentional; 
	the prefix and suffix aren't part of the string returned by the counter() or counters() functions.  
	Instead, the prefix and suffix are added by the algorithm that constructs the value of the 'content' property for the ''::marker'' pseudo-element.  
	This also implies that the prefix and suffix always come from the specified counter-style, 
	even if the actual representation is constructed by a fallback style.


<h2 id='the-counter-style-rule'>
Defining Custom Counter Styles: the ''@counter-style'' rule</h2>

	The <dfn id='at-counter-style'>''@counter-style''</dfn> rule allows authors to define a custom <i>counter style</i>.
	The components of a <i>counter style</i> are specified by descriptors in the ''@counter-style'' rule.
	The algorithm is specified implicitly by a combination of the ''system'', ''symbols'', and ''additive-symbols'' properties.

	The general form of an ''@counter-style'' rule is:

	<pre>@counter-style <i>&lt;counter-style-name></i> { &lt;declaration-list> }</pre>

	The <i>&lt;counter-style-name></i> must be be a valid identifier 
	and must not be ''decimal'' or ''none'',
	or else the rule is invalid.
	(Note, however, that some names, like ''inside'' or ''initial'',
	might conflict with the existing values of properties like 'list-style',
	and thus won't be usable there.)

	Counter style names are case-sensitive.
	However, the names defined in this specification are ASCII lower-cased on parse
	wherever they are used as counter styles, e.g.
	in the 'list-style' set of properties,
	in the ''@counter-style'' rule,
	and in the ''counter()'' functions.

	Each ''@counter-style'' rule specifies a value for every counter-style descriptor,
	either implicitly or explicitly.  
	Those not given explicit value in the rule take the initial value listed with each descriptor in this specification. 
	These descriptors apply solely within the context of the ''@counter-style'' rule in which they are defined,
	and do not apply to document language elements. 
	There is no notion of which elements the descriptors apply to or whether the values are inherited by child elements.  
	When a given descriptor occurs multiple times in a given ''@counter-style'' rule, 
	only the last specified value is used; 
	all prior values for that descriptor must be ignored. 

	Defining a ''@counter-style'' makes it available to the entire document in which it is included.  
	If multiple ''@counter-style'' rules are defined with the same name, 
	only one wins,
	according to standard cascade rules.
	''@counter-style'' rules cascade "atomically":
	if one replaces another of the same name, 
	it replaces it <em>entirely</em>, 
	rather than just replacing the specific descriptors it specifies.

	This at-rule conforms with the forward-compatible parsing requirement of CSS; 
	conformant parsers that don't understand these rules will ignore them without error. 
	Any descriptors that are not recognized or implemented by a given user agent must be ignored in their entirety;
	they do not make the ''@counter-style'' rule invalid.

<h3 id='counter-style-system'>
Counter algorithms: the 'system' descriptor</h3>

	<table class='descdef'>
		<tr>
			<th>Name:
			<td><dfn>system</dfn>
		<tr>
			<th>Value:
			<td>cyclic | numeric | alphabetic | symbolic | additive | <span class=nobr>[fixed &lt;integer>?]</span> | <span class=nobr>[ override &lt;counter-style-name> ]</span>
		<tr>
			<th>Initial:
			<td>symbolic
	</table>

	The 'system' descriptor specifies which algorithm will be used to construct
	the counter's representation based on the counter value.  For example, 
	''cyclic'' counter styles just cycle through their symbols repeatedly, 
	while ''numeric'' counter styles interpret their symbols as digits and 
	build their representation accordingly.  The systems are defined as follows:


<h4 id="cyclic-system">
Cycling Symbols: the ''cyclic'' system</h4>

	The <dfn>''cyclic''</dfn> counter system cycles repeatedly through its provided symbols, 
	looping back to the beginning when it reaches the end of the list.
	It can be used for simple bullets 
	(just provide a single <i>counter symbol</i>), 
	or for cycling through multiple symbols.  
	The first <i>counter symbol</i> is used as the representation of the value 1, 
	the second <i>counter symbol</i> (if it exists) is used as the representation of the value 2, etc.

	If the system is ''cyclic'', 
	the 'symbols' descriptor must contain at least one <i>counter symbol</i>,
	or else the ''@counter-style'' rule is invalid.
	This system is defined over all counter values.

	<div class=example>
		A "triangle bullet" counter style can be defined as:

		<pre>
		@counter-style <dfn>triangle</dfn> {
			system: cyclic;
			symbols: ‣;
			suffix: "";
		}
		</pre>

		It will then produce lists that look like:

		<pre>
		‣  One
		‣  Two
		‣  Three
		</pre>
	</div>

	If there are <var>N</var> <i>counter symbols</i> 
	and a representation is being constructed for the integer <var>value</var>, 
	the representation is the <i>counter symbol</i> 
	at index ( (<var>value</var>-1) mod <var>N</var>) 
	of the list of <i>counter symbols</i> (0-indexed).


<h4 id="fixed-system">
Exhaustible Symbols: the ''fixed'' system</h4>

	The <dfn>''fixed''</dfn> counter system runs through its list of counter symbols once,
	then falls back.
	It is useful for representing counter styles that only have a finite number of representations.  
	For example, Unicode defines several limited-length runs of special characters meant for lists, 
	such as circled digits.

	If the system is ''fixed'', 
	the 'symbols' descriptor must contain at least one <i>counter symbol</i>,
	or else the ''@counter-style'' rule is invalid.  
	This system is defined over counter values in a finite range, 
	starting with the <i>first symbol value</i> and having a length equal to the length of the list of <i>counter symbols</i>.

	When this system is specified, 
	it may optionally have an integer provided after it, 
	which sets the <dfn>first symbol value</dfn>.  
	If it is omitted, the <i>first symbol value</i> is 1.

	<div class=example>
		A "box-corner" counter style can be defined as:

		<pre>
		@counter-style <dfn>box-corner</dfn> {
			system: fixed;
			symbols: ◰ ◳ ◲ ◱;
			suffix: ':';
		}
		</pre>

		It will then produce lists that look like:

		<pre>
		◰:  One
		◳:  Two
		◲:  Three
		◱:  Four
		5:  Five
		6:  Six
		</pre>
	</div>

	The first <i>counter symbol</i> is the representation for the <i>first symbol value</i>, 
	and subsequent counter values are represented by subsequent <i>counter symbols</i>.  
	Once the list of <i>counter symbols</i> is exhausted, 
	further values cannot be represented by this counter style, 
	and must instead be represented by the fallback counter style.



<h4 id="symbolic-system">
Repeating Symbols: the ''symbolic'' system</h4>

	The ''symbolic'' counter system cycles repeatedly through its provided symbols, 
	doubling, tripling, etc. the symbols on each successive pass through the list. 
	For example, if the original symbols were "*" and "†", 
	then on the second pass they would instead be "**" and "††", 
	while on the third they would be "***"and "†††", etc. 
	It can be used for footnote-style markers, 
	and is also sometimes used for alphabetic-style lists for a slightly different presentation than what the ''alphabetic'' system presents.

	If the system is <dfn>''symbolic''</dfn>, 
	the 'symbols' descriptor must contain at least one <i>counter symbol</i>,
	or else the ''@counter-style'' rule is invalid.  
	This system is defined only over strictly positive counter values.

	<div class=example>
		An "footnote" counter style can be defined as:

		<pre>
		@counter-style <dfn>footnote</dfn> {
			system: symbolic;
			symbols: '*' ⁑ † ‡;
			suffix: "";
		}
		</pre>

		It will then produce lists that look like:

		<pre>
		*   One
		⁑   Two
		†   Three
		‡   Four
		**  Five
		⁑⁑  Six
		</pre>
	</div>

	<div class=example>
		Some style guides mandate a list numbering that looks similar to ''upper-alpha'', 
		but repeats differently after the first 26 values, 
		instead going "AA", "BB", "CC", etc.  
		This can be achieved with the symbolic system:

		<pre>
		@counter-style <dfn>upper-alpha-legal</dfn> {
			system: symbolic;
			symbols: A B C D E F G H I J K L M 
			         N O P Q R S T U V W X Y Z;
		}
		</pre>

		This style is identical to ''upper-alpha'' through the first 27 values, 
		but they diverge after that, with ''upper-alpha'' going "AB", "AC", "AD", etc.  
		Starting at the 53rd value, ''upper-alpha'' goes "BA", "BB", "BC", etc., 
		while this style jumps into triple digits with "AAA", "BBB", "CCC", etc.
	</div>

	To construct the representation, run the following algorithm:

	Let <var>N</var> be the length of the list of <i>counter symbols</i>, 
	<var>value</var> initially be the counter value, 
	<var>S</var> initially be the empty string, 
	and <var>symbol(n)</var> be the nth <i>counter symbol</i> in the list of <i>counter symbols</i> (0-indexed).

	<ol>
		<li>Let the <var>chosen symbol</var> be <code class='inline'>symbol(<var>value</var> mod <var>N</var>)</code>.

		<li>Let the <var>representation length</var> be <code class='inline'>floor( (<var>value</var> - 1) / <var>N</var> )</code>.

		<li>Append the <var>chosen symbol</var> to <var>S</var> a number of times equal to the <var>representation length</var>.
	</ol>

	Finally, return <var>S</var>.

	The ''symbolic'' system will produce representations with sizes that are linear in the magnitude of the counter value.  
	This can potentially be abused to generate excessively large representations 
	and consume undue amounts of the user's memory or even hang their browser.  
	User agents must support representations at least 20 characters long, 
	but they may choose to instead use the fallback style for representations that would be longer than 20 characters.


<h4 id="alphabetic-system">
Bijective Numerals: the ''alphabetic'' system</h4>

	The ''alphabetic'' counter system interprets the list of <i>counter symbols</i> as digits to an <em title=''>alphabetic</em> numbering system, 
	similar to the default ''lower-alpha'' counter style,
	which wraps from "a", "b", "c", to "aa", "ab", "ac". 
	Alphabetic numbering systems do not contain a digit representing 0;
	so the first value when a new digit is added is composed solely of the first digit.
	Alphabetic numbering systems are commonly used for lists, 
	and also appear in many spreadsheet programs to number columns. 
	The first <i>counter symbol</i> in the list is interpreted as the digit 1, 
	the second as the digit 2, 
	and so on.  

	If the system is <dfn>''alphabetic''</dfn>, 
	the 'symbols' descriptor must contain at least two <i>counter symbols</i>,
	or else the ''@counter-style'' rule is invalid.  
	This system is defined only over strictly positive counter values.

	<div class=example>
		A counter style using go stones can be defined as:

		<pre>
		@counter-style <dfn>go</dfn> {
			system: alphabetic;
			symbols: url(white.svg) url(black.svg);
			suffix: "";
		}
		</pre>

		It will then produce lists that look like:

		<div class='alphabetic-example'>
			<span><img src=images/white.svg alt=""></span> One<br>
			<span><img src=images/black.svg alt=""></span> Two<br>
			<span><img src=images/white.svg alt=""><img src=images/white.svg alt=""></span>  Three<br>
			<span><img src=images/white.svg alt=""><img src=images/black.svg alt=""></span>  Four<br>
			<span><img src=images/black.svg alt=""><img src=images/white.svg alt=""></span>  Five<br>
			<span><img src=images/black.svg alt=""><img src=images/black.svg alt=""></span>  Six<br>
			<span><img src=images/white.svg alt=""><img src=images/white.svg alt=""><img src=images/white.svg alt=""></span> Seven
		</div>

		Note: This example requires support for SVG images to display correctly.
	</div>

	If there are <var>N</var> <i>counter symbols</i>, 
	the representation is a base <var>N</var> alphabetic number using the <i>counter symbols</i> as digits. 
	To construct the representation, run the following algorithm:

	Let <var>N</var> be the length of the list of <i>counter symbols</i>, 
	<var>value</var> initially be the counter value, 
	<var>S</var> initially be the empty string, 
	and <var>symbol(n)</var> be the nth <i>counter symbol</i> in the list of <i>counter symbols</i> (0-indexed).

	While <var>value</var> is not equal to 0:

	<ol>
		<li>Set <var>value</var> to <code><var>value</var> - 1</code>.

		<li>Prepend <var>symbol( <var>value</var> mod <var>N</var> )</var>
		to <var>S</var>.

		<li>Set <var>value</var> to <code>floor( <var>value</var> / <var>N</var> )</code>.
	</ol>

	Finally, return <var>S</var>.

<h4 id="numeric-system">
Positional Numerals: the ''numeric'' system</h4>

	The <dfn>numeric</dfn> counter system interprets the list of <i>counter symbols</i>
	as digits to a "place-value" numbering system, 
	similar to the default ''decimal'' counter style.  
	The first <i>counter symbol</i> in the list is interpreted as the digit 0, 
	the second as the digit 1, 
	and so on.  

	If the system is ''numeric'',
	the 'symbols' descriptor must contain at least two <i>counter symbols</i>,
	or else the ''@counter-style'' rule is invalid. 
	This system is defined over all counter values.

	<div class=example>
		A "trinary" counter style can be defined as:

		<pre>
		@counter-style <dfn>trinary</dfn> {
			system: numeric;
			symbols: '0' '1' '2';
		}
		</pre>

		It will then produce lists that look like:

		<pre>
		1.   One
		2.   Two
		10.  Three
		11.  Four
		12.  Five
		20.  Six
		</pre>
	</div>

	If there are <var>N</var> <i>counter symbols</i>, 
	the representation is a base <var>N</var> number using the <i>counter symbols</i> as digits.
	To construct the representation, run the following algorithm: 

	Let <var>N</var> be the length of the list of <i>counter symbols</i>, 
	<var>value</var> initially be the counter value, 
	<var>S</var> initially be the empty string, 
	and <var>symbol(n)</var> be the nth <i>counter symbol</i> in the list of <i>counter symbols</i> (0-indexed).

	<ol>
		<li>If <var>value</var> is 0, append <var>symbol(0)</var> to 
		<var>S</var> and return <var>S</var>.

		<li>While <var>value</var> is not equal to 0:

			<ol>
				<li>Prepend <var>symbol( <var>value</var> mod <var>N</var> )</var> 
				to <var>S</var>.

				<li>Set <var>value</var> to <code>floor( <var>value</var> / <var>N</var> )</code>.
			</ol>

		<li>Return <var>S</var>.
	</ol>


<h4 id="additive-system">
Accumulating Numerals: the ''additive'' system</h4>

	The <dfn>''additive''</dfn> counter system is used to represent "sign-value" numbering systems,
	which, rather than using reusing digits in different positions to change their value,
	define additional digits with much larger values,
	so that the value of the number can be obtained by adding all the digits together.
	This is used in Roman numerals
	and other numbering systems around the world.

	If the system is ''additive'', 
	the 'additive-symbols' descriptor must contain at least one <i>additive tuple</i>,
	or else the ''@counter-style'' rule is invalid.  
	This system is nominally defined over all counter values 
	(see algorithm, below, for exact details).

	<div class=example>
		A "dice" counter style can be defined as:

		<pre>
		@counter-style <dfn>dice</dfn> {
			system: additive;
			additive-symbols: 6 ⚅, 5 ⚄, 4 ⚃, 3 ⚂, 2 ⚁, 1 ⚀;
			suffix: "";
		}
		</pre>

		It will then produce lists that look like:

		<pre>
		⚀    One
		⚁    Two
		⚂    Three
		...
		⚅⚄   Eleven
		⚅⚅   Twelve
		⚅⚅⚀  Thirteen
		</pre>
	</div>

	To construct the representation, run this algorithm:

 
	Let <var>value</var> initially be the counter value, 
	<var>S</var> initially be the empty string, 
	and <var>symbol list</var> initially be the list of <i>additive tuples</i>.

	<ol>
		<li>If <var>value</var> is initially 0, and there is an <i>additive tuple</i> with a weight of 0, append that tuple's <i>counter symbol</i> to S and return S.

		<li>While <var>value</var> is greater than 0 and there are elements left in the <var>symbol list</var>:

			<ol>
				<li>Pop the first <i>additive tuple</i> from the <var>symbol list</var>.
				This is the <dfn title="current tuple|current tuple's">current tuple</dfn>.

				<li>Append the <i>current tuple</i>&apos;s <i>counter symbol</i> to <var>S</var> 
				<code>floor( <var>value</var> / <var><i>current tuple's</i> weight</var> )</code>
				times (this may be 0).

				<li>Decrement <var>value</var> by the <var><i>current tuple's</i></var> weight multiplied
				by the number of times the <i>current tuple</i> was appended to <var>S</var>
				in the previous step.
			</ol>

		<li>If the loop ended because <var>value</var> is 0, return S.  Otherwise, the given counter value cannot be represented by this counter style, and must instead be represented by the fallback counter style.
	</ol>

	The ''additive'' system will produce representations with sizes that are linear in the magnitude of the counter value.  
	This can potentially be abused to generate excessively large representations and consume undue amounts of the user's memory or even hang their browser.  
	User agents must support representations at least 20 characters long, 
	but they may choose to instead use the fallback style for representations that would be longer than 20 characters.


<h4 id="override-system">
Tweaking Existing Counter Styles: the ''override'' system</h4>

	The <dfn>''override''</dfn> system allows an author to use the algorithm of another counter style, 
	but alter other aspects, 
	such as the negative sign or the suffix.  
	If a counter style uses the ''override'' system, 
	any unspecified descriptors must be taken from the overridden counter style specified, 
	rather than taking their initial values.

	If a @counter-style uses the ''override'' system, 
	it must not contain a 'symbols' or 'additive-symbols' descriptor,
	or else the ''@counter-style'' rule is invalid.
	If the specified counter style name isn't the name of any currently-defined counter style, 
	it must be treated as if it was overriding the ''decimal'' counter style.


<h3 id='counter-style-negative'>
Formatting negative values: the 'negative' descriptor</h3>

	<pre class='descdef'>
	Name: negative
	Value: <<symbol>> <<symbol>>?
	Initial: "\2D" ("-" hyphen-minus)
	</pre>

	The 'negative' descriptor defines how to alter the representation when
	the counter value is negative.

	The first <var>&lt;symbol></var> in the value is prepended to the representation when the
	counter value is negative.  The second <var>&lt;symbol></var>, if specified, is appended
	to the representation when the counter value is negative.

	<div class='example'>
		For example, specifying ''negative: "(" ")";'' will make negative
		values be wrapped in parentheses, which is sometimes used in financial
		contexts, like "(2) (1) 0 1 2 3...".
	</div>

	Not all 'system' values use a negative sign.
	In particular, a counter style is <dfn>negative-capable</dfn>
	is one where its 'system' value is
	''symbolic'',
	''alphabetic'',
	''numeric'',
	''additive'',
	or ''override'' if the overridden counter style is itself <i>negative-capable</i>.
	If a counter style is not <i>negative-capable</i>,
	it ignores the negative sign when <i title="generate a counter representation">generating a counter representation</i>.


<h3 id='counter-style-prefix'>
Symbols before the marker: the 'prefix' descriptor</h3>

	<pre class='descdef'>
	Name: prefix
	Value: <<symbol>>
	Initial: "" (the empty string)
	</pre>

	The 'prefix' descripter specifies a <var>&lt;symbol></var> that is prepended to the 
	marker representation.  Prefixes are only added by the algorithm for constructing
	the default contents of the ''::marker'' pseudo-element; the prefix is not 
	added automatically when the counter() or counters() functions are used.  
	Prefixes come before any negative sign.


<h3 id='counter-style-suffix'>
Symbols after the marker: the 'suffix' descriptor</h3>

	<table class='descdef'>
		<tr>
			<th>Name:
			<td><dfn>suffix</dfn>
		<tr>
			<th>Value:
			<td><var>&lt;symbol></var>
		<tr>
			<th>Initial:
			<td>"\2E" ("." full stop)
	</table>

	The 'suffix' descripter specifies a <var>&lt;symbol></var> that is appended to the 
	marker representation.  Suffixes are only added by the algorithm for constructing
	the default contents of the ''::marker'' pseudo-element; the suffix is not 
	added automatically when the counter() or counters() functions are used.  
	Suffixes are added to the representation after negative signs.


<h3 id='counter-style-range'>
Limiting the counter scope: the 'range' descriptor</h3>

	<table class='descdef'>
		<tr>
			<th>Name:
			<td><dfn>range</dfn>
		<tr>
			<th>Value:
			<td>[ [ &lt;integer> | infinite ]{2} ]# | auto
		<tr>
			<th>Initial:
			<td>auto
	</table>

	The 'range' descriptor defines the ranges over which the counter style is defined.
	If a counter style is used to represent a counter value outside of its ranges,
	the counter style instead drops down to its fallback counter style.

	<dl>
		<dt>auto
		<dd>
			The range depends on the counter system.
			For ''cyclic'', ''numeric'', and ''fixed'' systems,
			the range is negative infinity to positive infinity.
			For ''alphabetic'' and ''symbolic'' systems,
			the range is 1 to positive infinity.
			For ''additive'' systems,
			the range is 0 to positive infinity.
			For ''override'' systems,
			the range is identical to the overridden system.

		<dt>[ [ &lt;integer> | infinite ]{2} ]#
		<dd>
			This defines a comma-separated list of ranges.
			For each individual range,
			the first value is the lower bound
			and the second value is the upper bound.
			This range is inclusive - it contains both the lower and upper bound numbers.
			If ''infinite'' is used as the first value in a range,
			it represents negative infinity;
			if used as the second value,
			it represents positive infinity.
			The range of the counter style is the union of all the ranges defined in the list.

			If the lower bound of any range is higher than the upper bound,
			the entire descriptor is invalid and must be ignored.
	</dl>

	Implementations must support ranges with a lower bound of at least -2<sup>15</sup>
	and an upper bound of at least 2<sup>15</sup>-1
	(the range of a signed 2-byte int).
	They may support higher ranges.
	If any specified bound is outside of the implementation's supported bounds,
	it must be treated as the closest bound that the implementation does support.


<h3 id='counter-style-pad'>
Zero-Padding and Constant-Width Representations: the 'pad' descriptor</h3>

	<table class='descdef'>
		<tr>
			<th>Name:
			<td><dfn>pad</dfn>
		<tr>
			<th>Value:
			<td><var>&lt;integer></var> &amp;&amp; <var>&lt;symbol></var>
		<tr>
			<th>Initial:
			<td>0 ""
	</table>

	The 'pad' descriptor allows an author to specify a "fixed-width" counter style,
	where representations shorter than the pad value are padded with a particular <<symbol>>.
	Representations larger than the specified pad value are constructed as normal.

	<dl>
		<dt><<integer>> &amp;&amp; <<symbol>>
		<dd>
			The <<integer>> specifies a minimum number of <<symbol>>s that all counter representations must reach.
			If a counter representation would be generated using less <<symbol>>s than the specified <<integer>>
			(before adding prefixes/suffixes/negatives),
			prepend copies of the specified <<symbol>> to the representation
			until the number of symbols reaches the specified pad value.

			The <<integer>> must be non-negative.
			A negative value is a syntax error.

			If the counter value is negative
			and the counter style is <i>negative-capable</i>,
			treat the minimum number of <<symbol>>s as being one or two smaller when determining how many copies to prepend,
			depending on whether the 'negative' descriptor's value is one or two <var>&lt;symbol></var>s.
	</dl>

	<div class='example'>
		The most common example of "fixed-width" numbering is zero-padded decimal numbering.
		If an author knows that the numbers used will be less than a thousand, for example,
		it can be zero-padded with a simple ''width: 3 "0";'' descriptor,
		ensuring that all of the representations are 3 digits wide.

			This will cause, for example, 
			1 to be represented as "001", 
			20 to be represented as "020",
			300 to be represented as "300",
			4000 to be represented as "4000",
			and -5 to be represented as "-05".
	</div>

	Note: The 'pad' descriptor counts the number of <em><<symbol>>s</em> used to construct the representation,
	not the number of characters,
	and also pads the representation with <<symbol>>s.
	For many styles, the distinction is irrelevant, 
	as all the <<symbol>>s are single-chararacter,
	but if a style uses multi-character <<symbol>>s,
	care must be taken not to accidentally specify 'pad' in terms of characters.


<h3 id='counter-style-fallback'>
Defining fallback: the 'fallback' descriptor</h3>

	<table class='descdef'>
		<tr>
			<th>Name:
			<td><dfn>fallback</dfn>
		<tr>
			<th>Value:
			<td>&lt;counter-style-name>
		<tr>
			<th>Initial:
			<td>decimal
	</table>

	The 'fallback' descriptor specifies a fallback counter style to be used
	when the current counter style can't create a representation for a given
	counter value.  For example, if a counter style defined with a range of 1-10
	is asked to represent a counter value of 11, the counter value's representation
	is instead constructed with the fallback counter style (or possibly the 
	fallback style's fallback style, if the fallback style can't represent that
	value, etc.).

	If the value of the 'fallback' descriptor isn't the name of any 
	currently-defined counter style, the used value of the 'fallback' descriptor
	is <i>decimal</i> instead.  Similarly, while following fallbacks to find
	a counter style that can render the given counter value, if a loop in the 
	specified fallbacks is detected, the <i>decimal</i> style must be used instead.

	<p class='note'>Note that it is not necessarily an error to specify fallback
	loops.  For example, if an author desires a counter style with significantly
	different representations for even and odd counter values, they may find it 
	easiest to define one style that can only represent odd values and one that 
	can only represent even values, and specify each as the fallback for the 
	other one.  Though the fallback graph is circular, at no point do you encounter 
	a loop while following these fallbacks - every counter value is represented 
	by one or the other counter style.  


<h3 id='counter-style-symbols'>
Marker characters: the 'symbols' and 'additive-symbols' descriptors</h3>

	<table class='descdef'>
		<tr>
			<th>Name:
			<td><dfn id="descdef-symbols">symbols</dfn>
		<tr>
			<th>Value:
			<td><var>&lt;symbol></var>+
		<tr>
			<th>Initial:
			<td>N/A
	</table>

	<table class='descdef'>
		<tr>
			<th>Name:
			<td><dfn id="descdef-additive-symbols">additive-symbols</dfn>
		<tr>
			<th>Value:
			<td>[ <var>&lt;integer></var> &amp;&amp; <var>&lt;symbol></var> ]#
		<tr>
			<th>Initial:
			<td>N/A
	</table>

	<pre class='prod'><dfn>&lt;symbol></dfn> = &lt;string> | &lt;image> | &lt;identifier></pre>

	The 'symbols' and 'additive-symbols' descriptors specify the symbols
	used by the marker-construction algorithm specified by the 'system' descriptor.
	The 'symbols' descriptor must be specified if the counter system is ''cyclic'',
	''numeric'', ''alphabetic'', ''symbolic'', or ''fixed'', and the 
	'additive-symbols' descriptor must be specified if the counter system is
	''additive''; otherwise, the ''@counter-style'' is invalid and must be ignored.

	Some counter systems specify that the 'symbols' descriptor must have at
	least two entries.  If the counter style's system is such, and the 'symbols'
	descriptor has only a single entry, the counter style is invalid and must
	be ignored.

	Each entry in the 'symbols' descriptor's value defines a <dfn>counter symbol</dfn>,
	which is interpreted differently based on the counter style's system.  Each
	entry in the 'additive-symbols' descriptor's value defines an <dfn>additive tuple</dfn>,
	which consists of a <i>counter symbol</i> and a non-negative integer weight.  
	Each weight must be a non-negative integer, and the <i>additive tuples</i>
	must be specified in order of descending weight; otherwise, the @counter-style
	is invalid and must be ignored.

	<i>Counter symbols</i> may be strings, images, or identifiers, 
	and the three types can be mixed in a single descriptor.  
	Counter representations are constructed by concatenating counter symbols together.  
	Identifiers are rendered as strings containing the same characters.  
	Images are rendered as inline replaced elements.  
	The <a href="http://dev.w3.org/csswg/css3-images/#default-object-size">default object size</a> of an image <i>counter symbol</i> is a 1em by 1em square.

	Note: If using identifiers rather than strings to define the symbols,
	be aware of the syntax of identifiers.
	In particular, ascii non-letters like "*" are not identifiers,
	and so must be quoted in a string.
	Hex escapes, 
	used in several of the counter styles defined in this specification,
	"eat" the following space
	(to allow a digit to follow a hex escape without ambiguity),
	so two spaces must be put after a hex escape
	to separate it from the following one,
	or else they'll be considered adjacent,
	and part of the same identifier.


<h3 id='counter-style-speak-as'>
Speech Synthesis: the 'speak-as' descriptor</h3>

	<table class='descdef'>
		<tr>
			<th>Name:
			<td><dfn id='descdef-speak-as'>speak-as</dfn>
		<tr>
			<th>Value:
			<td>auto | numeric | alphabetic | bullet | &lt;counter-style-name>
		<tr>
			<th>Initial:
			<td>auto
	</table>

	A counter style can be constructed with a meaning that is obvious visually,
	but impossible to meaningfully represent via a speech synthesizer,
	or possible but nonsensical when naively read out.
	The 'speak-as' descriptor describes how to synthesize the spoken form of a counter formatted with the given counter style.
	Values have the following meanings:

	<dl>
		<dt><dfn id='speak-as-auto'>''auto''</dfn>
		<dd>
			If the counter style's 'system' is ''alphabetic'', this value computes to ''alphabetic''.
			If the 'system' is ''cyclic'', this value computes to ''bullet''.
			Otherwise, this value computes to ''numeric''.

		<dt><dfn id='speak-as-numeric' title="speak as: numeric">''numeric''</dfn>
		<dd>
			The counter's value is spoken as a number in the document language.

		<dt><dfn id='speak-as-alphabetic' title="speak as: alphabetic">''alphabetic''</dfn>
		<dd>
			<i>Generate a counter representation</i> for the value as normal,
			then spell it out letter-by-letter in the document language.
			If the UA does not know how to pronounce the symbols,
			it may handle it as ''numeric''.

			For example, ''lower-greek'' in English would be read out as "alpha", "beta", "gamma", etc. 
			Conversely, ''upper-latin'' in French would be read out as (in phonetic notation) /a/, /be/, /se/, etc.

		<dt><dfn id='speak-as-symbolic'>''bullet''</dfn>
		<dd>
			The UA speaks a UA-defined phrase or audio cue that represents a list item being read out.

		<dt><dfn id='speak-as-counter-style'><var>&lt;counter-style-name></var></dfn>
		<dd>
			The counter's value is instead spoken out in the specific style.
			If the specified style does not exist,
			this value is treated as ''auto''.
	</dl>

	<div class='example'>
		The ability to defer pronunciation to another counter style can help when the symbols being used aren't actually letters.
		For example, here's a possible definition of a ''circled-lower-latin'' counter-style, using some special unicode characters:

		<pre class='stylesheet'>
		@counter-style <dfn>circled-lower-latin</dfn> {
		  system: alphabetic;
		  speak-as: lower-latin;
		  symbols: ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ;
		  suffix: "";
		}
		</pre>

		Setting its 'system' to ''alphabetic'' would normally make the UA try to read out the names of the characters,
		but in this case that might be something like "Circled Letter A",
		which is unlikely to make sense.
		Instead, explicitly setting 'speak-as' to ''lower-latin'' ensures that they get read out as their corresponding latin letters, as intended.
	</div>

<!-- ====================================================================== -->

<h2 id='symbols-function'>
Defining Anonymous Counter Styles: the ''symbols()'' function</h2>

	The ''symbols()'' function allows a <i>counter style</i> to be defined inline in a property value,
	for when a style is used only once in a stylesheet and defining a full ''@counter-style'' rule would be overkill.
	It does not provide the full feature-set of the ''@counter-style'' rule, 
	but provides a sufficient subset to still be useful.  
	The syntax of the ''symbols()'' rule is:

	<pre>
		<dfn>symbols()</dfn> = symbols( <<symbols-type>>? [ &lt;string> | &lt;image> ]+ );
		<dfn>&lt;symbols-type></dfn> = cyclic | numeric | alphabetic | symbolic | fixed;
	</pre>

	The ''symbols()'' function defines an anonymous counter style 
	with no name, 
	a 'prefix' and 'suffix' of ''""'' (the empty string),
	a 'range' of ''auto'', 
	a 'fallback' of ''decimal'', 
	and a 'negative' of ''"\2D"'' ("-" hyphen-minus).  
	The counter style's algorithm is constructed 
	by consulting the previous chapter using the provided system&nbsp;&mdash;
	or ''symbolic'' if the system was omitted&nbsp;&mdash;
	and the provided <<string>>s and <<image>>s as the value of the 'symbols' property.  
	If the system is ''fixed'', the <i>first symbol value</i> is ''1''.

	<div class='example'>
		This code:
		
		<pre>ol { list-style: symbols("*" "\2020" "\2021" "\A7"); }</pre>

		will produce lists that look like:
		
		<pre>
		*   One
		†   Two
		‡   Three
		§   Four
		**  Five
		††  Six
		‡‡  Seven
		</pre>

		On the other hand, specifying the system of counter, like so:
		
		<pre>ol { list-style: symbols(cyclic "*" "\2020" "\2021" "\A7"); }</pre>

		will produce lists that look like:
		
		<pre>
		*   One
		†   Two
		‡   Three
		§   Four
		*   Five
		†   Six
		‡   Seven
		</pre>
	</div>

	Note: the ''symbols()'' function only allows strings and images, 
	while the 'symbols' descriptor of a ''@counter-style'' rule also allows identifiers.

<h2 id='extending-css2'>
Extending 'list-style-type', ''counter()'', and ''counters()''</h2>

	In CSS Level 2 [[!CSS21]] the 'list-style-type' property and the ''counter()'' and ''counters()'' notations
	accept various pre-defined keywords, each identifying a counter style.
	This module extends these features to take instead the <<counter-style>> type, defined below:

	<pre class='prod'>
		<dfn>&lt;counter-style></dfn> = <<counter-style-name>> | <a>symbols()</a>;
	</pre>


<!--
   SSSSSSSSSSSSSSS      tttt                              lllllll                                      
 SS:::::::::::::::S  ttt:::t                              l:::::l                                      
S:::::SSSSSS::::::S  t:::::t                              l:::::l                                      
S:::::S     SSSSSSS  t:::::t                              l:::::l                                      
S:::::S        ttttttt:::::tttttttyyyyyyy           yyyyyyyl::::l     eeeeeeeeeeee        ssssssssss   
S:::::S        t:::::::::::::::::t y:::::y         y:::::y l::::l   ee::::::::::::ee    ss::::::::::s  
 S::::SSSS     t:::::::::::::::::t  y:::::y       y:::::y  l::::l  e::::::eeeee:::::eess:::::::::::::s 
  SS::::::SSSSStttttt:::::::tttttt   y:::::y     y:::::y   l::::l e::::::e     e:::::es::::::ssss:::::s
    SSS::::::::SS    t:::::t          y:::::y   y:::::y    l::::l e:::::::eeeee::::::e s:::::s  ssssss 
       SSSSSS::::S   t:::::t           y:::::y y:::::y     l::::l e:::::::::::::::::e    s::::::s      
            S:::::S  t:::::t            y:::::y:::::y      l::::l e::::::eeeeeeeeeee        s::::::s   
            S:::::S  t:::::t    tttttt   y:::::::::y       l::::l e:::::::e           ssssss   s:::::s 
SSSSSSS     S:::::S  t::::::tttt:::::t    y:::::::y       l::::::le::::::::e          s:::::ssss::::::s
S::::::SSSSSS:::::S  tt::::::::::::::t     y:::::y        l::::::l e::::::::eeeeeeee  s::::::::::::::s 
S:::::::::::::::SS     tt:::::::::::tt    y:::::y         l::::::l  ee:::::::::::::e   s:::::::::::ss  
 SSSSSSSSSSSSSSS         ttttttttttt     y:::::y          llllllll    eeeeeeeeeeeeee    sssssssssss    
                                        y:::::y                                                        
                                       y:::::y                                                         
                                      y:::::y                                                          
                                     y:::::y                                                           
                                    yyyyyyy                                                            
-->


<h2 id='predefined-counters'>
Simple Predefined Counter Styles</h2>

	The following stylesheet uses the ''@counter-style'' rule
	to redefine all of the counter styles defined in CSS 2 and CSS 2.1.
	This stylesheet is normative - 
	UAs must include it in their UA stylesheet
	(or at least act as if these rules were defined at that level).


<h3 id='simple-numeric'>
Numeric: ''decimal'', ''decimal-leading-zero'', ''cjk-decimal'', ''lower-roman'', ''upper-roman'', ''armenian'', ''georgian'', ''hebrew''</h3>

	<dl>
		<dt><dfn>''decimal''</dfn>
		<dd>
			Western decimal numbers
			(e.g., 1, 2, 3, ..., 98, 99, 100).

		<dt><dfn>''decimal-leading-zero''</dfn>
		<dd>
			Decimal numbers padded by initial zeros 
			(e.g., 01, 02, 03, ..., 98, 99, 100).
			
		<dt><dfn>''cjk-decimal''</dfn>
		<dd>
			Han decimal numbers
			(e.g., 一, 二, 三, ..., 九八, 九九, 一〇〇).
			
		<dt><dfn>''lower-roman''</dfn>
		<dd>
			Lowercase ASCII Roman numerals
			(e.g., i, ii, iii, ..., xcviii, xcix, c).
			
		<dt><dfn>''upper-roman''</dfn>
		<dd>
			Uppercase ASCII Roman numerals
			(e.g., I, II, III, ..., XCVIII, XCIX, C).
			
		<dt><dfn>''armenian''</dfn>
		<dd>
			Traditional uppercase Armenian numbering
			(e.g., Ա, Բ, Գ, ..., ՂԸ, ՂԹ, Ճ).

		<dt><dfn>''georgian''</dfn>
		<dd>
			Traditional Georgian numbering
			(e.g., ა, ბ, გ, ..., ჟჱ, ჟთ, რ).
			
		<dt><dfn>''hebrew''</dfn>
		<dd>
			Traditional Hebrew numbering
			(e.g., א&lrm;, ב&lrm;, ג&lrm;, ..., צח&lrm;, צט&lrm;, ק&lrm;).
	</dl>

	The ''decimal'' counter-style must not be overridable with a ''@counter-style'' rule,
	so that it is always available as an ultimate fallback style.

	The following stylesheet fragment provides the normative definition of these predefined counter styles:

	<pre class='stylesheet'><bdo dir=ltr>
	@counter-style decimal {
		system: numeric;
		symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
	}

	@counter-style decimal-leading-zero {
		system: fixed -9;
		symbols: '-09' '-08' '-07' '-06' '-05' '-04' '-03' '-02' '-01' '00' '01' '02' '03' '04' '05' '06' '07' '08' '09';
	}

	@counter-style cjk-decimal {
		system: numeric;
		symbols: \3007  \4E00  \4E8C  \4E09  \56DB  \4E94  \516D  \4E03  \516B  \4E5D;
		/* 〇 一 二 三 四 五 六 七 八 九 */
		suffix: '\3001';
		/* "、" */
	}

	@counter-style lower-roman {
		system: additive;
		range: 1 4999;
		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;
	}

	@counter-style upper-roman {
		system: additive;
		range: 1 4999;
		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;
	}

	@counter-style armenian {
		system: additive;
		range: 1 9999;
		additive-symbols: 9000 \554, 8000 \553, 7000 \552, 6000 \551, 5000 \550, 4000 \54F, 3000 \54E, 2000 \54D, 1000 \54C, 900 \54B, 800 \54A, 700 \549, 600 \548, 500 \547, 400 \546, 300 \545, 200 \544, 100 \543, 90 \542, 80 \541, 70 \540, 60 \53F, 50 \53E, 40 \53D, 30 \53C, 20 \53B, 10 \53A, 9 \539, 8 \538, 7 \537, 6 \536, 5 \535, 4 \534, 3 \533, 2 \532, 1 \531;
		/* 9000 Ք, 8000 Փ, 7000 Ւ, 6000 Ց, 5000 Ր, 4000 Տ, 3000 Վ, 2000 Ս, 1000 Ռ, 900 Ջ, 800 Պ, 700 Չ, 600 Ո, 500 Շ, 400 Ն, 300 Յ, 200 Մ, 100 Ճ, 90 Ղ, 80 Ձ, 70 Հ, 60 Կ, 50 Ծ, 40 Խ, 30 Լ, 20 Ի, 10 Ժ, 9 Թ, 8 Ը, 7 Է, 6 Զ, 5 Ե, 4 Դ, 3 Գ, 2 Բ, 1 Ա */
	}

	@counter-style georgian {
		system: additive;
		range: 1 19999;
		additive-symbols: 10000 \10F5, 9000 \10F0, 8000 \10EF, 7000 \10F4, 6000 \10EE, 5000 \10ED, 4000 \10EC, 3000 \10EB, 2000 \10EA, 1000 \10E9, 900 \10E8, 800 \10E7, 700 \10E6, 600 \10E5, 500 \10E4, 400 \10F3, 300 \10E2, 200 \10E1, 100 \10E0, 90 \10DF, 80 \10DE, 70 \10DD, 60 \10F2, 50 \10DC, 40 \10DB, 30 \10DA, 20 \10D9, 10 \10D8, 9 \10D7, 8 \10F1, 7 \10D6, 6 \10D5, 5 \10D4, 4 \10D3, 3 \10D2, 2 \10D1, 1 \10D0;
		/* 10000 ჵ, 9000 ჰ, 8000 ჯ, 7000 ჴ, 6000 ხ, 5000 ჭ, 4000 წ, 3000 ძ, 2000 ც, 1000 ჩ, 900 შ, 800 ყ, 700 ღ, 600 ქ, 500 ფ, 400 ჳ, 300 ტ, 200 ს, 100 რ, 90 ჟ, 80 პ, 70 ო, 60 ჲ, 50 ნ, 40 მ, 30 ლ, 20 კ, 10 ი, 9 თ, 8 ჱ, 7 ზ, 6 ვ, 5 ე, 4 დ, 3 გ, 2 ბ, 1 ა */
	}

	@counter-style hebrew {
		system: additive;
		range: 1 infinite;
		additive-symbols: 400 \5EA, 300 \5E9, 200 \5E8, 100 \5E7, 90 \5E6, 80 \5E4, 70 \5E2, 60 \5E1, 50 \5E0, 40 \5DE, 30 \5DC, 20 \5DB, 19 \5D9\5D8, 18 \5D9\5D7, 17 \5D9\5D6, 16 \5D8\5D6, 15 \5D8\5D5, 10 \5D9, 9 \5D8, 8 \5D7, 7 \5D6, 6 \5D5, 5 \5D4, 4 \5D3, 3 \5D2, 2 \5D1, 1 \5D0;
		/* 400 ת, 300 ש, 200 ר, 100 ק, 90 צ, 80 פ, 70 ע, 60 ס, 50 נ, 40 מ, 30 ל, 20 כ, 19 יט, 18 יח, 17 יז, 16 טז, 15 טו, 10 י, 9 ט, 8 ח, 7 ז, 6 ו, 5 ה, 4 ד, 3 ג, 2 ב, 1 א */
		/* This system manually specifies the values for 19-15 to force the correct display of 15 and 16, which are commonly rewritten to avoid a close resemblance to the Tetragrammaton. */
	}
	</bdo></pre>


<h3 id='simple-alphabetic'>
Alphabetic: ''lower-alpha'', ''lower-latin'', ''upper-alpha'', ''upper-latin'', ''lower-greek'', ''hiragana'', ''hiragana-iroha'', ''katakana'', ''katakana-iroha''</h3>

	<dl>
		<dt><dfn>''lower-alpha''</dfn>
		<dt><dfn>''lower-latin''</dfn>
		<dd>
			Lowercase ASCII letters
			(e.g., a, b, c, ..., z, aa, ab).

		<dt><dfn>''upper-alpha''</dfn>
		<dt><dfn>''upper-latin''</dfn>
		<dd>
			Uppercase ASCII letters
			(e.g., A, B, C, ..., Z, AA, AB).

		<dt><dfn>''lower-greek''</dfn>
		<dd>
			Lowercase classical Greek
			(e.g., α, β, γ, ..., ω, αα, αβ).

		<dt><dfn>''hiragana''</dfn>
		<dd>
			Dictionary-order hiragana lettering
			(e.g., あ, い, う, ..., ん, ああ, あい).

		<dt><dfn>''hiragana-iroha''</dfn>
		<dd>
			Iroha-order hiragana lettering
			(e.g., い, ろ, は, ..., ん, いい, いろ).

		<dt><dfn>''katakana''</dfn>
		<dd>
			Dictionary-order katakana lettering
			(e.g., ア, イ, ウ, ..., ン, アア, アイ).

		<dt><dfn>''katakana-iroha''</dfn>
		<dd>
			Iroha-order katakana lettering
			(e.g., イ, ロ, ハ, ..., ン, イイ, イロ)
	</dl>

	The following stylesheet fragment provides the normative definition of these predefined counter styles:

	<pre class='stylesheet'><bdo dir=ltr>
	@counter-style lower-alpha {
		system: alphabetic;
		symbols: a b c d e f g h i j k l m n o p q r s t u v w x y z;
	}

	@counter-style lower-latin {
		system: override lower-alpha;
	}

	@counter-style upper-alpha {
		system: alphabetic;
		symbols: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z;
	}

	@counter-style upper-latin {
		system: override upper-alpha;
	}

	@counter-style lower-greek {
		system: alphabetic;
		symbols: \3B1  \3B2  \3B3  \3B4  \3B5  \3B6  \3B7  \3B8  \3B9  \3BA  \3BB  \3BC  \3BD  \3BE  \3BF  \3C0  \3C1  \3C3  \3C4  \3C5  \3C6  \3C7  \3C8  \3C9;
		/* α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω */
	}

	@counter-style hiragana {
		system: alphabetic;
		symbols: \3042  \3044  \3046  \3048  \304A  \304B  \304D  \304F  \3051  \3053  \3055  \3057  \3059  \305B  \305D  \305F  \3061  \3064  \3066  \3068  \306A  \306B  \306C  \306D  \306E  \306F  \3072  \3075  \3078  \307B  \307E  \307F  \3080  \3081  \3082  \3084  \3086  \3088  \3089  \308A  \308B  \308C  \308D  \308F  \3092  \3093;
		/* あ い う え お か き く け こ さ し す せ そ た ち つ て と な に ぬ ね の は ひ ふ へ ほ ま み む め も や ゆ よ ら り る れ ろ わ を ん */
		suffix: '、';
	}

	@counter-style hiragana-iroha {
		system: alphabetic;
		symbols: \3044  \308D  \306F  \306B  \307B  \3078  \3068  \3061  \308A  \306C  \308B  \3092  \308F  \304B  \3088  \305F  \308C  \305D  \3064  \306D  \306A  \3089  \3080  \3046  \3090  \306E  \304A  \304F  \3084  \307E  \3051  \3075  \3053  \3048  \3066  \3042  \3055  \304D  \3086  \3081  \307F  \3057  \3091  \3072  \3082  \305B  \3059  \3093;
		/* い ろ は に ほ へ と ち り ぬ る を わ か よ た れ そ つ ね な ら む う ゐ の お く や ま け ふ こ え て あ さ き ゆ め み し ゑ ひ も せ す ん */
		suffix: '、';
	}

	@counter-style katakana {
		system: alphabetic;
		symbols: \30A2  \30A4  \30A6  \30A8  \30AA  \30AB  \30AD  \30AF  \30B1  \30B3  \30B5  \30B7  \30B9  \30BB  \30BD  \30BF  \30C1  \30C4  \30C6  \30C8  \30CA  \30CB  \30CC  \30CD  \30CE  \30CF  \30D2  \30D5  \30D8  \30DB  \30DE  \30DF  \30E0  \30E1  \30E2  \30E4  \30E6  \30E8  \30E9  \30EA  \30EB  \30EC  \30ED  \30EF  \30F2  \30F3;
		/* ア イ ウ エ オ カ キ ク ケ コ サ シ ス セ ソ タ チ ツ テ ト ナ ニ ヌ ネ ノ ハ ヒ フ ヘ ホ マ ミ ム メ モ ヤ ユ ヨ ラ リ ル レ ロ ワ ヲ ン */
		suffix: '、';
	}

	@counter-style katakana-iroha {
		system: alphabetic;
		symbols: \30A4  \30ED  \30CF  \30CB  \30DB  \30D8  \30C8  \30C1  \30EA  \30CC  \30EB  \30F2  \30EF  \30AB  \30E8  \30BF  \30EC  \30BD  \30C4  \30CD  \30CA  \30E9  \30E0  \30A6  \30F0  \30CE  \30AA  \30AF  \30E4  \30DE  \30B1  \30D5  \30B3  \30A8  \30C6  \30A2  \30B5  \30AD  \30E6  \30E1  \30DF  \30B7  \30F1  \30D2  \30E2  \30BB  \30B9  \30F3;
		/* イ ロ ハ ニ ホ ヘ ト チ リ ヌ ル ヲ ワ カ ヨ タ レ ソ ツ ネ ナ ラ ム ウ ヰ ノ オ ク ヤ マ ケ フ コ エ テ ア サ キ ユ メ ミ シ ヱ ヒ モ セ ス ン */
		suffix: '、';
	}
	</bdo></pre>


<h3 id='simple-symbolic'>
Symbolic: ''disc'', ''circle'', ''square'', ''disclosure-open'', ''disclosure-closed''</h3>

	<dl>
		<dt><dfn>''disc''</dfn>
		<dd>A filled circle, similar to • U+2022 BULLET.

		<dt><dfn>''circle''</dfn>
		<dd>A hollow circle, similar to ◦ U+25E6 WHITE BULLET.

		<dt><dfn>''square''</dfn>
		<dd>A filled square, similar to ◾ U+25FE BLACK MEDIUM SMALL SQUARE.

		<dt><dfn>''disclosure-open''</dfn>
		<dt><dfn>''disclosure-closed''</dfn>
		<dd>
			Symbols appropriate for indicating an open or closed disclosure widget,
			such as the HTML <code>&lt;details></code> element.
	</dl>

	The following stylesheet fragment provides the normative definition of these predefined counter styles:

	<pre class='stylesheet'>
	@counter-style disc {
		system: cyclic;
		symbols: \2022;
		/* • */
		suffix: "";
	}

	@counter-style circle {
		system: cyclic;
		symbols: \25E6;
		/* ◦ */
		suffix: "";
	}

	@counter-style square {
		system: cyclic;
		symbols: \25FE;
		/* ◾ */
		suffix: "";
	}

	@counter-style disclosure-open {
		system: cyclic;
		suffix: "";
		/* for symbols, see normative text below */
	}

	@counter-style disclosure-closed {
		system: cyclic;
		suffix: "";
		/* for symbols, see normative text below */
	}
	</pre>

	Alternately, a browser may render these styles using a browser-generated image instead of the defined character.
	If so, the image must look similar to the character,
	and must be sized to attractively fill a 1em by 1em square.

	For the ''disclosure-open'' and ''disclosure-closed'' counter styles,
	the marker must be an image or character suitable for indicating
	the open and closed states of a disclosure widget,
	such as HTML's <code>&lt;details></code> element.
	If the image is directional,
	it must respond to the <i>writing mode</i> of the element [[!CSS3-WRITING-MODES]],
	similar to the <a href="http://dev.w3.org/csswg/css4-images/#bidi-images">bidi-sensitive images</a> feature of the Images 4 module.
	For example, the ''disclosure-closed'' style might use the characters
	U+25B8 BLACK RIGHT-POINTING SMALL TRIANGLE (▸)
	and U+25C2 BLACK LEFT-POINTING SMALL TRIANGLE (◂),
	while the ''disclosure-open'' style might use the character
	U+25BE BLACK DOWN-POINTING SMALL TRIANGLE (▾).

<!-- ======================================================================= -->

<h2 id='complex-predefined-counters'>
Complex Predefined Counter Styles</h2>

	While authors may define their own counter styles using the ''@counter-style'' rule 
	or rely on the set of predefined counter styles, 
	a few counter styles are described by rules that are too complex to be captured by the predefined algorithms.
	These counter styles are described in this section.

	Some of the counter styles specified in this section 
	have custom algorithms for generating counter values,
	but are otherwise identical to a counter style defined via the ''@counter-style'' rule. 
	For example, an author can reference one of these styles in an ''override'' system, 
	reusing the algorithm but swapping out some of the other descriptors.

	All of the counter styles defined in this section have a <a title='speak-as'>spoken form</i> of ''numeric'',
	and are all <i>negative-capable</i>.


<h3 id='complex-cjk'>
Longhand East Asian Counter Styles: ''japanese-informal'', ''japanese-formal'', ''korean-hangul-formal'', ''korean-hanja-informal'', ''korean-hanja-formal'', ''simp-chinese-informal'', ''simp-chinese-formal'', ''trad-chinese-informal'', ''trad-chinese-formal''</h3>

	Chinese, Japanese, and Korean have longhand counter styles, 
	which have a structure similar to "one hundred thirteen thousand and twenty-three" in English.  
	Each has both formal and informal variants. 
	The formal styles are typically used in financial and legal documents, 
	as their characters are more difficult to alter into each other.

	<dl>
		<dt>japanese-informal
		<dd>
			Informal Japanese Kanji numbering
			(e.g., 一万一千百十一)

		<dt>japanese-formal
		<dd>
			Formal Japanese Kanji numbering
			(e.g. 壱萬壱阡壱百壱拾壱)

		<dt>korean-hangul-formal
		<dd>
			Korean Hangul numbering
			(e.g., 일만 일천일백일십일)

		<dt>korean-hanja-informal
		<dd>
			Informal Korean Hanja numbering
			(e.g., 萬 一千百十一)

		<dt>korean-hanja-formal
		<dd>
			Forman Korean Han (Hanja) numbering
			(e.g., 壹萬 壹仟壹百壹拾壹)

		<dt>simp-chinese-informal
		<dd>
			Simplified Chinese informal numbering
			(e.g., 一万一千一百一十一)

		<dt>simp-chinese-formal
		<dd>
			Simplified Chinese formal numbering
			(e.g. 壹万壹仟壹佰壹拾壹)

		<dt>trad-chinese-informal
		<dd>
			Traditional Chinese informal numbering
			(e.g., 一萬一千一百一十一)

		<dt>trad-chinese-formal
		<dd>
			Traditional Chinese informal numbering
			(e.g., 壹萬壹仟壹佰壹拾壹)

		<dt>cjk-ideographic
		<dd>
			This counter style is identical to ''trad-chinese-informal''. 
			(It exists for legacy reasons.)
	</dl>

	Note: The examples above show the number 11,111,
	which is not often used as a counter value,
	but illustrates the differences among the systems.

	<div class="example">
		The following table shows examples of these styles, particularly some ways in which they differ.

		<table class="data">
			<thead>
				<tr><th>Counter Style
				    <th>0
				    <th>1
				    <th>2
				    <th>3
				    <th>10
				    <th>11
				    <th>99
				    <th>100
				    <th>101
				    <th>10,000
			</thead>
			<tbody>
				<tr><th scope="row">''japanese-informal''
				    <td>〇
				    <td>一
				    <td>二
				    <td>三
				    <td>一十
				    <td>一十一
				    <td>九十九
				    <td>一百
				    <td>一百一
				    <td>一万
				<tr><th scope="row">''japanese-formal''
				    <td>零
				    <td>壱
				    <td>弐
				    <td>参
				    <td>壱拾
				    <td>壱拾壱
				    <td>九拾九
				    <td>壱百
				    <td>壱百壱
				    <td>壱萬
				<tr><th scope="row">''korean-hangul-formal''
				    <td>영
				    <td>일
				    <td>이
				    <td>삼
				    <td>일십
				    <td>일십일
				    <td>구십구
				    <td>일백
				    <td>일백일
				    <td>일만
				<tr><th scope="row">''korean-hanja-informal''
				    <td>영
				    <td>一
				    <td>二
				    <td>三
				    <td>一十
				    <td>一十一
				    <td>九十九
				    <td>一百
				    <td>一百一
				    <td>萬
				<tr><th scope="row">''korean-hanja-formal''
				    <td>零
				    <td>壹
				    <td>貳
				    <td>參 
				    <td>壹拾
				    <td>壹拾壹
				    <td>九拾九
				    <td>壹百
				    <td>壹百壹
				    <td>壹萬
				<tr><th scope="row">''simp-chinese-informal''
				    <td>零
				    <td>一
				    <td>二
				    <td>三
				    <td>十
				    <td>十一
				    <td>九十九
				    <td>一百
				    <td>一百零一
				    <td>一万
				<tr><th scope="row">''simp-chinese-formal''
				    <td>零
				    <td>壹
				    <td>贰
				    <td>叁
				    <td>壹拾
				    <td>壹拾壹
				    <td>玖拾玖
				    <td>壹佰
				    <td>壹佰零壹
				    <td>壹万
				<tr><th scope="row">''trad-chinese-informal''
				    <td>零
				    <td>一
				    <td>二
				    <td>三
				    <td>十
				    <td>十一
				    <td>九十九
				    <td>一百
				    <td>一百零一
				    <td>一萬
				<tr><th scope="row">''trad-chinese-formal''
				    <td>零
				    <td>壹
				    <td>貳
				    <td>參
				    <td>壹拾
				    <td>壹拾壹
				    <td>玖拾玖
				    <td>壹佰
				    <td>壹佰零壹
				    <td>壹萬
			</tbody>
		</table>
	</div>

	The Korean and Japanese variants of these counter styles can,
	if limited from 0 to 9999,
	be expressed as ''@counter-style'' rules.
	Thus, the implementation details are split into two sections:
	a required section defining the styles over this limited range,
	and an optional section defining them over a much larger range
	that requires custom algorithms for all of the styles.

<h4 id='limited-cjk'>
Limited-range Implementation (required)</h4>

<h5 id='limited-japanese' class="no-num no-toc">
Japanese</h5>

	<pre class='stylesheet'>
	@counter-style <dfn>japanese-informal</dfn> {
		system: additive;
		range: -9999 9999;
		additive-symbols: 9000 \4E5D\5343, 8000 \516B\5343, 7000 \4E03\5343, 6000 \516D\5343, 5000 \4E94\5343, 4000 \56DB\5343, 3000 \4E09\5343, 2000 \4E8C\5343, 1000 \5343, 900 \4E5D\767E, 800 \516B\767E, 700 \4E03\767E, 600 \516D\767E, 500 \4E94\767E, 400 \56DB\767E, 300 \4E09\767E, 200 \4E8C\767E, 100 \767E, 90 \4E5D\5341, 80 \516B\5341, 70 \4E03\5341, 60 \516D\5341, 50 \4E94\5341, 40 \56DB\5341, 30 \4E09\5341, 20 \4E8C\5341, 10 \5341, 9 \4E5D, 8 \516B, 7 \4E03, 6 \516D, 5 \4E94, 4 \56DB, 3 \4E09, 2 \4E8C, 1 \4E00, 0 \3007;
		/* 9000 九千, 8000 八千, 7000 七千, 6000 六千, 5000 五千, 4000 四千, 3000 三千, 2000 二千, 1000 千, 900 九百, 800 八百, 700 七百, 600 六百, 500 五百, 400 四百, 300 三百, 200 二百, 100 百, 90 九十, 80 八十, 70 七十, 60 六十, 50 五十, 40 四十, 30 三十, 20 二十, 10 十, 9 九, 8 八, 7 七, 6 六, 5 五, 4 四, 3 三, 2 二, 1 一, 0 〇 */
		suffix: '\3001';
		/* 、 */
		negative: "\30DE\30A4\30CA\30B9";
		/* マイナス */
		fallback: cjk-decimal;
	}

	@counter-style <dfn>japanese-formal</dfn> {
		system: additive;
		range: -9999 9999;
		additive-symbols: 9000 \4E5D\9621, 8000 \516B\9621, 7000 \4E03\9621, 6000 \516D\9621, 5000 \4F0D\9621, 4000 \56DB\9621, 3000 \53C2\9621, 2000 \5F10\9621, 1000 \58F1\9621, 900 \4E5D\767E, 800 \516B\767E, 700 \4E03\767E, 600 \516D\767E, 500 \4F0D\767E, 400 \56DB\767E, 300 \53C2\767E, 200 \5F10\767E, 100 \58F1\767E, 90 \4E5D\62FE, 80 \516B\62FE, 70 \4E03\62FE, 60 \516D\62FE, 50 \4F0D\62FE, 40 \56DB\62FE, 30 \53C2\62FE, 20 \5F10\62FE, 10 \58F1\62FE, 9 \4E5D, 8 \516B, 7 \4E03, 6 \516D, 5 \4F0D, 4 \56DB, 3 \53C2, 2 \5F10, 1 \58F1, 0 \96F6;
		/* 9000 九阡, 8000 八阡, 7000 七阡, 6000 六阡, 5000 伍阡, 4000 四阡, 3000 参阡, 2000 弐阡, 1000 壱阡, 900 九百, 800 八百, 700 七百, 600 六百, 500 伍百, 400 四百, 300 参百, 200 弐百, 100 壱百, 90 九拾, 80 八拾, 70 七拾, 60 六拾, 50 伍拾, 40 四拾, 30 参拾, 20 弐拾, 10 壱拾, 9 九, 8 八, 7 七, 6 六, 5 伍, 4 四, 3 参, 2 弐, 1 壱, 0 零 */
		suffix: '\3001';
		/* 、 */
		negative: "\30DE\30A4\30CA\30B9";
		/* マイナス */
		fallback: cjk-decimal;
	}
	</pre>


<h5 id=limited-korean class="no-num no-toc">
Korean</h5>

	<pre class='stylesheet'>
	@counter-style <dfn>korean-hangul-formal</dfn> {
		system: additive;
		range: 0 9999;
		additive-symbols: 9000 \AD6C\CC9C, 8000 \D314\CC9C, 7000 \CE60\CC9C, 6000 \C721\CC9C, 5000 \C624\CC9C, 4000 \C0AC\CC9C, 3000 \C0BC\CC9C, 2000 \C774\CC9C, 1000 \C77C\CC9C, 900 \AD6C\BC31, 800 \D314\BC31, 700 \CE60\BC31, 600 \C721\BC31, 500 \C624\BC31, 400 \C0AC\BC31, 300 \C0BC\BC31, 200 \C774\BC31, 100 \C77C\BC31, 90 \AD6C\C2ED, 80 \D314\C2ED, 70 \CE60\C2ED, 60 \C721\C2ED, 50 \C624\C2ED, 40 \C0AC\C2ED, 30 \C0BC\C2ED, 20 \C774\C2ED, 10 \C77C\C2ED, 9 \AD6C, 8 \D314, 7 \CE60, 6 \C721, 5 \C624, 4 \C0AC, 3 \C0BC, 2 \C774, 1 \C77C, 0 \C601;
		/* 9000 구천, 8000 팔천, 7000 칠천, 6000 육천, 5000 오천, 4000 사천, 3000 삼천, 2000 이천, 1000 일천, 900 구백, 800 팔백, 700 칠백, 600 육백, 500 오백, 400 사백, 300 삼백, 200 이백, 100 일백, 90 구십, 80 팔십, 70 칠십, 60 육십, 50 오십, 40 사십, 30 삼십, 20 이십, 10 일십, 9 구, 8 팔, 7 칠, 6 육, 5 오, 4 사, 3 삼, 2 이, 1 일, 0 영 */
		suffix: '\3001';
		/* 、 */
	}

	@counter-style <dfn>korean-hanja-informal</dfn> {
		system: additive;
		range: 0 9999;
		additive-symbols: 9000 \4E5D\5343, 8000 \516B\5343, 7000 \4E03\5343, 6000 \516D\5343, 5000 \4E94\5343, 4000 \56DB\5343, 3000 \4E09\5343, 2000 \4E8C\5343, 1000 \5343, 900 \4E5D\767E, 800 \516B\767E, 700 \4E03\767E, 600 \516D\767E, 500 \4E94\767E, 400 \56DB\767E, 300 \4E09\767E, 200 \4E8C\767E, 100 \767E, 90 \4E5D\5341, 80 \516B\5341, 70 \4E03\5341, 60 \516D\5341, 50 \4E94\5341, 40 \56DB\5341, 30 \4E09\5341, 20 \4E8C\5341, 10 \5341, 9 \4E5D, 8 \516B, 7 \4E03, 6 \516D, 5 \4E94, 4 \56DB, 3 \4E09, 2 \4E8C, 1 \4E00, 0 \96F6;
		/* 9000 九千, 8000 八千, 7000 七千, 6000 六千, 5000 五千, 4000 四千, 3000 三千, 2000 二千, 1000 千, 900 九百, 800 八百, 700 七百, 600 六百, 500 五百, 400 四百, 300 三百, 200 二百, 100 百, 90 九十, 80 八十, 70 七十, 60 六十, 50 五十, 40 四十, 30 三十, 20 二十, 10 十, 9 九, 8 八, 7 七, 6 六, 5 五, 4 四, 3 三, 2 二, 1 一, 0 零 */
		suffix: '\3001';
		/* 、 */
	}

	@counter-style <dfn>korean-hanja-formal</dfn> {
		system: additive;
		range: 0 9999;
		additive-symbols: 9000 \4E5D\4EDF, 8000 \516B\4EDF, 7000 \4E03\4EDF, 6000 \516D\4EDF, 5000 \4E94\4EDF, 4000 \56DB\4EDF, 3000 \53C3\4EDF, 2000 \8CB3\4EDF, 1000 \58F9\4EDF, 900 \4E5D\767E, 800 \516B\767E, 700 \4E03\767E, 600 \516D\767E, 500 \4E94\767E, 400 \56DB\767E, 300 \53C3\767E, 200 \8CB3\767E, 100 \58F9\767E, 90 \4E5D\62FE, 80 \516B\62FE, 70 \4E03\62FE, 60 \516D\62FE, 50 \4E94\62FE, 40 \56DB\62FE, 30 \53C3\62FE, 20 \8CB3\62FE, 10 \58F9\62FE, 9 \4E5D, 8 \516B, 7 \4E03, 6 \516D, 5 \4E94, 4 \56DB, 3 \53C3, 2 \8CB3, 1 \58F9, 0 \96F6;
		/* 9000 九仟, 8000 八仟, 7000 七仟, 6000 六仟, 5000 五仟, 4000 四仟, 3000 參仟, 2000 貳仟, 1000 壹仟, 900 九百, 800 八百, 700 七百, 600 六百, 500 五百, 400 四百, 300 參百, 200 貳百, 100 壹百, 90 九拾, 80 八拾, 70 七拾, 60 六拾, 50 五拾, 40 四拾, 30 參拾, 20 貳拾, 10 壹拾, 9 九, 8 八, 7 七, 6 六, 5 五, 4 四, 3 參, 2 貳, 1 壹, 0 零 */
		suffix: '\3001';
		/* 、 */
	}
	</pre>


<h5 id='limited-chinese' class="no-num no-toc">
Chinese</h5>

	The Chinese longhand styles are defined over the range -9999 to 9999.  
	For numbers outside this range, the ''cjk-decimal'' style is used.  All of the
	styles are defined by almost identical algorithms (specified as a single
	algorithm here, with the differences called out when relevant), but use 
	different sets of characters.  The list following the algorithm gives the
	name of each counter style using this algorithm, and the individual character
	sets used by each style.

	<ol>
		<li>If the counter value is 0, the representation is the character for 0
		specified for the given counter style.  Skip the rest of this algorithm.

		<li>Initially represent the counter value as a decimal number.  For each 
		digit that is not 0, append the appropriate digit marker to the digit.  
		The ones digit has no marker.

		<li>For the informal styles, if the counter value is between ten and 
		nineteen, remove the tens digit (leave the digit marker).

		<li>Drop any trailing zeros and collapse any remaining zeros into a single
		zero digit.

		<li>Replace the digits 0-9 with the appropriate character for the given
		counter style.  Return the resultant string as the representation of the
		counter value.
	</ol>

	For all of these counter styles, the 'suffix' is "、" U+3001, 
	the 'fallback' is ''cjk-decimal'', 
	the 'range' is ''-9999 9999'',
	and the 'negative' value is given in the table of symbols for each style.

	The following tables define the characters used in these styles:

	<table class='data'>
		<thead>
			<tr>
				<th rowspan=2 scope=col>Values
				<th colspan=4 scope=col>Codepoints
			<tr>
				<th><dfn>simp-chinese-informal</dfn>
				<th><dfn>simp-chinese-formal</dfn>
				<th><dfn>trad-chinese-informal</dfn>
				<th><dfn>trad-chinese-formal</dfn>
		</thead>
		<tbody>
			<tr>
				<th scope=row>Digit 0
				<td>零 U+96F6
				<td>零 U+96F6
				<td>零  U+96F6
				<td>零  U+96F6
			<tr>
				<th scope=row>Digit 1
				<td>一 U+4E00
				<td>壹 U+58F9
				<td>一 U+4E00
				<td>壹  U+58F9
			<tr>
				<th scope=row>Digit 2
				<td>二 U+4E8C
				<td>贰 U+8D30
				<td>二 U+4E8C
				<td>貳  U+8CB3
			<tr>
				<th scope=row>Digit 3
				<td>三 U+4E09
				<td>叁 U+53C1
				<td>三 U+4E09
				<td>參  U+53C3
			<tr>
				<th scope=row>Digit 4
				<td>四 U+56DB
				<td>肆 U+8086
				<td>四 U+56DB
				<td>肆  U+8086
			<tr>
				<th scope=row>Digit 5
				<td>五 U+4E94
				<td>伍 U+4F0D
				<td>五 U+4E94
				<td>伍  U+4F0D
			<tr>
				<th scope=row>Digit 6
				<td>六 U+516D
				<td>陆 U+9646
				<td>六 U+516D
				<td>陸  U+9678
			<tr>
				<th scope=row>Digit 7
				<td>七 U+4E03
				<td>柒 U+67D2
				<td>七 U+4E03
				<td>柒  U+67D2
			<tr>
				<th scope=row>Digit 8
				<td>八 U+516B
				<td>捌 U+634C
				<td>八 U+516B
				<td>捌  U+634C
			<tr>
				<th scope=row>Digit 9
				<td>九 U+4E5D
				<td>玖 U+7396
				<td>九 U+4E5D
				<td>玖  U+7396
			<tr>
				<th scope=row>Tens Digit Marker
				<td>十 U+5341
				<td>拾 U+62FE
				<td>十 U+5341
				<td>拾  U+62FE
			<tr>
				<th scope=row>Hundreds Digit Marker
				<td>百 U+767E
				<td>佰 U+4F70
				<td>百 U+767E 
				<td>佰  U+4F70
			<tr>
				<th scope=row>Thousands Digit Marker
				<td>千 U+5343
				<td>仟 U+4EDF
				<td>千 U+5343
				<td>仟  U+4EDF
			<tr>
				<th scope=row>Negative Sign
				<td>负 U+8D1F
				<td>负 U+8D1F
				<td>負 U+8CA0
				<td>負 U+8CA0
		</tbody>
	</table>

	<div class='note'>
		For reference, here are the first 120 values for the ''simp-chinese-informal'' style:

		<pre>
  1　　　　 一    41　　 四十一    81　　 八十一
  2　　　　 二    42　　 四十二    82　　 八十二
  3　　　　 三    43　　 四十三    83　　 八十三
  4　　　　 四    44　　 四十四    84　　 八十四
  5　　　　 五    45　　 四十五    85　　 八十五
  6　　　　 六    46　　 四十六    86　　 八十六
  7　　　　 七    47　　 四十七    87　　 八十七
  8　　　　 八    48　　 四十八    88　　 八十八
  9　　　　 九    49　　 四十九    89　　 八十九
 10　　　　 十    50　　　 五十    90　　　 九十
 11　　　 十一    51　　 五十一    91　　 九十一
 12　　　 十二    52　　 五十二    92　　 九十二
 13　　　 十三    53　　 五十三    93　　 九十三
 14　　　 十四    54　　 五十四    94　　 九十四
 15　　　 十五    55　　 五十五    95　　 九十五
 16　　　 十六    56　　 五十六    96　　 九十六
 17　　　 十七    57　　 五十七    97　　 九十七
 18　　　 十八    58　　 五十八    98　　 九十八
 19　　　 十九    59　　 五十九    99　　 九十九
 20　　　 二十    60　　　 六十   100　　　 一百
 21　　 二十一    61　　 六十一   101　 一百零一
 22　　 二十二    62　　 六十二   102　 一百零二
 23　　 二十三    63　　 六十三   103　 一百零三
 24　　 二十四    64　　 六十四   104　 一百零四
 25　　 二十五    65　　 六十五   105　 一百零五
 26　　 二十六    66　　 六十六   106　 一百零六
 27　　 二十七    67　　 六十七   107　 一百零七
 28　　 二十八    68　　 六十八   108　 一百零八
 29　　 二十九    69　　 六十九   109　 一百零九
 30　　　 三十    70　　　 七十   110　 一百一十
 31　　 三十一    71　　 七十一   111 一百一十一
 32　　 三十二    72　　 七十二   112 一百一十二
 33　　 三十三    73　　 七十三   113 一百一十三
 34　　 三十四    74　　 七十四   114 一百一十四
 35　　 三十五    75　　 七十五   115 一百一十五
 36　　 三十六    76　　 七十六   116 一百一十六
 37　　 三十七    77　　 七十七   117 一百一十七
 38　　 三十八    78　　 七十八   118 一百一十八
 39　　 三十九    79　　 七十九   119 一百一十九
 40　　　 四十    80　　　 八十   120　 一百二十</pre>
	</div>		

<!-- ====================================================================== -->

<h4 id='extended-cjk'>
Extended Implementation (optional)</h4>

	Some counter styles described in earlier chapters have been limited to an artifically small (though still useful) range to reduce the overall complexity of the spec and the task of implementing those styles.  However, some implementations might consider the extra complexity worthwhile  for the additional range it offers to authors.  To accomodate this, this section describes how to extend the limited counter-styles to a larger range.

	This entire section is normative, but <strong>optional</strong>.  User-agents may ignore it and still be conformant.  If a user-agent implements some of the extended forms described in this section, they must be implemented as described here.

	The Chinese longhand styles are defined out to 10k with a <a href='#limited-chinese'>specialized algorithm</a>, while the Japanese and Korean longhand styles are defined similarly as ''additive'' styles.  However, these styles are defined out to 10<sup>16</sup> in common usage.  The following section describes an alternative algorithm for these styles.

	The Chinese and Japanese styles are defined for all numbers between 
	-10<sup>16</sup> and 10<sup>16</sup>, exclusive; the Korean styles are 
	defined for all non-negative numbers less than 10<sup>16</sup>.  For numbers
	outside this range, the ''cjk-decimal'' style is used.  All of the
	styles are defined by almost identical algorithms (specified as a single
	algorithm here, with the differences called out when relevant), but use 
	different sets of characters.  The list following the algorithm gives the
	name of each counter style using this algorithm, and the individual character
	sets used by each style.

	<ol>
		<li>If the counter value is 0, the representation is the character for 0
		specified for the given counter style.  Skip the rest of this algorithm.

		<li>Initially represent the counter value as a decimal number.  Starting
		from the right (ones place), split the decimal number into groups of
		four digits.

		<li>For each group with a non-zero value, append the appropriate group
		marker to the group.  The ones group has no marker.

		<li>Within each group, for each digit that is not 0, append the appropriate
		digit marker to the digit.  The ones digit of each group has no marker.

		<li>Drop ones:
			<ul>
				<li>For the Chinese informal styles, for any group with a value
				between ten and nineteen, remove the tens digit (leave the digit
				marker).

				<li>For the Japanese informal and Korean informal styles, if any
				of the digit markers are preceded by the digit 1, and that digit
				is not the first digit of the group, remove the digit (leave the
				digit marker).

				<li>For Korean informal styles, if the value of the ten-thousands
				group is 1, drop the digit (leave the digit marker).
			</ul>
		

		<li>Drop zeros:
			<ul>
				<li>For the Japanese and Korean styles, drop all zero digits.

				<li>For the Chinese styles, drop any trailing zeros for all
				non-zero groups and collapse (across groups) each remaining
				consecutive group of zeros into a single zero digit.
			</ul>

		<li>For the Korean styles, insert a space (" " U+0020) between each group.

		<li>Replace the digits 0-9 with the appropriate character for the given
		counter style.  Return the resultant string as the representation of the
		counter value.
	</ol>

	For all of these counter styles, 
	the 'suffix' is "、" U+3001, 
	the 'fallback' is ''cjk-decimal'', 
	and the 'negative' is given in the tables below, 
	or else is the initial value of the descriptor.  
	For Chinese and Japanese,
	the 'range' is ''-9999999999999999 9999999999999999'' (-10<sup>16</sup>+1 and 10<sup>16</sup>-1),
	while for Korean it's ''0 9999999999999999'' (again, 10<sup>16</sup>-1).

	The following tables define the characters used in these styles:

	<table class='data'>
		<thead>
			<tr>
				<th rowspan=2 scope=col>Values
				<th colspan=4 scope=col>Codepoints
			<tr>
				<th>simp-chinese-informal
				<th>simp-chinese-formal
				<th>trad-chinese-informal
				<th>trad-chinese-formal
		</thead>
		<tbody>
			<tr>
				<th scope=row>Digit 0
				<td>零 U+96F6
				<td>零 U+96F6
				<td>零 U+96F6
				<td>零 U+96F6
			<tr>
				<th scope=row>Digit 1
				<td>一 U+4E00
				<td>壹 U+58F9
				<td>一 U+4E00
				<td>壹 U+58F9
			<tr>
				<th scope=row>Digit 2
				<td>二 U+4E8C
				<td>贰 U+8D30
				<td>二 U+4E8C
				<td>貳 U+8CB3
			<tr>
				<th scope=row>Digit 3
				<td>三 U+4E09
				<td>叁 U+53C1
				<td>三 U+4E09
				<td>參 U+53C3
			<tr>
				<th scope=row>Digit 4
				<td>四 U+56DB
				<td>肆 U+8086
				<td>四 U+56DB
				<td>肆 U+8086
			<tr>
				<th scope=row>Digit 5
				<td>五 U+4E94
				<td>伍 U+4F0D
				<td>五 U+4E94
				<td>伍 U+4F0D
			<tr>
				<th scope=row>Digit 6
				<td>六 U+516D
				<td>陆 U+9646
				<td>六 U+516D
				<td>陸 U+9678
			<tr>
				<th scope=row>Digit 7
				<td>七 U+4E03
				<td>柒 U+67D2
				<td>七 U+4E03
				<td>柒 U+67D2
			<tr>
				<th scope=row>Digit 8
				<td>八 U+516B
				<td>捌 U+634C
				<td>八 U+516B
				<td>捌 U+634C
			<tr>
				<th scope=row>Digit 9
				<td>九 U+4E5D
				<td>玖 U+7396
				<td>九 U+4E5D
				<td>玖 U+7396
			<tr>
				<th scope=row>Second Digit Marker
				<td>十 U+5341
				<td>拾 U+62FE
				<td>十 U+5341
				<td>拾 U+62FE
			<tr>
				<th scope=row>Third Digit Marker
				<td>百 U+767E
				<td>佰 U+4F70
				<td>百 U+767E 
				<td>佰 U+4F70
			<tr>
				<th scope=row>Fourth Digit Marker
				<td>千 U+5343
				<td>仟 U+4EDF
				<td>千 U+5343
				<td>仟 U+4EDF
			<tr>
				<th scope=row>Second Group Marker
				<td>万 U+4E07
				<td>万 U+4E07
				<td>萬 U+842C
				<td>萬 U+842C
			<tr>
				<th scope=row>Third Group Marker
				<td>亿 U+4EBF
				<td>亿 U+4EBF
				<td>億 U+5104
				<td>億 U+5104
			<tr>
				<th scope=row>Fourth Group Marker
				<td>万亿 U+4E07 U+4EBF
				<td>万亿 U+4E07 U+4EBF
				<td>兆 U+5146
				<td>兆 U+5146
			<tr>
				<th scope=row>Negative Sign
				<td>负 U+8D1F
				<td>负 U+8D1F
				<td>負 U+8CA0
				<td>負 U+8CA0
		</tbody>
	</table>

	<table class='data'>
		<thead>
			<tr>
				<th rowspan=2 scope=col>Values
				<th colspan=2 scope=col>Codepoints
			<tr>
				<th>japanese-informal
				<th>japanese-formal
		</thead>
		<tbody>
			<tr>
				<th scope=row>Digit 0
				<td>〇 U+3007
				<td>零 U+96F6
			<tr>
				<th scope=row>Digit 1
				<td>一 U+4E00
				<td>壱 U+58F1
			<tr>
				<th scope=row>Digit 2
				<td>二 U+4E8C
				<td>弐 U+5F10
			<tr>
				<th scope=row>Digit 3
				<td>三 U+4E09
				<td>参 U+53C2
			<tr>
				<th scope=row>Digit 4
				<td>四 U+56DB
				<td>四 U+56DB
			<tr>
				<th scope=row>Digit 5
				<td>五 U+4E94
				<td>伍 U+4f0D
			<tr>
				<th scope=row>Digit 6
				<td>六 U+516D
				<td>六 U+516D
			<tr>
				<th scope=row>Digit 7
				<td>七 U+4E03
				<td>七 U+4E03
			<tr>
				<th scope=row>Digit 8
				<td>八 U+516B
				<td>八 U+516B
			<tr>
				<th scope=row>Digit 9
				<td>九 U+4E5D
				<td>九 U+4E5D
			<tr>
				<th scope=row>Second Digit Marker
				<td>十 U+5341
				<td>拾 U+62FE
			<tr>
				<th scope=row>Third Digit Marker
				<td>百 U+767E
				<td>百 U+767E
			<tr>
				<th scope=row>Fourth Digit Marker
				<td>千 U+5343
				<td>阡 U+9621
			<tr>
				<th scope=row>Second Group Marker
				<td>万 U+4E07
				<td>萬 U+842C
			<tr>
				<th scope=row>Third Group Marker
				<td>億 U+5104
				<td>億 U+5104
			<tr>
				<th scope=row>Fourth Group Marker
				<td>兆 U+5146
				<td>兆 U+5146
			<tr>
				<th scope=row>Negative Sign
				<td colspan=2>マイナス U+30DE U+30A4 U+30CA U+30B9
		</tbody>
	</table>

	<table class='data'>
		<thead>
			<tr>
				<th rowspan=2 scope=col>Values
				<th colspan=3 scope=col>Codepoints
			<tr>
				<th>korean-hangul-formal
				<th>korean-hanja-informal
				<th>korean-hanja-formal
		</thead>
		<tbody>
			<tr>
				<th scope=row>Digit 0
				<td>영 U+C601
				<td>零 U+96F6
				<td>零 U+96F6
			<tr>
				<th scope=row>Digit 1
				<td>일 U+C77C
				<td>一 U+4E00
				<td>壹 U+58F9
			<tr>
				<th scope=row>Digit 2
				<td>이 U+C774
				<td>二 U+4E8C
				<td>貳 U+8CB3
			<tr>
				<th scope=row>Digit 3
				<td>삼 U+C0BC
				<td>三 U+4E09
				<td>參 U+53C3
			<tr>
				<th scope=row>Digit 4
				<td>사 U+C0AC
				<td>四 U+56DB
				<td>四 U+56DB
			<tr>
				<th scope=row>Digit 5
				<td>오 U+C624
				<td>五 U+4E94
				<td>五 U+4E94
			<tr>
				<th scope=row>Digit 6
				<td>육 U+C721
				<td>六 U+516D
				<td>六 U+516D
			<tr>
				<th scope=row>Digit 7
				<td>칠 U+CE60
				<td>七 U+4E03
				<td>七 U+4E03
			<tr>
				<th scope=row>Digit 8
				<td>팔 U+D314
				<td>八 U+516B
				<td>八 U+516B
			<tr>
				<th scope=row>Digit 9
				<td>구 U+AD6C
				<td>九 U+4E5D
				<td>九 U+4E5D
			<tr>
				<th scope=row>Second Digit Marker
				<td>십 U+C2ED
				<td>十 U+5341
				<td>拾 U+62FE
			<tr>
				<th scope=row>Third Digit Marker
				<td>백 U+BC31
				<td>百 U+767E
				<td>百 U+767E
			<tr>
				<th scope=row>Fourth Digit Marker
				<td>천 U+CC9C
				<td>千 U+5343
				<td>仟 U+4EDF
			<tr>
				<th scope=row>Second Group Marker
				<td>만 U+B9CC
				<td>萬 U+842C
				<td>萬 U+842C
			<tr>
				<th scope=row>Third Group Marker
				<td>억 U+C5B5
				<td>億 U+5104
				<td>億 U+5104
			<tr>
				<th scope=row>Fourth Group Marker
				<td>조 U+C870
				<td>兆 U+5146
				<td>兆 U+5146
		</tbody>
	</table>


<!-- ======================================================================= -->


<h3 id='ethiopic-numeric-counter-style'>
Ethiopic Numeric Counter Style: ''ethiopic-numeric''</h3>

	The <dfn>ethiopic-numeric</dfn> counter style is defined for all positive non-zero numbers.
	The following algorithm converts decimal digits to ethiopic numbers:

	<ol>
		<li>Split the number into groups of two digits, starting with the least
		significant decimal digit.

		<li>Index each group sequentially, starting from the least significant
		as group number zero.

		<li>If the group has an odd index (as given in the previous step) and
		has the value 1, or if the group is the most significant one and has
		the value 1, or if the group has the value zero, then remove the digit
		(but leave the group, so it still has a separator appended below).

		<li>For each remaining digit, substitute the relevant ethiopic character
		from the list below.
			<table class=data>
				<thead>
					<tr>
						<th colspan="3">Tens
						<th colspan="3">Units
					<tr>
						<th>Values
						<th colspan="2">Codepoints
						<th>Values
						<th colspan="2">Codepoints
				<tbody>
					<tr>
						<td>10
						<td>፲
						<td>U+1372
						<td>1
						<td>፩
						<td>U+1369
					<tr>
						<td>20
						<td>፳
						<td>U+1373
						<td>2
						<td>፪
						<td>U+136A
					<tr>
						<td>30
						<td>፴
						<td>U+1374
						<td>3
						<td>፫
						<td>U+136B
					<tr>
						<td>40
						<td>፵
						<td>U+1375
						<td>4
						<td>፬
						<td>U+136C
					<tr>
						<td>50
						<td>፶
						<td>U+1376
						<td>5
						<td>፭
						<td>U+136D
					<tr>
						<td>60
						<td>፷
						<td>U+1377
						<td>6
						<td>፮
						<td>U+136E
					<tr>
						<td>70
						<td>፸
						<td>U+1378
						<td>7
						<td>፯
						<td>U+136F
					<tr>
						<td>80
						<td>፹
						<td>U+1379
						<td>8
						<td>፰
						<td>U+1370
					<tr>
						<td>90
						<td>፺
						<td>U+137A
						<td>9
						<td>፱
						<td>U+1371
			</table>
		

		<li>For each group with an odd index (as given in the second step) that 
		did not have its digits removed in the third step, append ፻ U+137B.

		<li>For each group with an even index (as given in the second step),
		except the group with number 0, append ፼ U+137C.

		<li>Concatenate the groups into one string.
	</ol>

	For this system, the name is "ethiopic-numeric",
	the 'range' is ''1 infinity'',
	and the rest of the descriptors have their initial value.

	<p class='issue'>
		Is there a better suffix to use than the initial (".")?  
		The alphabetic ethiopic systems use a different suffix.

	<div class="example">
		The decimal number 100, in ethiopic, is ፻ U+137B <!-- odd -->

		The decimal number 78010092, in ethiopic, is
		፸፰፻፩፼፺፪ 
		U+1378 U+1370 U+137B <!-- 70 8 odd --> U+1369 U+137C <!-- 1 even --> U+137A U+136A. <!-- 90 2 -->

		The decimal number 780000001092, in ethiopic, is
		፸፰፻፩፼፼፺፪
		U+1378 U+1370 U+137B <!-- 70 8 odd --> U+1369 U+137C <!-- 1 even --> U+137C <!-- even --> U+137A U+136A. <!-- 90 2 -->
	</div>



<h2 id="apis">APIs</h2>

<h3 id='extentions-to-cssrule-interface'>
Extensions to the <code>CSSRule</code> interface</h3>

	The <code>CSSRule</code> interface is extended as follows:

	<pre class='idl'>
	partial interface CSSRule {
	    const unsigned short COUNTER_STYLE_RULE = 11;
	}
	</pre>


<h3 id="the-csscounterstylerule-interface">
The <code>CSSCounterStyleRule</code> interface</h3>

	The <dfn>CSSCounterStyleRule</dfn> interface represents a ''@counter-style'' rule.

	<pre class='idl'>
	interface CSSCounterStyleRule : CSSRule {
	  attribute DOMString name;
	  attribute DOMString system;
	  attribute DOMString symbols;
	  attribute DOMString additiveSymbols;
	  attribute DOMString negative;
	  attribute DOMString prefix;
	  attribute DOMString suffix;
	  attribute DOMString range;
	  attribute DOMString pad; 
	  attribute DOMString fallback;
	}
	</pre>

	<dl class='idl-attributes'>
		<dt><var>name</var> of type <code>DOMString</code>
		<dd>
			The <var>name</var> attribute on getting must return a <code>DOMString</code> object 
			that contains the serialization of the <var>&lt;counter-style-name></var> defined for the associated rule.

			On setting the <var>name</var> attribute, run the following steps:

			<ol>
				<li><a>Parse a component value</a> from the value.

				<li>If the returned value is an 〈ident〉,
				replace the associated rule's name with the 〈ident〉's representation.

				<li>Otherwise, do nothing.
			</ol>

		<dt>everything else
		<dd>
			The remaining attributes on getting must return a <code>DOMString</code> object 
			that contains the serialization of the associated descriptor defined for the associated rule.

			On setting, run the following steps:

			<ol>
				<li><a>Parse a list of component values</a> from the value.

				<li>If the returned value is valid according to the given descriptor's grammar,
				set that descriptor to the value.

				<li>Otherwise, do nothing.
			</ol>
	</dl>

<h2 id='ua-stylesheet'>
Sample style sheet for HTML</h2>

	This section is informative, not normative.
	HTML itself defines the styles that apply to its elements,
	and in some cases defers to the user agent's discretion.

	<pre>
	details > summary {
		display: list-item;
		list-style: disclosure-closed inside;
	}

	details[open] > summary {
		list-style: disclosure-open inside;
	}
	</pre>


<h2 class='no-num' id='changes'>
Changes since the Oct 2012 Working Draft</h2>

	<ul>
		<li>All counter systems can now handle negative values.

		<li>The 'pad' descriptor was added, to handle things like zero-padding integers.

		<li>The 'speak-as' descriptor was added, to control how generated counters should be spoken by speech UAs.

		<li>The ''disclosure-open'' and ''disclosure-closed'' predefined list styles were added, for rendering the HTML <code>&lt;details></code> element.
	</ul>


<h2 class="no-num" id="acknowledgments">
Acknowledgments</h2>

	The following people and documentation they wrote were very useful for defining the numbering systems: 
	<!-- alphabetical by full name -->
	Alexander Savenkov,
	Arron Eicholz,
	Aryeh Gregor,
	Christopher Hoess,
	Daniel Yacob,
	Frank Tang,
	Jonathan Rosenne,
	Karl Ove Hufthammer,
	Musheg Arakelyan,
	Nariné Renard Karapetyan,
	Randall Bart,
	Richard Ishida,
	Simon Montagu (Mozilla, smontagu@smontagu.org)


	<!-- see http://www.damowmow.com/temp/csswg/lists/part2.html 
	     http://www.qsm.co.il/Hebrew/Gimatria.htm
	     http://people.netscape.com/smontagu/writings/HebrewNumbers.html
	     http://www.ethiopic.org/Collation/OrderedLists.html
	     http://bugzilla.mozilla.org/show_bug.cgi?id=102252 -->