“CSS Counter Styles”

概要

“CSS Counter Styles”はリスト・マーカーをどのように生成するかを決めるカウンター・スタイルを定義するための“@counter-style”ルール について定義している仕様書です。

一般によく使用されるカウンター・スタイルについてあらかじめ定義したスタイルシートも含んでいます。

仕様書

定義されている値

<counter-style>

定義されている関数

symbols()
counter()
counters()

定義されている@ルール

@counter-style

カウンター・スタイル

“カウンター・スタイル(Counter Style)”はリスト・カウンターの値をどのようにしてリスト・マーカーとして使用する文字列に変換するかについての定義で、“@counter-style”ルールで定義することができます。

カウンター・スタイルは以下から構成されます。

• カウンター・スタイルを識別する名前(“<counter-style-name>”)
• 整数値であるリスト・カウンターをカウンター表現として使用する文字列に変換するアルゴリズム(“system”)
• リスト・カウンターの値が負である場合にカウンター表現の前後に追加するマイナス記号(“negative”)
• カウンター表現の前に追加する文字(“prefix”)
• カウンター表現の後に追加する文字(“suffix”)
• カウンター・スタイルが対応するリスト・カウンターの値の範囲(“range”)
• 音声合成でカウンター・スタイルをどのように読み上げるかについての指定(“speak-as”)
• リスト・カウンターの値をカウンター表現に変換できない場合に使用する代替のカウンター・スタイル(“fallback”)

リスト・カウンターの値を変換して生成された文字列は“カウンター表現(Counter Representation)”と言います。カウンター表現は下の手順で生成されます。

1. カウンター・スタイルが不明な場合は次の手順には進まず、“decimal”のスタイルを使用してリスト・カウンターの値のカウンター表現を生成します。
2. リスト・カウンターの値が“range”ディスクリプタで指定された範囲外にある場合は次の手順には進まず、代替のカウンター・スタイルを使用してリスト・カウンターの値のカウンター表現を生成します。
3. リスト・カウンターの値と“system”ディスクリプタで指定されたアルゴリズムを使用して“カウンター値の初期表現(Initial Representation for the Counter Value)”を生成します。カウンター・スタイルがマイナス記号を使用する場合は初期表現をリスト・カウンターのそのままの値を使用して生成します。
4. “pad”ディスクリプタで指定された記号を初期表現の先頭に追加します。
5. リスト・カウンターの値が負の場合、“negative”ディスクリプタで指定されたマイナス記号の間にカウンター表現を挟み込みます。

“symbolic”や“additive”といったカウンター表現を生成するアルゴリズムや“pad”ディスクリプタなどは制作者が指定した値の数に比例したサイズのカウンター表現を生成できますが、これらの乱用は過剰にメモリを消費する過大なカウンター表現の生成につながります。そのため、ユーザー・エージェントは最低でもユニコード符号位置60個分のカウンター表現に対応することが求められていますが、それよりも長いカウンター表現には代替のカウンター・スタイルを代わりに使用することができます。

リスト・カウンターの値を変換するアルゴリズム

リスト・カウンターの値をどのようにしてリスト・マーカーとして使用する文字列に変換するかはいくつか用意されたのアルゴリズムによって指定することができます。

このアルゴリズムは“system”ディスクリプタによって指定されます。“system”ディスクリプタを省略した場合の既定値は“symbolic”です。

それぞれのアルゴリズムは“symbols”ディスクリプタと“additive-symbols”ディスクリプタのいずれかに関連付けられます。これらのディスクリプタがアルゴリズムごとに定義されている最低数の記号を含んでいない場合にはカウンター・スタイルは無視されます。

“cyclic”

“cyclic”は周期的なリスト・マーカーを生成し、“symbols”ディスクリプタで指定された記号を繰り返し使用します。

“system”ディスクリプタの値が“cyclic”の場合、“symbols”ディスクリプタで必ず1個以上の記号を指定していなければなりません。

