[css-counter-styles] Editorial tweak of the predefined styles to give them all descriptions and examples first.

Author: tabatkins

css-counter-styles/Overview.html

@@ -1398,68 +1398,106 @@ <h3 id=simple-numeric><span class=secno>5.1. </span> Numeric: ‘<a
    href="#georgian"><code class=css>georgian</code></a>’, ‘<a
    href="#hebrew"><code class=css>hebrew</code></a>’</h3>
 
+  <dl>
+   <dt><dfn id=decimal>‘<code class=css>decimal</code>’</dfn>
+
+   <dd> Western decimal numbers (e.g., 1, 2, 3, ..., 98, 99, 100).
+
+   <dt><dfn id=decimal-leading-zero>‘<code
+    class=css>decimal-leading-zero</code>’</dfn>
+
+   <dd> Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98,
+    99, 100).
+
+   <dt><dfn id=cjk-decimal>‘<code class=css>cjk-decimal</code>’</dfn>
+
+   <dd> Han decimal numbers (e.g., 一, 二, 三, ..., 九八, 九九,
+    一〇〇).
+
+   <dt><dfn id=lower-roman>‘<code class=css>lower-roman</code>’</dfn>
+
+   <dd> Lowercase ASCII Roman numerals (e.g., i, ii, iii, ..., xcviii, xcix,
+    c).
+
+   <dt><dfn id=upper-roman>‘<code class=css>upper-roman</code>’</dfn>
+
+   <dd> Uppercase ASCII Roman numerals (e.g., I, II, III, ..., XCVIII, XCIX,
+    C).
+
+   <dt><dfn id=armenian>‘<code class=css>armenian</code>’</dfn>
+
+   <dd> Traditional uppercase Armenian numbering (e.g., Ա, Բ, Գ, ...,
+    ՂԸ, ՂԹ, Ճ).
+
+   <dt><dfn id=georgian>‘<code class=css>georgian</code>’</dfn>
+
+   <dd> Traditional Georgian numbering (e.g., ა, ბ, გ, ..., ჟჱ,
+    ჟთ, რ).
+
+   <dt><dfn id=hebrew>‘<code class=css>hebrew</code>’</dfn>
+
+   <dd> Traditional Hebrew numbering (e.g., א‎, ב‎, ג‎, ...,
+    צח‎, צט‎, ק‎).
+  </dl>
+
+  <p> The ‘<a href="#decimal"><code class=css>decimal</code></a>’
+   counter-style must not be overridable with a @counter-style rule, so that
+   it is always available as an ultimate fallback style.
+
+  <p> The following stylesheet fragment provides the normative definition of
+   these predefined counter styles:
+
   <pre class=stylesheet><bdo>
