[css-lists] Define reversed counters with automatic initial value

css-lists-3/Overview.bs

@@ -744,7 +744,8 @@ Automatic Numbering With Counters</h2>
 	which are inherited through the document tree in a way similar to inherited property values.
 	[=Counters=] have a <dfn export for="CSS counter">name</dfn> and <dfn export for="CSS counter">creator</dfn>,
 	which identify the counter,
-	and an integer <dfn export for="CSS counter">value</dfn>.
+	a boolean <dfn export for="CSS counter">reversed</dfn> (false by default),
+	and an integer <dfn export for="CSS counter">value</dfn> (optional when the counter is <a>reversed</a>).
 	They are created and manipulated with
 	the <dfn export>counter properties</dfn> 'counter-increment', 'counter-set' and 'counter-reset',
 	and used with the ''counter()'' and ''counters()'' [=functional notations=].
@@ -755,6 +756,13 @@ Automatic Numbering With Counters</h2>
 	A <<counter-name>> name cannot match the keyword ''counter-reset/none'';
 	such an identifier is [=invalid=] as a <<counter-name>>.
 
+	A <a>reversed</a> counter is created with the ''reversed()'' [=functional notation=],
+	which is defined as follows:
+
+	<pre>
+		<dfn><<reversed-counter-name>></dfn> = reversed( <<counter-name>> )
+	</pre>
+
 	Resolving [=counter=] values on a given element is a multi-step process:
 
 	1. Existing counters are [=inherit counters|inherited=] from previous elements.
@@ -774,12 +782,12 @@ Creating Counters: the 'counter-reset' property</h3>
 
 	<pre class="propdef">
 	Name: counter-reset
-	Value: [ <<counter-name>> <<integer>>? ]+ | none
+	Value: [ <<counter-name>> <<integer>>? | <<reversed-counter-name>> <<integer>>? ]+ | none
 	Initial: none
 	Applies to: all elements
 	Inherited: no
 	Percentages: n/a
-	Computed value: the keyword ''counter-reset/none'' or a list, each item an identifier paired with an integer
+	Computed value: the keyword ''counter-reset/none'' or a list, each item an identifier or a ''reversed()'' function paired with an integer
 	Animation type: by computed value type
 	</pre>
 
@@ -799,6 +807,12 @@ Creating Counters: the 'counter-reset' property</h3>
 			[=Instantiates=] a counter of the given <<counter-name>>
 			with a starting value of the given <<integer>>,
 			defaulting to ''0''.
+
+		<dt><dfn><<reversed-counter-name>> <<integer>>?</dfn>
+		<dd>
+			[=Instantiates=] a <a>reversed</a> counter of the given <<counter-name>>
+			with a starting value of the given <<integer>>,
+			or no starting value if not given.
 	</dl>
 
 	<div class='example' highlight=css>
@@ -993,7 +1007,8 @@ Creating and Inheriting Counters</h3>
 	whose values are each a [=tuple=] of:
 	a [=string=] (representing a counter’s [=name=]),
 	an element (representing the counter’s [=creator=]),
-	and an integer (representing the counter’s [=value=]).
+	a boolean (representing whether the counter is [=reversed=]),
+	and optionally an integer (representing the counter’s [=value=]).
 	The latest [=counter=] of a given name in that set
 	represents the <dfn>innermost</dfn> counter of that name.
 
@@ -1106,8 +1121,9 @@ Instantiating Counters</h4>
 		see [[#nested-counters]].)
 		To <dfn lt="instantiate counter" local-lt="instantiate">instantiate a counter</dfn>
 		of a given |name|
-		on an |element|
-		with a starting |value|:
+		on an |element|,
+		optionally |reversed|,
+		with an optional starting |value|:
 
 		1. Let |counters| be |element|’s [=CSS counters set=].
 
@@ -1120,9 +1136,16 @@ Instantiating Counters</h4>
 		3. [=set/Append=] a new [=counter=] to |counters|
 			with name |name|,
 			originating element |element|,
-			and initial value |value|
+			reversed being |reversed|,
+			and initial value |value| (if given)
 	</div>
 
+	When a [=counter=] is [=instantiated=] without an initial value,
+	the user agent must dynamically calculate the initial value at layout-time
+	to be the number of elements and pseudo-elements that [=instantiate=] the same counter in the same [=scope=], plus 1.
+
+	Note: Only [=reversed=] counters can be instantiated without an initial value.
+
 <h3 id='counters-without-boxes'>
 Counters in elements that do not generate boxes</h3>
 
@@ -1171,8 +1194,10 @@ The Implicit ''list-item'' Counter</h3>
 	unless the 'counter-increment' property explicitly specifies
 	a different increment for the ''list-item'' counter,
 	it must be incremented by 1 on every [=list item=],
+	or if the counter is <a>reversed</a>,
+	it must be incremented by -1 on every [=list item=] instead,
 	at the same time that <a>counters</a> are normally incremented
-	(exactly as if the [=list item=] had ''list-item 1'' appended to their 'counter-increment' value,
+	(exactly as if the [=list item=] had ''list-item 1'' or ''list-item -1'' appended to their 'counter-increment' value,
 	including side-effects such as possibly [=instantiating=] a new [=counter=], etc).
 	This does not affect the [=specified value|specified=] or [=computed values=]
 	of 'counter-increment'.
@@ -1487,9 +1512,6 @@ Appendix A: Sample Style Sheet For HTML</h2>
 	this sample style sheet is provided to illustrate the CSS features
 	using familiar markup conventions.</em>
 
-	ISSUE: Discussion of how to support <code>ol[reversed]</code> list numbering in CSS is ongoing.
-	See, e.g. <a href="https://github.com/w3c/csswg-drafts/issues/4181">Issue 4181</a>.
-
 	<pre>
 		/* Set up list items */
 		li {
@@ -1525,16 +1547,13 @@ Appendix A: Sample Style Sheet For HTML</h2>
 			counter-set: list-item attr(value integer, 1);
 		}
 
-<!--
 		/* Handling reversed lists */
 		ol[reversed] {
-			counter-reset: list-item calc(attr(start integer, **magic**) + 1);
-			/* Where **magic** is the number of child &lt;li> elements. */
+			counter-reset: reversed(list-item);
 		}
-		ol[reversed] > li {
-			/* HTML implies 'counter-increment: list-item -1' */
+		ol[reversed][start] {
+			counter-reset: reversed(list-item) calc(attr(start integer) + 1);
 		}
--->
 
 		/* Box Model Rules */
 		ol, ul {