“symbols”ディスクリプタで指定された記号が1個だけの場合、その記号がすべてのリスト・アイテムのリスト・マーカーとして繰り返し使用されます。

“symbols”ディスクリプタで2個以上の記号が与えられた場合、“symbols”ディスクリプタで指定された順番に1個ずつ記号を使用していき、すべての記号を使用した後は最初に戻ります。リスト・カウンターの値が“1”の時に“symbols”ディスクリプタで指定された1個目の記号が使用されます。

カウンター・スタイルのサンプル

@counter-style sample-counter {

system: cyclic;
symbols: "\2615";

}

1. 北海道
2. 青森県
3. 岩手県
4. 宮城県
5. 秋田県
6. 山形県
7. 福島県
8. 茨城県
9. 栃木県
10. 群馬県
11. 埼玉県
12. 千葉県
13. 東京都
14. 神奈川県
15. 新潟県
16. 富山県
17. 石川県
18. 福井県
19. 山梨県
20. 長野県
21. 岐阜県
22. 静岡県
23. 愛知県
24. 三重県
25. 滋賀県
26. 京都府
27. 大阪府
28. 兵庫県
29. 奈良県
30. 和歌山県
31. 鳥取県
32. 島根県
33. 岡山県
34. 広島県
35. 山口県
36. 徳島県
37. 香川県
38. 愛媛県
39. 高知県
40. 福岡県
41. 佐賀県
42. 長崎県
43. 熊本県
44. 大分県
45. 宮崎県
46. 鹿児島県
47. 沖縄県

@counter-style sample-counter {

system: cyclic;
symbols: "\1F400" "\1F402" "\1F405" "\1F407" "\1F409" "\1F40D" "\1F40E" "\1F40F" "\1F412" "\1F413" "\1F415" "\1F417";

}

1. 北海道
2. 青森県
3. 岩手県
4. 宮城県
5. 秋田県
6. 山形県
7. 福島県
8. 茨城県
9. 栃木県
10. 群馬県
11. 埼玉県
12. 千葉県
13. 東京都
14. 神奈川県
15. 新潟県
16. 富山県
17. 石川県
18. 福井県
19. 山梨県
20. 長野県
21. 岐阜県
22. 静岡県
23. 愛知県
24. 三重県
25. 滋賀県
26. 京都府
27. 大阪府
28. 兵庫県
29. 奈良県
30. 和歌山県
31. 鳥取県
32. 島根県
33. 岡山県
34. 広島県
35. 山口県
36. 徳島県
37. 香川県
38. 愛媛県
39. 高知県
40. 福岡県
41. 佐賀県
42. 長崎県
43. 熊本県
44. 大分県
45. 宮崎県
46. 鹿児島県
47. 沖縄県

“fixed”

“fixed”は有限のリスト・マーカーを生成し、“symbols”ディスクリプタで指定された記号を1度だけ使用します。

“system”ディスクリプタの値が“fixed”の場合、“symbols”ディスクリプタで必ず1個以上の記号を指定していなければなりません。

“symbols”ディスクリプタで指定された順番に1個ずつ記号を使用していき、すべての記号を使用した後は“fallback”ディスクリプタで指定された代替のカウンター・スタイルが使用されます。

“system”ディスクリプタの値を“fixed”とする場合、任意の“<integer>”値で“symbols”ディスクリプタで指定された1個目の記号がリスト・カウンターのどの値に対応するのかを指定できます。省略した場合は“1”となります。

カウンター・スタイルのサンプル

@counter-style sample-counter {

system: fixed;
symbols: "\1F400" "\1F402" "\1F405" "\1F407" "\1F409" "\1F40D" "\1F40E" "\1F40F" "\1F412" "\1F413" "\1F415" "\1F417";

}

