`additive-symbols` дескриптор CSS at-rule

Дескриптор additive-symbols at-rule @counter-style используется для указания символов счетчика, когда значение дескриптора @counter-style system задано как additive. Аддитивная система используется для построения систем позиционной записи числа, таких как римские цифры.

Синтаксис

/* Single tuple */
additive-symbols: 3 "*";

/* Comma-separated list of tuples */
additive-symbols:
  3 "0",
  2 "\2E\20",
  1 url("symbol.png");

/* Binary counter */
additive-symbols:
  2 "1",
  1 "0";

/* Etruscan (a civilization in ancient Italy) counter  */
additive-symbols:
  100 "𐌟",
  50 "𐌣",
  10 "𐌢",
  5 "𐌡",
  1 "𐌠";

Значения

Дескриптор принимает список аддитивных кортежей, разделенных запятыми; каждый кортеж состоит из следующих двух значений, разделенных пробелом:

<integer>

Неотрицательное целое число, задающее целочисленный вес связанного с кортежем символа.

<symbol>

Задает символ счетчика, который будет использоваться для значения веса, определенного соответствующим значением веса <integer> кортежа.

Описание

Дескриптор additive-symbols задает список аддитивных кортежей, разделенных запятыми. Каждый аддитивный кортеж содержит неотрицательное целое число и символ счетчика, разделенные пробелом. Чтобы список был допустимым, целые числа в нем должны располагаться в порядке убывания. Целое число и символ объединяются, образуя символ счетчика.

Если значение дескриптора system равно cyclic, numeric, alphabetic, symbolic или fixed, используйте дескриптор symbols() вместо additive-symbols.

Формальное определение

Формальный синтаксис

Примеры

Указание аддитивных символов

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 образуется из C для 100 и X для 10.

Спецификации

Совместимость с браузерами

См. также

• Дескрипторы @counter-style: system, symbols, negative, prefix, suffix, range, pad, speak-as, fallback
• Свойства стиля списка: list-style, list-style-image, list-style-position
• Функция symbols() для создания анонимных стилей счетчиков
• Модуль стилей счетчиков CSS