-@counter-style <dfn id=decimal>decimal</dfn> {
+@counter-style decimal {
 	type: numeric;
 	symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
 }
 
-@counter-style <dfn
-   id=decimal-leading-zero>decimal-leading-zero</dfn> {
+@counter-style decimal-leading-zero {
 	type: fixed -9;
 	symbols: '-09' '-08' '-07' '-06' '-05' '-04' '-03' '-02' '-01' '00' '01' '02' '03' '04' '05' '06' '07' '08' '09';
 }
 
-@counter-style <dfn
-   id=cjk-decimal>cjk-decimal</dfn> {
+@counter-style cjk-decimal {
 	type: numeric;
 	symbols: \3007 \4E00 \4E8C \4E09 \56DB \4E94 \516D \4E03 \516B \4E5D;
 	/* 〇 一 二 三 四 五 六 七 八 九 */
 }
 
-@counter-style <dfn
-   id=lower-roman>lower-roman</dfn> {
+@counter-style lower-roman {
 	type: 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 <dfn
-   id=upper-roman>upper-roman</dfn> {
+@counter-style upper-roman {
 	type: 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 <dfn
-   id=armenian>armenian</dfn> {
+@counter-style armenian {
 	type: 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 <dfn
-   id=georgian>georgian</dfn> {
+@counter-style georgian {
 	type: 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 <dfn
-   id=hebrew>hebrew</dfn> {
+@counter-style hebrew {
 	type: 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>
 
-  <p> The ‘<a href="#decimal"><code class=css>decimal</code></a>’
-   counter-style must not be overridable with a @counter-style rule, so that
-   it is always available as an ultimate fallback style.
-
   <h3 id=simple-alphabetic><span class=secno>5.2. </span> Alphabetic: ‘<a
    href="#lower-alpha"><code class=css>lower-alpha</code></a>’, ‘<a
    href="#lower-latin"><code class=css>lower-latin</code></a>’, ‘<a
@@ -1471,62 +1509,96 @@ <h3 id=simple-alphabetic><span class=secno>5.2. </span> Alphabetic: ‘<a
    href="#katakana"><code class=css>katakana</code></a>’, ‘<a
    href="#katakana-iroha"><code class=css>katakana-iroha</code></a>’</h3>
 
+  <dl>
+   <dt><dfn id=lower-alpha>‘<code class=css>lower-alpha</code>’</dfn>
+
+   <dt><dfn id=lower-latin>‘<code class=css>lower-latin</code>’</dfn>
+
+   <dd> Lowercase ASCII letters (e.g., a, b, c, ..., z, aa, ab).
+
+   <dt><dfn id=upper-alpha>‘<code class=css>upper-alpha</code>’</dfn>
+
+   <dt><dfn id=upper-latin>‘<code class=css>upper-latin</code>’</dfn>
+
+   <dd> Uppercase ASCII letters (e.g., A, B, C, ..., Z, AA, AB).
+
+   <dt><dfn id=lower-greek>‘<code class=css>lower-greek</code>’</dfn>
+
+   <dd> Lowercase classical Greek (e.g., α, β, γ, ..., ω, αα, αβ).
+
+   <dt><dfn id=hiragana>‘<code class=css>hiragana</code>’</dfn>
+
+   <dd> Dictionary-order hiragana lettering (e.g., あ, い, う, ..., ん,
+    ああ, あい).
+
+   <dt><dfn id=hiragana-iroha>‘<code
+    class=css>hiragana-iroha</code>’</dfn>
+
+   <dd> Iroha-order hiragana lettering (e.g., い, ろ, は, ..., ん,
+    いい, いろ).
+
+   <dt><dfn id=katakana>‘<code class=css>katakana</code>’</dfn>
+
+   <dd> Dictionary-order katakana lettering (e.g., ア, イ, ウ, ..., ン,
+    アア, アイ).
+
+   <dt><dfn id=katakana-iroha>‘<code
+    class=css>katakana-iroha</code>’</dfn>
+
+   <dd> Iroha-order katakana lettering (e.g., イ, ロ, ハ, ..., ン,
+    イイ, イロ)
+  </dl>
+
+  <p> The following stylesheet fragment provides the normative definition of
+   these predefined counter styles:
+
   <pre class=stylesheet><bdo>
-@counter-style <dfn
-   id=lower-alpha>lower-alpha</dfn> {
+@counter-style lower-alpha {
 	type: 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 <dfn
-   id=lower-latin>lower-latin</dfn> {
+@counter-style lower-latin {
 	type: override lower-alpha;
 }
 
-@counter-style <dfn
-   id=upper-alpha>upper-alpha</dfn> {
+@counter-style upper-alpha {
 	type: 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 <dfn
-   id=upper-latin>upper-latin</dfn> {
+@counter-style upper-latin {
 	type: override upper-alpha;
 }
 
-@counter-style <dfn
-   id=lower-greek>lower-greek</dfn> {
+@counter-style lower-greek {
 	type: 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 <dfn
-   id=hiragana>hiragana</dfn> {
+@counter-style hiragana {
 	type: 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: 、;
+	suffix: '、';
 }
 
-@counter-style <dfn
-   id=hiragana-iroha>hiragana-iroha</dfn> {
+@counter-style hiragana-iroha {
 	type: 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: 、;
+	suffix: '、';
 }
 
-@counter-style <dfn
-   id=katakana>katakana</dfn> {
+@counter-style katakana {
 	type: 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: 、;
+	suffix: '、';
 }
 
-@counter-style <dfn
-   id=katakana-iroha>katakana-iroha</dfn> {
+@counter-style katakana-iroha {
 	type: 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;
 	/* イ ロ ハ ニ ホ ヘ ト チ リ ヌ ル ヲ ワ カ ヨ タ レ ソ ツ ネ ナ ラ ム ウ ヰ ノ オ ク ヤ マ ケ フ コ エ テ ア サ キ ユ メ ミ シ ヱ ヒ モ セ ス ン */
@@ -1538,36 +1610,37 @@ <h3 id=simple-symbolic><span class=secno>5.3. </span> Symbolic: ‘<a
    href="#circle"><code class=css>circle</code></a>’, ‘<a
    href="#square"><code class=css>square</code></a>’</h3>
 
-  <p> In addition to the above styles, UAs must define three counter styles
-   named ‘<a href="#disc"><code class=css>disc</code></a>’, ‘<a
-   href="#circle"><code class=css>circle</code></a>’, and ‘<a
-   href="#square"><code class=css>square</code></a>’. They must do so
-   either by including the following stylesheet in their UA stylesheet, or by
-   rendering the bullets with a browser-generated image matching the
-   descriptions below the stylesheet.
-
-  <p> If a browser chooses to render these counter styles by generating
-   images, the images must be sized to attractively fill a 1em by 1em
-   rectangle. As well, the styles must still be overrideable by a later ‘<a
-   href="#at-counter-style"><code class=css>@counter-style</code></a>’ rule
-   defining a counter style of the same name, as if they were defined by a
-   ‘<a href="#at-counter-style"><code
-   class=css>@counter-style</code></a>’ rule in the UA stylesheet.
+  <dl>
+   <dt>disc
+
+   <dd>A filled circle, similar to • U+2022 BULLET.
+
+   <dt>circle
+
+   <dd>A hollow circle, similar to ◦ U+25E6 WHITE BULLET.
+
+   <dt>square
+
+   <dd>A filled square, similar to ◾ U+25FE BLACK MEDIUM SMALL SQUARE.
+  </dl>
+
+  <p> The following stylesheet fragment provides the normative definition of
+   these predefined counter styles:
 
   <pre class=stylesheet>
 @counter-style <dfn id=disc>disc</dfn> {
 	type: cyclic;
 	symbols: \2022;
 	/* • */
-	suffix: ;
+	suffix: '';
 }
 
 @counter-style <dfn
    id=circle>circle</dfn> {
 	type: cyclic;
 	symbols: \25E6;
 	/* ◦ */
-	suffix: ;
+	suffix: '';
 }
 
 @counter-style <dfn
@@ -1578,20 +1651,11 @@ <h3 id=simple-symbolic><span class=secno>5.3. </span> Symbolic: ‘<a
 	suffix: '';
 }</pre>
 
-  <dl>
-   <dt>disc
-
-   <dd>A filled circle, similar to • U+2022 BULLET.
-
-   <dt>circle
-
-   <dd>A hollow circle, similar to ◦ U+25E6 WHITE BULLET.
-
-   <dt>square
-
-   <dd>A filled square, similar to ◾ U+25FE BLACK MEDIUM SMALL SQUARE.
-  </dl>
-  <!-- ======================================================================= -->
+  <p> 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.
+   <!-- ======================================================================= -->
 
   <h2 id=complex-predefined-counters><span class=secno>6. </span> Complex
    Predefined Counter Styles</h2>