1. 北海道
2. 青森県
3. 岩手県
4. 宮城県
5. 秋田県
6. 山形県
7. 福島県
8. 茨城県
9. 栃木県
10. 群馬県
11. 埼玉県
12. 千葉県
13. 東京都
14. 神奈川県
15. 新潟県
16. 富山県
17. 石川県
18. 福井県
19. 山梨県
20. 長野県
21. 岐阜県
22. 静岡県
23. 愛知県
24. 三重県
25. 滋賀県
26. 京都府
27. 大阪府
28. 兵庫県
29. 奈良県
30. 和歌山県
31. 鳥取県
32. 島根県
33. 岡山県
34. 広島県
35. 山口県
36. 徳島県
37. 香川県
38. 愛媛県
39. 高知県
40. 福岡県
41. 佐賀県
42. 長崎県
43. 熊本県
44. 大分県
45. 宮崎県
46. 鹿児島県
47. 沖縄県

“symbolic”

“symbolic”は“symbols”ディスクリプタで指定された記号を2倍、3倍と増やしながら繰り返してリスト・マーカーを生成します。

“system”ディスクリプタの値が“symbolic”の場合、“symbols”ディスクリプタで必ず1個以上の記号を指定していなければなりません。

“symbols”ディスクリプタで指定された順番に1個ずつ記号を使用していき、すべての記号を使用した後は1個目の記号から順番にそれぞれ2個ずつ、さらに一巡した後はそれぞれ3個ずつというように繰り返します。

“system”ディスクリプタの値が“symbolic”のカウンター・スタイルはリスト・カウンターの値が正の値にある範囲でのみ定義できます。

カウンター・スタイルのサンプル

@counter-style sample-counter {

system: symbolic;
symbols: "\1D538" "\1D539" "\2102" "\1D53B" "\1D53C" "\1D53D";

}

1. 北海道
2. 青森県
3. 岩手県
4. 宮城県
5. 秋田県
6. 山形県
7. 福島県
8. 茨城県
9. 栃木県
10. 群馬県
11. 埼玉県
12. 千葉県
13. 東京都
14. 神奈川県
15. 新潟県
16. 富山県
17. 石川県
18. 福井県
19. 山梨県
20. 長野県
21. 岐阜県
22. 静岡県
23. 愛知県
24. 三重県
25. 滋賀県
26. 京都府
27. 大阪府
28. 兵庫県
29. 奈良県
30. 和歌山県
31. 鳥取県
32. 島根県
33. 岡山県
34. 広島県
35. 山口県
36. 徳島県
37. 香川県
38. 愛媛県
39. 高知県
40. 福岡県
41. 佐賀県
42. 長崎県
43. 熊本県
44. 大分県
45. 宮崎県
46. 鹿児島県
47. 沖縄県

“alphabetic”

“alphabetic”は“symbols”ディスクリプタで指定された記号をそれぞれ全単射的記数法の桁として解釈してリスト・マーカーを生成します。

“system”ディスクリプタの値が“alphabetic”の場合、“symbols”ディスクリプタで少なくとも2個の記号を指定していなければなりません。

“symbols”ディスクリプタで指定された順番に1個ずつ記号を使用していき、すべての記号を使用した後は1個目の記号1個に続いてすべての記号を順番に1個ずつ、さらに一巡した後は2個目の記号1個に続いてすべての記号を順番に1個ずつというように繰り返します。“alphabetic”の場合、“0”を表現する桁はありません。

“system”ディスクリプタの値が“alphabetic”のカウンター・スタイルはリスト・カウンターの値が正の値にある範囲でのみ定義できます。

カウンター・スタイルのサンプル

@counter-style sample-counter {

system: alphabetic;
symbols: "\1D538" "\1D539" "\2102" "\1D53B" "\1D53C" "\1D53D";

}

