additive-symbols

構文

/* 単一のタプル */
additive-symbols: 3 "*";

/* カンマで区切られたタプルのリスト */
additive-symbols:
  3 "0",
  2 "\2E\20",
  1 url(symbol.png);

/* 2 進カウンター */
additive-symbols:
  2 "1",
  1 "0";

/* エトルリア（古代イタリアの文明）のカウンター */
additive-symbols:
  100 "𐌟",
  50 "𐌣",
  10 "𐌢",
  5 "𐌡",
  1 "𐌠";

値

記述子は、カンマで区切られた加算タプルのリストを受け入れます。それぞれのタプルは、空間で区切られた次の 2 つの値で構成されます。

<integer>

タプルの関連付けられた記号値の整数の加重を指定する非負の整数値。

<symbol>

タプルの関連付けられた <integer> 加重値で定義される加重値に使用するカウンター記号を指定します。

解説

additive-symbols 記述子は、カンマで区切られた加算タプルののリストを定義します。それぞれの加算タプルには、空間で区切られた非負の整数とカウンター記号が含まれています。有効であるためには、リストは整数の降順で並んでいる必要があります。整数と記号は連結されて、カウンター記号を形成します。

system 記述子が cyclic, numeric, alphabetic, symbolic, fixed の場合は、 symbols() 記述子を additive-symbols の代わりに使用してください。

公式定義

形式文法

additive-symbols = 
  [ <integer [0,∞]> && <symbol> ]#  

<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

例

加算的シンボルの指定

HTML

この例では、 system: additive と additive-symbols 記述子の値が、数値をローマ数字で表す方法を指定しています。リスト内のそれぞれの <li> 要素の値は、 @counter-style で定義されたルールに従ってローマ数字に変換されます。

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li value="109">109</li>
  <li>110</li>
</ul>

CSS

@counter-style uppercase-roman {
  system: additive;
  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;
}

ul {
  list-style: uppercase-roman;
  padding-left: 5em;
}

結果

値 109 に対応するリストアイテムの場合、数字 C は 100 を表し、IX は 9 を表します。これにより、リストアイテム 109 に対して CIX カウンターが生成されます。次のリストアイテムには、自動的に値 110 が取得されます。ローマ数字 CX は、100 を表す C と 10 を表す X から派生しています。

仕様書

ブラウザーの互換性

関連情報

• @counter-style 記述子: system, symbols, negative, prefix, suffix, range, pad, speak-as, fallback
• リストスタイルのプロパティ: list-style, list-style-image, list-style-position
• symbols()、無名のカウンタースタイルを作成する関数記法
• CSS カウンタースタイルモジュール