1. 北海道
2. 青森県
3. 岩手県
4. 宮城県
5. 秋田県
6. 山形県
7. 福島県
8. 茨城県
9. 栃木県
10. 群馬県
11. 埼玉県
12. 千葉県
13. 東京都
14. 神奈川県
15. 新潟県
16. 富山県
17. 石川県
18. 福井県
19. 山梨県
20. 長野県
21. 岐阜県
22. 静岡県
23. 愛知県
24. 三重県
25. 滋賀県
26. 京都府
27. 大阪府
28. 兵庫県
29. 奈良県
30. 和歌山県
31. 鳥取県
32. 島根県
33. 岡山県
34. 広島県
35. 山口県
36. 徳島県
37. 香川県
38. 愛媛県
39. 高知県
40. 福岡県
41. 佐賀県
42. 長崎県
43. 熊本県
44. 大分県
45. 宮崎県
46. 鹿児島県
47. 沖縄県

“numeric”

“numeric”は位取り記数法(place-value numbering system)によるリスト・マーカーを生成し、“symbols”ディスクリプタで指定された記号をそれぞれ位取り記数法の桁として解釈します。

“system”ディスクリプタの値が“numeric”の場合、“symbols”ディスクリプタで少なくとも2個の記号を指定していなければなりません。

“symbols”ディスクリプタで指定された順番にそれぞれ“0”、“1”、“2”、...の数字として解釈されます。

カウンター・スタイルのサンプル

@counter-style sample-counter {

system: numeric;
symbols: "\1D7D8" "\1D7D9" "\1D7DA" "\1D7DB" "\1D7DC" "\1D7DD" "\1D7DE" "\1D7DF" "\1D7E0" "\1D7E1";

}

1. 北海道
2. 青森県
3. 岩手県
4. 宮城県
5. 秋田県
6. 山形県
7. 福島県
8. 茨城県
9. 栃木県
10. 群馬県
11. 埼玉県
12. 千葉県
13. 東京都
14. 神奈川県
15. 新潟県
16. 富山県
17. 石川県
18. 福井県
19. 山梨県
20. 長野県
21. 岐阜県
22. 静岡県
23. 愛知県
24. 三重県
25. 滋賀県
26. 京都府
27. 大阪府
28. 兵庫県
29. 奈良県
30. 和歌山県
31. 鳥取県
32. 島根県
33. 岡山県
34. 広島県
35. 山口県
36. 徳島県
37. 香川県
38. 愛媛県
39. 高知県
40. 福岡県
41. 佐賀県
42. 長崎県
43. 熊本県
44. 大分県
45. 宮崎県
46. 鹿児島県
47. 沖縄県

@counter-style sample-counter {

system: numeric;
symbols: "\1D7D8" "\1D7D9" "\1D7DA" "\1D7DB" "\1D7DC" "\1D7DD" "\1D7DE" "\1D7DF" "\1D7E0" "\1D7E1";

}

1. 北海道
2. 青森県
3. 岩手県
4. 宮城県
5. 秋田県
6. 山形県
7. 福島県
8. 茨城県
9. 栃木県
10. 群馬県
11. 埼玉県
12. 千葉県
13. 東京都
14. 神奈川県
15. 新潟県
16. 富山県
17. 石川県
18. 福井県
19. 山梨県
20. 長野県
21. 岐阜県
22. 静岡県
23. 愛知県
24. 三重県
25. 滋賀県
26. 京都府
27. 大阪府
28. 兵庫県
29. 奈良県
30. 和歌山県
31. 鳥取県
32. 島根県
33. 岡山県
34. 広島県
35. 山口県
36. 徳島県
37. 香川県
38. 愛媛県
39. 高知県
40. 福岡県
41. 佐賀県
42. 長崎県
43. 熊本県
44. 大分県
45. 宮崎県
46. 鹿児島県
47. 沖縄県

“additive”

“additive”は加算的記数法(sign-value numbering system)によるリスト・マーカーを生成します。記号をすべての位で共有するのではなく、より大きな位を表現するために追加の記号を指定し、それらの位の量を足し合わせることでリスト・カウンターの値を表現します。

“system”ディスクリプタの値が“additive”の場合、“additive-symbols”ディスクリプタで1個以上の位の量と記号の組を指定していなければなりません。

“system”ディスクリプタの値が“additive”のカウンター・スタイルはすべてのリスト・カウンターの値に対応します。

カウンター・スタイルのサンプル

@counter-style sample-counter {

system: additive;
additive-symbols: 90 "\3288\3289", 80 \3287\3289, 70 \3286\3289, 60 \3285\3289, 50 \3284\3289, 40 \3283\3289, 30 \3282\3289, 20 \3281\3289, 10 \3289, 9 \3288, 8 \3287, 7 \3286, 6 \3285, 5 \3284, 4 \3283, 3 \3282, 2 \3281, 1 \3280;
range: 1 99;

}

1. 北海道
2. 青森県
3. 岩手県
4. 宮城県
5. 秋田県
6. 山形県
7. 福島県
8. 茨城県
9. 栃木県
10. 群馬県
11. 埼玉県
12. 千葉県
13. 東京都
14. 神奈川県
15. 新潟県
16. 富山県
17. 石川県
18. 福井県
19. 山梨県
20. 長野県
21. 岐阜県
22. 静岡県
23. 愛知県
24. 三重県
25. 滋賀県
26. 京都府
27. 大阪府
28. 兵庫県
29. 奈良県
30. 和歌山県
31. 鳥取県
32. 島根県
33. 岡山県
34. 広島県
35. 山口県
36. 徳島県
37. 香川県
38. 愛媛県
39. 高知県
40. 福岡県
41. 佐賀県
42. 長崎県
43. 熊本県
44. 大分県
45. 宮崎県
46. 鹿児島県
47. 沖縄県

“extends”

“extends”は他のカウンター・スタイルを拡張することでリスト・マーカーを生成します。

“extends”は他の“@counter-style”ルールで定義済みのカウンター・スタイルのアルゴリズムを流用しながら、一部の設定だけを変更したい場合やカウンター・スタイルの名前だけ変更して使用したい場合に有用です。“system”ディスクリプタの値が“extends”の“@counter-style”ルールの中で未指定のディスクリプタの値は拡張元となるカウンター・スタイルの設定を使用します。

“system”ディスクリプタの値が“extends”の“@counter-style”ルールの中には“symbols”ディスクリプタと“additive-symbols”ディスクリプタを含むことはできません。これらのディスクリプタを含んだ場合は“@counter-style”ルールは無効となります。

拡張元のカウンター・スタイルとして指定された“<counter-style-name>”値が“disc”、“circle”、“square”、“disclosure-open”、“disclosure-closed”のいずれかと一致する場合、“extends”は仕様書に記載された標準のスタイルシートによる定義を拡張します。

拡張元のカウンター・スタイルとして指定された“<counter-style-name>”値が定義済みのカウンター・スタイルではない場合、“decimal”を指定したものとして扱います。また、2個以上の“@counter-style”ルールが互いを拡張元としてていてループが生じる場合にはそれらの“@counter-style”ルールの拡張元はすべて“decimal”であるものとして扱います。

カウンター・スタイルのサンプル

@counter-style sample-counter {

system: extends decimal;
suffix: "\003A\0020";

}

1. 北海道
2. 青森県
3. 岩手県
4. 宮城県
5. 秋田県
6. 山形県
7. 福島県
8. 茨城県
9. 栃木県
10. 群馬県
11. 埼玉県
12. 千葉県
13. 東京都
14. 神奈川県
15. 新潟県
16. 富山県
17. 石川県
18. 福井県
19. 山梨県
20. 長野県
21. 岐阜県
22. 静岡県
23. 愛知県
24. 三重県
25. 滋賀県
26. 京都府
27. 大阪府
28. 兵庫県
29. 奈良県
30. 和歌山県
31. 鳥取県
32. 島根県
33. 岡山県
34. 広島県
35. 山口県
36. 徳島県
37. 香川県
38. 愛媛県
39. 高知県
40. 福岡県
41. 佐賀県
42. 長崎県
43. 熊本県
44. 大分県
45. 宮崎県
46. 鹿児島県
47. 沖縄県

値

関数

@ルール