CSS 카운터 스타일 레벨 3

1. 소개

CSS 1은 HTML에서 전통적으로 사용되던 정렬 및 비정렬 목록 스타일을 기반으로 몇 가지 유용한 카운터 스타일을 정의했습니다. CSS2.1에서 약간 확장되었지만, 전 세계 타이포그래피의 요구를 충분히 충족하지는 못합니다.

이 모듈은 @counter-style 규칙을 도입하여, CSS가 이 문제를 열려 있는 방식으로 해결할 수 있게 합니다. 작성자가 직접 카운터 스타일을 정의할 수 있도록 허용합니다. 이렇게 정의된 스타일은 list-style-type 속성이나 counter(), counters() 함수에서 사용할 수 있습니다. 또한, @counter-style로 표현하기에는 복잡하지만 일반적인 추가 미리 정의된 카운터 스타일도 정의합니다.

2. 카운터 스타일

카운터 스타일은 카운터 값을 문자열로 변환하는 방법을 정의합니다. 카운터 스타일은 다음 요소로 구성됩니다:

• 스타일을 식별하기 위한 이름
• 정수 카운터 값을 기본 문자열로 변환하는 알고리즘
• 음수 카운터 값의 표현 앞이나 뒤에 붙는 음수 부호
• 표현 앞에 붙는 접두사
• 표현 뒤에 붙는 접미사
• 카운터 스타일이 처리하는 값을 제한하는 범위
• 음성 합성기에서 카운터 스타일을 읽는 방법을 설명하는 음성 형태
• 카운터 값이 카운터 스타일의 범위를 벗어나거나, 카운터 스타일이 값을 렌더링할 수 없는 경우 사용할 폴백 스타일

특정 카운터 값에 대해 특정 카운터 스타일을 사용하여 카운터 표현을 생성할 때는 다음 단계를 따르십시오:

1. 카운터 스타일을 알 수 없으면, 이 알고리즘을 종료하고 동일한 카운터 값에 대해 카운터 표현을 생성하는데 decimal 스타일을 사용합니다.
2. 카운터 값이 해당 카운터 스타일의 range를 벗어나면, 이 알고리즘을 종료하고 카운터 스타일의 폴백 스타일과 동일한 카운터 값을 사용해 카운터 표현을 생성합니다.
3. 카운터 값과 카운터 스타일의 알고리즘을 사용하여, 카운터 값의 초기 표현을 생성합니다. 카운터 값이 음수이고 카운터 스타일이 음수 부호를 사용하면, 카운터 값의 절대값을 사용해 초기 표현을 생성합니다.
4. pad 디스크립터에 지정된 대로 심볼을 표현 앞에 붙입니다.
5. 카운터 값이 음수이고 카운터 스타일이 음수 부호를 사용하면, 표현을 카운터 스타일의 음수 부호로 감쌉니다. 이는 negative 디스크립터에 따라 지정됩니다.
6. 표현을 반환합니다.

참고: prefix와 suffix는 이 알고리즘에서 역할을 하지 않습니다. 이는 의도된 동작입니다; prefix와 suffix는 counter() 또는 counters() 함수가 반환하는 문자열의 일부가 아닙니다. 대신, prefix와 suffix는 content 속성 값을 구성하는 알고리즘에 의해 추가됩니다. ::marker 의사 요소의 경우입니다. 따라서 prefix와 suffix는 실제 표현이 폴백 스타일에 의해 생성되더라도 항상 지정된 counter-style에서 가져옵니다.

system의 일부 값(symbolic, additive) 및 일부 디스크립터(pad)는 작성자가 지정한 숫자에 따라 크기가 선형적으로 증가하는 표현을 생성할 수 있습니다. 이는 매우 큰 표현을 생성하거나 사용자의 메모리를 과도하게 소비하거나 브라우저를 멈추게 하는 악용 가능성이 있습니다. 사용자 에이전트는 최소 60자 길이의 유니코드 코드포인트 표현을 지원해야 하며, 60자를 초과하는 표현은 폴백 스타일을 사용할 수 있습니다.

3. 사용자 지정 카운터 스타일 정의: @counter-style 규칙

@counter-style 규칙은 작성자가 사용자 지정 카운터 스타일을 정의할 수 있도록 합니다. 카운터 스타일의 구성 요소는 @counter-style 규칙의 디스크립터로 지정합니다. 알고리즘은 system, symbols, additive-symbols 속성의 조합으로 암묵적으로 지정됩니다.

@counter-style 규칙의 일반적인 형태는 다음과 같습니다:

@counter-style <counter-style-name> { <declaration-list> }

<counter-style-name>은 <custom-ident>이며, ASCII 대소문자 구분 없이 none과 일치하지 않아야 합니다. <counter-style-name> 은 트리 범위 이름입니다.

decimal, disc, square, circle, disclosure-open, disclosure-closed 키워드는 <counter-style-name>로는 유효하지만, 여기서 카운터 스타일 규칙의 이름으로 사용하면 무효가 됩니다. (이 키워드는 extend 시스템 등 다른 컨텍스트에서는 사용할 수 있습니다.)

참고: <custom-ident>는 CSS-wide 키워드도 자동으로 제외합니다. 또한, inside와 같은 일부 이름은 카운터 스타일 이름으로는 유효하지만, list-style 속성의 기존 값과 충돌하므로 그곳에서는 사용할 수 없습니다.

카운터 스타일 이름은 대소문자를 구분합니다. 그러나 이 명세에서 정의된 이름은 카운터 스타일로 사용될 때 항상 ASCII 소문자로 파싱됩니다. 예를 들어, list-style 속성 집합, @counter-style 규칙, counter() 함수 등에서 적용됩니다.

각 @counter-style 규칙은 모든 카운터 스타일 디스크립터에 대해 값을 지정합니다. 명시적이든 암시적이든 반드시 지정됩니다. 규칙에서 명시적으로 값을 지정하지 않은 디스크립터는 이 명세에서 각 디스크립터에 나열된 초기 값을 사용합니다. 이 디스크립터들은 자신이 정의된 @counter-style 규칙 내에서만 적용되며, 문서 언어 요소에는 적용되지 않습니다. 디스크립터가 어떤 요소에 적용되는지, 값이 자식 요소에 상속되는지 등은 개념적으로 존재하지 않습니다. 동일한 @counter-style 규칙에 디스크립터가 여러 번 등장하면, 마지막에 지정된 유효한 값만 사용하고, 이전 값은 모두 무시해야 합니다.

@counter-style을 정의하면 해당 문서 전체에서 사용할 수 있습니다. 동일한 이름으로 @counter-style 규칙이 여러 개 정의된 경우, 표준 CSS 캐스케이드 규칙에 따라 하나만 적용됩니다. @counter-style 규칙은 "원자적으로" 캐스케이드됩니다: 하나가 동일한 이름의 다른 규칙을 대체하면, 해당 규칙의 특정 디스크립터만 대체하는 것이 아니라 전체를 대체합니다.

참고: 미리 정의된 카운터 스타일도 오버라이드될 수 있습니다; UA 스타일시트가 다른 스타일시트보다 먼저 적용되므로, 미리 정의된 스타일은 항상 캐스케이드에서 우선순위가 낮습니다.

이 at-rule은 CSS의 미래 호환 파싱 요구사항을 준수합니다; 해당 규칙을 이해하지 못하는 적합한 파서도 오류 없이 무시합니다. 각 사용자 에이전트가 인식하지 못하거나 구현하지 않은 디스크립터, 혹은 현재 또는 미래 명세의 문법과 일치하지 않는 값은 모두 완전히 무시해야 합니다; 이러한 디스크립터는 @counter-style 규칙을 무효로 만들지 않습니다.

3.1. 카운터 알고리즘: system 디스크립터

system 디스크립터는 카운터 값에 따라 카운터 표현을 생성할 때 사용할 알고리즘을 지정합니다. 예를 들어, cyclic 카운터 스타일은 심볼들을 반복해서 순환시키고, numeric 카운터 스타일은 심볼을 숫자처럼 해석하여 그에 맞게 표현을 만듭니다. 시스템의 종류는 아래의 하위 섹션에서 정의합니다.

각 system 값은 symbols 또는 additive-symbols 디스크립터와 연관되어 있으며, 해당 디스크립터가 반드시 가져야 하는 최소 길이가 있습니다; 아래 각 항목에서 이를 정의합니다. 만약 @counter-style 규칙이 이 요구사항을 충족하지 못하면, 카운터 스타일을 정의하지 않습니다. (규칙 자체는 문법적으로 유효하지만, 실제로는 아무런 효과가 없습니다.)

3.1.1. 순환 심볼: cyclic 시스템

cyclic 카운터 시스템은 제공된 심볼들을 반복적으로 순환시켜서, 리스트의 끝에 도달하면 다시 처음으로 돌아갑니다. 단순한 불릿(심볼 한 개만 제공)이나 여러 심볼을 순환시킬 때 사용할 수 있습니다. 첫 번째 카운터 심볼은 값 1의 표현에 사용되고, 두 번째 카운터 심볼(존재할 경우)은 값 2의 표현에 사용됩니다 등.

system이 cyclic인 경우, symbols 디스크립터에는 적어도 하나 이상의 카운터 심볼이 포함되어야 합니다. 이 시스템은 모든 카운터 값에 대해 정의됩니다.

@counter-style triangle {
  system: cyclic;
  symbols: ‣;
  suffix: " ";
}

‣  One
‣  Two
‣  Three

N개의 카운터 심볼이 있고 정수 value에 대해 표현을 만들 때, 표현은 리스트의 (value-1) mod N 인덱스에 위치한 카운터 심볼이 됩니다. (0부터 시작)

3.1.2. 소진되는 심볼: fixed 시스템

fixed 카운터 시스템은 심볼 리스트를 한 번만 순회하고, 이후에는 폴백으로 넘어갑니다. 표현이 한정된 개수만 존재하는 카운터 스타일을 나타내기에 유용합니다. 예를 들어, 유니코드는 목록용으로 특별히 설계된 제한된 길이의 특수 문자 집합(원 안의 숫자 등)을 정의합니다.

system이 fixed인 경우, symbols 디스크립터에는 적어도 하나 이상의 카운터 심볼이 포함되어야 합니다. 이 시스템은 유한한 범위의 카운터 값에 대해 정의되며, first symbol value로 시작하여 카운터 심볼 리스트의 길이만큼 값을 표현합니다.

이 시스템이 지정된 경우, 뒤에 정수를 선택적으로 사용할 수 있으며, 이는 first symbol value를 설정합니다. 생략되면 first symbol value는 1입니다.

@counter-style box-corner {
  system: fixed;
  symbols: ◰ ◳ ◲ ◱;
  suffix: ': ';
}

◰:  One
◳:  Two
◲:  Three
◱:  Four
5:  Five
6:  Six

첫 번째 카운터 심볼은 first symbol value의 표현이 되고, 다음 값들은 차례대로 카운터 심볼로 표현됩니다. 카운터 심볼 리스트가 모두 소진되면, 그 이후의 값은 이 카운터 스타일로 표현할 수 없으며 폴백 스타일로 표현해야 합니다.

3.1.3. 반복 심볼: symbolic 시스템

symbolic 카운터 시스템은 제공된 심볼들을 반복적으로 순환시키면서, 두 번째 순환에는 두 번, 세 번째에는 세 번 등, 각 심볼을 여러 번 반복합니다. 예를 들어, 원래 심볼이 "*"와 "†"라면, 두 번째 순환에서는 "**"와 "††"이 되고, 세 번째에서는 "***"와 "†††" 등이 됩니다. 각주 스타일 마커 등에 사용할 수 있고, alphabetic 시스템과는 조금 다른 방식으로 알파벳 목록을 표현할 때도 사용됩니다.

system이 symbolic인 경우, symbols 디스크립터에는 적어도 하나 이상의 카운터 심볼이 포함되어야 합니다. 이 시스템은 양수 카운터 값에만 정의됩니다.

@counter-style footnote {
  system: symbolic;
  symbols: '*' ⁑ † ‡;
  suffix: " ";
}

*   One
⁑   Two
†   Three
‡   Four
**  Five
⁑⁑  Six

@counter-style upper-alpha-legal {
  system: symbolic;
  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;
}

표현을 만들려면 다음 알고리즘을 따르십시오:

N은 카운터 심볼 리스트의 길이, value는 초기 카운터 값, S는 초기 빈 문자열, symbol(n)은 리스트에서 n번째 카운터 심볼입니다. (0부터 시작)

1. chosen symbol을 symbol( (value - 1) mod N)로 설정합니다.
2. representation length를 ceil( value / N )로 설정합니다.
3. chosen symbol을 representation length 만큼 S에 추가합니다.

마지막으로 S를 반환합니다.

3.1.4. 일대일 대응 숫자: alphabetic 시스템

alphabetic 카운터 시스템은 카운터 심볼 리스트를 알파벳 숫자 체계의 숫자로 해석합니다. 이는 기본 lower-alpha 카운터 스타일과 유사하며, "a", "b", "c"에서 "aa", "ab", "ac"로 넘어갑니다. 알파벳 숫자 체계에는 0을 나타내는 숫자가 없으므로, 자릿수가 늘어날 때 첫 값은 항상 첫 번째 숫자만으로 이루어집니다. 알파벳 숫자 체계는 목록에서 자주 사용되며, 많은 스프레드시트 프로그램에서 열 번호로도 사용됩니다. 리스트의 첫 번째 카운터 심볼은 숫자 1로, 두 번째는 숫자 2로 해석됩니다.

system이 alphabetic인 경우, symbols 디스크립터에는 적어도 두 개 이상의 카운터 심볼이 포함되어야 합니다. 이 시스템은 양의 카운터 값에만 정의됩니다.

바둑돌을 사용하는 카운터 스타일은 다음과 같이 정의할 수 있습니다:

@counter-style go {
  system: alphabetic;
  symbols: url(white.svg) url(black.svg);
  suffix: " ";
}

이 스타일을 사용하면 다음과 같은 목록이 생성됩니다:

1
2
3
4
5
6
7

참고: 이 예시는 SVG 이미지를 지원해야 제대로 표시됩니다.

N개의 카운터 심볼이 있으면, 표현은 카운터 심볼을 숫자로 사용하는 진법 N의 알파벳 숫자입니다. 표현을 만들려면 다음 알고리즘을 따르십시오:

N을 카운터 심볼 리스트의 길이로 하고, value는 초기 카운터 값, S는 빈 문자열, symbol(n)은 리스트에서 n번째 카운터 심볼입니다. (0부터 시작)

value가 0이 아닐 때까지 반복합니다:

1. value를 value - 1로 설정합니다.
2. symbol( value mod N )을 S 앞에 추가합니다.
3. value를 floor( value / N )로 설정합니다.

마지막으로 S를 반환합니다.

3.1.5. 위치 숫자: numeric 시스템

numeric 카운터 시스템은 카운터 심볼 리스트를 "자리값" 숫자 체계의 숫자로 해석합니다. 이는 기본 decimal 카운터 스타일과 유사합니다. 리스트의 첫 번째 카운터 심볼은 숫자 0, 두 번째는 숫자 1로 해석됩니다.

system이 numeric인 경우, symbols 디스크립터에는 적어도 두 개 이상의 카운터 심볼이 포함되어야 합니다. 이 시스템은 모든 카운터 값에 대해 정의됩니다.

@counter-style trinary {
  system: numeric;
  symbols: '0' '1' '2';
}

1.   첫 번째
2.   두 번째
10.  세 번째
11.  네 번째
12.  다섯 번째
20.  여섯 번째

N개의 카운터 심볼이 있으면, 표현은 카운터 심볼을 숫자로 사용하는 진법 N의 숫자입니다. 표현을 만들려면 다음 알고리즘을 따르십시오:

N을 카운터 심볼 리스트의 길이로 하고, value는 초기 카운터 값, S는 빈 문자열, symbol(n)은 리스트에서 n번째 카운터 심볼입니다. (0부터 시작)

1. value가 0이면 symbol(0)을 S에 추가하고 S를 반환합니다.
2. value가 0이 아닐 때까지 반복합니다:
   1. symbol( value mod N )을 S 앞에 추가합니다.
   2. value를 floor( value / N )로 설정합니다.
3. S를 반환합니다.

3.1.6. 누적 숫자: additive 시스템

additive 카운터 시스템은 "기호-값" 숫자 체계를 표현하는데 사용합니다. 이는 같은 위치에 숫자를 재사용하기보다는 훨씬 더 큰 값을 갖는 추가 숫자를 정의하여, 모든 숫자를 더해서 값을 얻는 방식입니다. 로마 숫자나 세계 여러 숫자 체계에서 사용됩니다.

system이 additive인 경우, additive-symbols 디스크립터에는 적어도 하나 이상의 additive tuple이 포함되어야 합니다. 이 시스템은 원칙적으로 모든 카운터 값에 대해 정의됩니다 (정확한 내용은 아래 알고리즘 참고).

@counter-style dice {
  system: additive;
  additive-symbols: 6 ⚅, 5 ⚄, 4 ⚃, 3 ⚂, 2 ⚁, 1 ⚀;
  suffix: " ";
}

  ⚀  첫 번째
  ⚁  두 번째
  ⚂  세 번째
...
 ⚅⚄  열한 번째
 ⚅⚅  열두 번째
⚅⚅⚀  열세 번째

참고: 이 명세서의 모든 미리 정의된 additive @counter-style 규칙은 범위 내 모든 값에 대해 표현을 생성하지만, additive-symbols 값에 따라 위 알고리즘으로 표현을 만들지 못하는 경우도 있습니다. 예를 들어 @counter-style이 additive-symbols: 3 "a", 2 "b";로 정의되면, 위 알고리즘은 카운터 값 4에 대해 표현을 만들지 못하지만 실제로는 "bb" 표현도 가능합니다. 아쉽지만, 이 알고리즘이 카운터 값 크기에 대해 선형 시간에 동작해야 한다는 성질을 유지하기 위해 필요합니다.

3.1.7. 기존 카운터 스타일 확장: extends 시스템

extends 시스템은 작성자가 다른 카운터 스타일의 알고리즘을 사용하면서, 음수 부호, 접미사 등 다른 부분을 변경할 수 있게 합니다. extends 시스템을 사용하는 카운터 스타일은, 지정하지 않은 디스크립터를 초기값 대신 확장한 카운터 스타일에서 가져와야 합니다.

@counter-style이 extends 시스템을 사용할 경우, symbols 또는 additive-symbols 디스크립터를 포함하면 @counter-style 규칙이 무효가 됩니다.

지정한 <counter-style-name>이 ASCII 대소문자 구분 없이 disc, circle, square, disclosure-open, disclosure-closed와 일치하면(모두 미리 정의된 symbolic 카운터 스타일임), extend는 표준 스타일시트에 정의된 "표준" 규칙을 확장합니다 (사용자 에이전트별로 다르게 그릴 수 있는 예외가 아니라).

지정한 카운터 스타일 이름이 정의된 카운터 스타일 이름이 아니면, decimal 카운터 스타일을 확장하는 것으로 처리해야 합니다. 하나 이상의 @counter-style 규칙이 extends 값으로 서로 순환을 구성하면, 순환에 참여하는 모든 카운터 스타일은 decimal 카운터 스타일을 확장하는 것으로 처리해야 합니다.

1) 첫 번째 항목
2) 두 번째 항목
3) 세 번째 항목

@counter-style decimal-paren {
  system: extends decimal;
  suffix: ") ";
}

3.2. 음수 값 서식 지정: negative 디스크립터

negative 디스크립터는 카운터 값이 음수일 때 표현을 어떻게 변경할지 정의합니다.

값의 첫 번째 <symbol>은 카운터 값이 음수일 때 표현 앞에 붙습니다. 두 번째 <symbol>이 지정된 경우, 음수일 때 표현 뒤에 붙습니다.

모든 system 값이 음수 부호를 사용하는 것은 아닙니다. 특히, 카운터 스타일은 음수 부호를 사용한다 는 system 값이 symbolic, alphabetic, numeric, additive, 또는 extends이고, 확장된 카운터 스타일이 음수 부호를 사용한다면 해당됩니다. 카운터 스타일이 음수 부호를 사용하지 않는 경우, 카운터 표현을 생성할 때 음수 부호를 무시합니다.

3.3. 마커 앞 심볼: prefix 디스크립터

prefix 디스크립터는 마커 표현 앞에 붙는 <symbol>을 지정합니다. prefix는 음수 부호보다 먼저 붙습니다.

참고: prefix는 ::marker 의사 요소의 기본 콘텐츠를 만드는 알고리즘에 의해서만 추가됩니다; counter() 또는 counters() 함수를 사용할 때는 자동으로 추가되지 않습니다.

3.4. 마커 뒤 심볼: suffix 디스크립터

suffix 디스크립터는 마커 표현 뒤에 붙는 <symbol>을 지정합니다. suffix는 음수 부호 뒤에 붙습니다.

참고: suffix는 ::marker 의사 요소의 기본 콘텐츠를 만드는 알고리즘에 의해서만 추가됩니다; counter()나 counters() 함수에서는 자동으로 추가되지 않습니다.

3.5. 카운터 범위 제한: range 디스크립터

range 디스크립터는 카운터 스타일이 정의되는 범위를 지정합니다. 만약 카운터 스타일이 범위를 벗어난 값을 표현해야 할 때, 폴백 카운터 스타일로 내려갑니다.

auto

범위는 카운터 시스템에 따라 달라집니다:

• cyclic, numeric, fixed 시스템의 경우, 범위는 음의 무한대부터 양의 무한대까지입니다.
• alphabetic, symbolic 시스템의 경우, 범위는 1부터 양의 무한대까지입니다.
• additive 시스템의 경우, 범위는 0부터 양의 무한대까지입니다.
• extends 시스템의 경우, 범위는 확장된 시스템의 auto 결과와 동일합니다; 복잡한 미리 정의된 스타일(§ 7 복잡한 미리 정의된 카운터 스타일)을 확장하는 경우, 해당 스타일의 정의된 범위를 따릅니다.

[ [ <integer> | infinite ]{2} ]#

이는 콤마로 구분된 범위 리스트를 정의합니다. 각 범위는 첫 번째 값이 하한, 두 번째 값이 상한이며, 이 범위는 양쪽 값을 포함합니다. infinite를 범위의 첫 번째 값으로 사용하면 음의 무한대를, 두 번째 값으로 사용하면 양의 무한대를 의미합니다. 카운터 스타일의 범위는 리스트에 정의된 모든 범위의 합집합입니다.

어떤 범위의 하한이 상한보다 높으면, 디스크립터 전체가 무효가 되어 무시되어야 합니다.

구현체는 최소 -2¹⁵부터 최대 2¹⁵-1까지의 범위를 지원해야 합니다 (signed 2바이트 int의 범위). 더 넓은 범위를 지원할 수도 있습니다. 지정한 경계 값이 구현체가 지원하는 범위를 벗어나면, 지원 가능한 가장 가까운 값으로 처리해야 합니다.

3.6. 0-패딩 및 고정 폭 표현: pad 디스크립터

pad 디스크립터는 작성자가 "고정 폭" 카운터 스타일을 지정할 수 있게 하며, pad 값보다 짧은 표현은 지정한 <symbol>로 패딩됩니다. pad 값보다 긴 표현은 일반적으로 생성됩니다.

<integer [0,∞]> && <symbol>

<integer>는 모든 카운터 표현이 도달해야 하는 최소 길이를 지정합니다.

difference는 지정한 <integer>에서 문자 클러스터의 개수(카운터 값의 초기 표현에서)를 뺀 값입니다. (참고: 카운터 표현 생성 알고리즘에 따라, prefix/suffix/negative 추가 이전에 적용됩니다.) 카운터 값이 음수이고 카운터 스타일이 음수 부호를 사용하면, difference에서 negative 디스크립터의 <symbol>(들)의 문자 클러스터 개수만큼 더 뺍니다.

difference가 0보다 크면, 지정한 <symbol>을 difference만큼 표현 앞에 추가합니다.

음수 <integer> 값은 허용되지 않습니다.

참고: pad 디스크립터는 표현의 문자 클러스터 개수를 기준으로 패딩하지만, <symbol>로 패딩합니다. 만약 지정한 pad <symbol>이 여러 문자로 구성되어 있다면, 원하는 효과가 나지 않을 수 있습니다. 문자 클러스터 개수를 pad <symbol>에 사용할 수 있는 방법은 없습니다. 작성자에게는 <symbol>을 한 개의 문자 클러스터로 지정할 것을 권장합니다.

3.7. 폴백 정의: fallback 디스크립터

fallback 디스크립터는 현재 카운터 스타일이 특정 카운터 값을 표현하지 못할 때 사용할 폴백 카운터 스타일을 지정합니다. 예를 들어, 1-10 범위로 정의된 카운터 스타일이 11 값을 표현해야 할 때, 해당 값의 표현은 폴백 카운터 스타일(또는 폴백 스타일이 그 값을 표현할 수 없으면 그 폴백 스타일의 폴백 스타일 등)로 생성됩니다.

fallback 디스크립터의 값이 정의된 카운터 스타일 이름이 아니면, fallback 디스크립터의 사용 값은 decimal로 처리됩니다. 마찬가지로, 폴백을 따라가면서 해당 값에 대해 표현 가능한 카운터 스타일을 찾는 과정에서 순환(loop)이 발견되면, decimal 스타일을 대신 사용해야 합니다.

폴백 순환(loop)을 지정하는 것이 반드시 오류인 것은 아닙니다. 예를 들어, 짝수와 홀수 값에 대해 매우 다르게 표현되는 카운터 스타일이 필요하다면, 각각 홀수만 표현하는 스타일과 짝수만 표현하는 스타일을 만들고 서로를 폴백으로 지정할 수 있습니다. 이 경우 폴백 그래프는 순환 구조지만, 폴백을 따라가면서 실제로 순환에 빠지는 경우는 없습니다. 모든 카운터 값은 둘 중 하나의 스타일로 표현됩니다.

3.8. 마커 문자: symbols 및 additive-symbols 디스크립터

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

symbols와 additive-symbols 기술자는 system 기술자에 의해 지정된 마커 생성 알고리즘에서 사용되는 기호를 지정합니다. @counter-style 규칙은 카운터 시스템이 cyclic, numeric, alphabetic, symbolic, 또는 fixed인 경우에는 유효한 symbols 기술자를, 카운터 시스템이 additive인 경우에는 유효한 additive-symbols 기술자를 반드시 포함해야 합니다; 그 외의 경우 @counter-style은 counter style을 정의하지 않으나(여전히 유효한 at-rule임) 규칙 자체는 유효합니다.

일부 카운터 시스템은 symbols 기술자가 최소 두 개 이상의 항목을 가져야 한다고 지정합니다. 만약 카운터 스타일의 시스템이 그렇고, symbols 기술자에 단일 항목만 있으면, @counter-style 규칙은 counter style을 정의하지 않습니다.

symbols 기술자 값의 각 항목은 counter symbol을 정의하며, 이것은 카운터 스타일의 시스템에 따라 다르게 해석됩니다. additive-symbols 기술자 값의 각 항목은 additive tuple을 정의하는데, 이는 counter symbol과 정수 가중치로 구성됩니다. 각 가중치는 0 이상의 정수여야 하며, additive tuples는 반드시 엄격하게 내림차순으로 지정해야 합니다; 그렇지 않으면 선언은 무효이며 무시되어야 합니다.

Counter symbol은 문자열, 이미지, 또는 식별자가 될 수 있으며, 세 가지 타입은 하나의 기술자에 혼합하여 사용할 수 있습니다. 카운터 표현은 카운터 심볼을 서로 연결하여 구성됩니다. 식별자는 동일한 문자를 가진 문자열로 렌더링됩니다. 이미지는 인라인 대체 요소로 렌더링됩니다. 이미지 counter symbol의 기본 객체 크기는 1em × 1em 정사각형입니다.

참고: <image> 문법은 현재 <symbol>에서 위험에 처해있습니다. 현재 구현 계획이 없으며, counter() 사용 시 완전히 처리되지 않은 복잡성을 야기합니다.

참고: 심볼을 정의할 때 문자열 대신 식별자를 사용할 경우, 식별자 문법에 주의해야 합니다. 특히 "*" 같은 ASCII 문자 비영문자는 식별자가 아니므로 문자열로 감싸야 합니다. 여러 카운터 스타일에서 사용하는 16진수 이스케이프(hex escape)는 뒤따르는 공백을 "먹어버리므로"(이스케이프 다음에 숫자가 와도 모호하지 않게 하기 위함), 이스케이프를 구분하려면 두 개의 공백을 넣거나, 그렇지 않으면 인접한 문자로 인식되어 하나의 식별자로 취급됩니다. 예를 들어 symbols: \660 \661;은 U+0660과 U+0661을 하나의 심볼로 정의하며, 두 개를 의도했다면 문자열로 이스케이프를 감싸거나 symbols: "\660" "\661"처럼 두 개의 공백을 넣어야 합니다.

3.9. 음성 합성: speak-as 디스크립터

카운터 스타일은 시각적으로 명확해도, 음성 합성기나 시각적이지 않은 수단으로 의미 있게 표현하기 어렵거나 단순하게 읽었을 때 의미가 없을 수 있습니다. speak-as 디스크립터는 해당 카운터 스타일로 포맷된 값을 어떻게 말할지(음성 합성) 정의합니다. 접근성 기술은 카운터 스타일을 읽을 때 이 spoken form을 사용해야 하며, speak-as 값을 음성 이외의 출력 변환에 참고할 수도 있습니다. 값의 의미는 다음과 같습니다:

auto

카운터 스타일의 system이 alphabetic이면, 이 값은 spell-out과 동일하게 동작합니다. system이 cyclic이면, 이 값은 bullets와 동일하게 동작합니다. system이 extends이면, 이 값은 확장된 스타일의 auto와 동일하게 동작합니다. 그 외에는 numbers와 동일하게 동작합니다.

bullets

UA는 비정렬 목록 항목이 읽힐 때 UA가 정의한 구문 또는 오디오 신호를 말합니다.

numbers

카운터의 숫자 값을 콘텐츠 언어로 숫자로 읽어줍니다.

words

값을 일반적으로 카운터 표현 생성 알고리즘으로 표현한 뒤, 콘텐츠 언어로 일반 텍스트처럼 읽습니다. 카운터 표현에 이미지가 포함되어 있으면, numbers처럼 처리합니다.

spell-out

값을 카운터 표현 생성 알고리즘으로 표현한 뒤, 콘텐츠 언어에서 글자별로 하나씩 읽습니다. UA가 심볼을 어떻게 발음해야 할지 알 수 없거나 (혹은 카운터 표현에 이미지가 포함되어 있으면), numbers처럼 처리해야 합니다.

예를 들어, lower-greek을 영어로 읽으면 "alpha", "beta", "gamma" 등으로, upper-latin을 프랑스어로 읽으면 (음성 표기법으로) /a/, /be/, /se/ 등으로 읽어줍니다.

<counter-style-name>

카운터 값은 지정한 스타일로 읽어줍니다 (counter 값을 표현할 때 fallback 디스크립터와 유사하게 동작). 지정한 스타일이 없으면, 이 값은 auto로 처리됩니다. speak-as 참조를 따라가다가 순환(loop)이 발견되면, 해당 스타일들은 auto로 처리합니다.

@counter-style circled-lower-latin {
  system: alphabetic;
  speak-as: lower-latin;
  symbols: ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ;
  suffix: " ";
}

4. 익명 카운터 스타일 정의: symbols() 함수

symbols() 함수는 counter style을 속성 값 안에서 인라인으로 정의할 수 있게 해줍니다. 스타일을 스타일시트에서 한 번만 사용할 때 전체 @counter-style 규칙을 정의하기엔 과할 경우에 유용합니다. 전체 @counter-style 규칙의 모든 기능을 제공하지는 않지만, 실제로 쓸 수 있을 만큼 충분한 부분 집합을 제공합니다. symbols() 규칙의 문법은 다음과 같습니다:

symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ )
<symbols-type> = cyclic | numeric | alphabetic | symbolic | fixed

symbols() 함수는 이름이 없는 익명 카운터 스타일을 정의하며, prefix는 "" (빈 문자열), suffix는 " " (U+0020 SPACE), range는 auto, fallback은 decimal, negative는 "\2D" ("-" 하이픈 마이너스), pad는 0 "", speak-as는 auto입니다. 카운터 스타일의 알고리즘은 이전 장에서 설명한 시스템과 제공된 값에 따라 생성됩니다 — 또는 시스템이 생략된 경우 symbolic이 사용됩니다 — 그리고 제공된 <string>과 <image>가 symbols 속성 값으로 사용됩니다. 시스템이 fixed인 경우, first symbol value는 1입니다.

시스템이 alphabetic 또는 numeric일 경우, <string>이나 <image>가 최소 두 개 이상 있어야 하며, 그렇지 않으면 함수가 무효가 됩니다.

ol { list-style: symbols("*" "\2020" "\2021" "\A7"); }

*   One
†   Two
‡   Three
§   Four
**  Five
††  Six
‡‡  Seven

ol { list-style: symbols(cyclic "*" "\2020" "\2021" "\A7"); }

*   One
†   Two
‡   Three
§   Four
*   Five
†   Six
‡   Seven

참고: symbols() 함수는 문자열과 이미지만 허용하며, symbols 디스크립터는 @counter-style 규칙에서 식별자도 허용합니다.

5. list-style-type, counter(), counters() 확장

CSS Level 2 [CSS21]에서는 list-style-type 속성 및 counter(), counters() 표기법에서 각 카운터 스타일을 식별하는 여러 미리 정의된 키워드를 사용할 수 있습니다. 이 모듈은 이러한 기능을 확장하여 아래에 정의된 <counter-style> 타입을 사용할 수 있게 합니다:

<counter-style> = <counter-style-name> | <symbols()>

<counter-style-name>을 사용했는데 해당 이름의 카운터 스타일이 존재하지 않으면, decimal 카운터 스타일과 동일하게 동작해야 합니다 (단, compute 값이 decimal이 되지는 않음).

이러한 문맥에서 사용할 때, <counter-style-name>은 트리 범위 참조(tree-scoped reference)입니다.

6. 간단한 미리 정의된 카운터 스타일

아래 스타일시트는 @counter-style 규칙을 사용하여 CSS 2와 CSS 2.1에서 정의된 모든 카운터 스타일을 다시 정의합니다. 이 스타일시트는 규범적(noramtive)입니다—UA는 자신의 UA 스타일시트에 반드시 포함해야 하며 (또는 최소한 해당 규칙이 그 수준에서 정의된 것처럼 동작해야 합니다).

6.1. 숫자형: decimal, decimal-leading-zero, arabic-indic, armenian, upper-armenian, lower-armenian, bengali, cambodian, khmer, cjk-decimal, devanagari, georgian, gujarati, gurmukhi, hebrew, kannada, lao, malayalam, mongolian, myanmar, oriya, persian, lower-roman, upper-roman, tamil, telugu, thai, tibetan

decimal

서양 10진수 숫자 (예: 1, 2, 3, ..., 98, 99, 100).

decimal-leading-zero

앞에 0을 붙인 10진수 숫자 (예: 01, 02, 03, ..., 98, 99, 100).

arabic-indic

아라비아-인디안 숫자 (예: ١‎, ٢‎, ٣‎, ٤‎, ..., ٩٨‎, ٩٩‎, ١٠٠‎).

armenian

upper-armenian

전통 대문자 아르메니아 숫자 (예: Ա, Բ, Գ, ..., ՂԸ, ՂԹ, Ճ).

lower-armenian

소문자 아르메니아 숫자 (예: ա, բ, գ, ..., ղը, ղթ, ճ).

bengali

벵골어 숫자 (예: ১, ২, ৩, ..., ৯৮, ৯৯, ১০০).

cambodian

khmer

캄보디아/크메르 숫자 (예: ១, ២, ៣, ..., ៩៨, ៩៩, ១០០).

cjk-decimal

한자 10진수 (예: 一, 二, 三, ..., 九八, 九九, 一〇〇).

devanagari

데바나가리 숫자 (예: १, २, ३, ..., ९८, ९९, १००).

georgian

전통 조지아 숫자 (예: ა, ბ, გ, ..., ჟჱ, ჟთ, რ).

gujarati

구자라트어 숫자 (예: ૧, ૨, ૩, ..., ૯૮, ૯૯, ૧૦૦).

gurmukhi

구르무키 숫자 (예: ੧, ੨, ੩, ..., ੯੮, ੯੯, ੧੦੦).

hebrew

전통 히브리 숫자 (예: א‎, ב‎, ג‎, ..., צח‎, צט‎, ק‎).

kannada

칸나다 숫자 (예: ೧, ೨, ೩, ..., ೯೮, ೯೯, ೧೦೦).

lao

라오 숫자 (예: ໑, ໒, ໓, ..., ໙໘, ໙໙, ໑໐໐).

malayalam

말라얄람 숫자 (예: ൧, ൨, ൩, ..., ൯൮, ൯൯, ൧൦൦).

mongolian

몽골어 숫자 (예: ᠑, ᠒, ᠓, ..., ᠙᠘, ᠙᠙, ᠑᠐᠐).

myanmar

미얀마(버마) 숫자 (예: ၁, ၂, ၃, ..., ၉၈, ၉၉, ၁၀၀).

oriya

오리야 숫자 (예: ୧, ୨, ୩, ..., ୯୮, ୯୯, ୧୦୦).

persian

페르시아 숫자 (예: ۱, ۲, ۳, ۴, ..., ۹۸, ۹۹, ۱۰۰).

lower-roman

소문자 ASCII 로마 숫자 (예: i, ii, iii, ..., xcviii, xcix, c).

upper-roman

대문자 ASCII 로마 숫자 (예: I, II, III, ..., XCVIII, XCIX, C).

tamil

타밀 숫자 (예: ௧, ௨, ௩, ..., ௯௮, ௯௯, ௧௦௦).

telugu

텔루구 숫자 (예: ౧, ౨, ౩, ..., ౯౮, ౯౯, ౧౦౦).

thai

태국(샴) 숫자 (예: ๑, ๒, ๓, ..., ๙๘, ๙๙, ๑๐๐).

tibetan

티베트 숫자 (예: ༡, ༢, ༣, ..., ༩༨, ༩༩, ༡༠༠).

아래 스타일시트 조각은 이러한 미리 정의된 카운터 스타일의 규범적 정의를 제공합니다:

@counter-style decimal {
  system: numeric;
  symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
}

@counter-style decimal-leading-zero {
  system: extends decimal;
  pad: 2 '0';
}

@counter-style arabic-indic {
  system: numeric;
  symbols: "\660" "\661" "\662" "\663" "\664" "\665" "\666" "\667" "\668" "\669";
  /* ٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩ */
}

@counter-style armenian {
  system: 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 upper-armenian {
  system: extends armenian;
}

@counter-style lower-armenian {
  system: additive;
  range: 1 9999;
  additive-symbols: 9000 "\584", 8000 "\583", 7000 "\582", 6000 "\581", 5000 "\580", 4000 "\57F", 3000 "\57E", 2000 "\57D", 1000 "\57C", 900 "\57B", 800 "\57A", 700 "\579", 600 "\578", 500 "\577", 400 "\576", 300 "\575", 200 "\574", 100 "\573", 90 "\572", 80 "\571", 70 "\570", 60 "\56F", 50 "\56E", 40 "\56D", 30 "\56C", 20 "\56B", 10 "\56A", 9 "\569", 8 "\568", 7 "\567", 6 "\566", 5 "\565", 4 "\564", 3 "\563", 2 "\562", 1 "\561";
  /* 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 bengali {
  system: numeric;
  symbols: "\9E6" "\9E7" "\9E8" "\9E9" "\9EA" "\9EB" "\9EC" "\9ED" "\9EE" "\9EF";
  /* ০ ১ ২ ৩ ৪ ৫ ৬ ৭ ৮ ৯ */
}

@counter-style cambodian {
  system: numeric;
  symbols: "\17E0" "\17E1" "\17E2" "\17E3" "\17E4" "\17E5" "\17E6" "\17E7" "\17E8" "\17E9";
  /* ០ ១ ២ ៣ ៤ ៥ ៦ ៧ ៨ ៩ */
}

@counter-style khmer {
  system: extends cambodian;
}

@counter-style cjk-decimal {
  system: numeric;
  range: 0 infinite;
  symbols: \3007  \4E00  \4E8C  \4E09  \56DB  \4E94  \516D  \4E03  \516B  \4E5D;
  /* 〇 一 二 三 四 五 六 七 八 九 */
  suffix: "\3001";
  /* "、" */
}

@counter-style devanagari {
  system: numeric;
  symbols: "\966" "\967" "\968" "\969" "\96A" "\96B" "\96C" "\96D" "\96E" "\96F";
  /* ० १ २ ३ ४ ५ ६ ७ ८ ९ */
}

@counter-style georgian {
  system: 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 gujarati {
  system: numeric;
  symbols: "\AE6" "\AE7" "\AE8" "\AE9" "\AEA" "\AEB" "\AEC" "\AED" "\AEE" "\AEF";
  /* ૦ ૧ ૨ ૩ ૪ ૫ ૬ ૭ ૮ ૯ */
}

@counter-style gurmukhi {
  system: numeric;
  symbols: "\A66" "\A67" "\A68" "\A69" "\A6A" "\A6B" "\A6C" "\A6D" "\A6E" "\A6F";
  /* ੦ ੧ ੨ ੩ ੪ ੫ ੬ ੭ ੮ ੯ */
}

@counter-style hebrew {
  system: additive;
  range: 1 10999;
  additive-symbols: 10000 \5D9\5F3, 9000 \5D8\5F3, 8000 \5D7\5F3, 7000 \5D6\5F3, 6000 \5D5\5F3, 5000 \5D4\5F3, 4000 \5D3\5F3, 3000 \5D2\5F3, 2000 \5D1\5F3, 1000 \5D0\5F3, 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;
  /* 10000 י׳, 9000 ט׳, 8000 ח׳, 7000 ז׳, 6000 ו׳, 5000 ה׳, 4000 ד׳, 3000 ג׳, 2000 ב׳, 1000 א׳, 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. */
  /* Implementations MAY choose to implement this manually to a higher range; see note below. */
}

@counter-style kannada {
  system: numeric;
  symbols: "\CE6" "\CE7" "\CE8" "\CE9" "\CEA" "\CEB" "\CEC" "\CED" "\CEE" "\CEF";
  /* ೦ ೧ ೨ ೩ ೪ ೫ ೬ ೭ ೮ ೯ */
}

@counter-style lao {
  system: numeric;
  symbols: "\ED0" "\ED1" "\ED2" "\ED3" "\ED4" "\ED5" "\ED6" "\ED7" "\ED8" "\ED9";
  /* ໐ ໑ ໒ ໓ ໔ ໕ ໖ ໗ ໘ ໙ */
}

@counter-style malayalam {
  system: numeric;
  symbols: "\D66" "\D67" "\D68" "\D69" "\D6A" "\D6B" "\D6C" "\D6D" "\D6E" "\D6F";
  /* ൦ ൧ ൨ ൩ ൪ ൫ ൬ ൭ ൮ ൯ */
}

@counter-style mongolian {
  system: numeric;
  symbols: "\1810" "\1811" "\1812" "\1813" "\1814" "\1815" "\1816" "\1817" "\1818" "\1819";
  /* ᠐ ᠑ ᠒ ᠓ ᠔ ᠕ ᠖ ᠗ ᠘ ᠙ */
}

@counter-style myanmar {
  system: numeric;
  symbols: "\1040" "\1041" "\1042" "\1043" "\1044" "\1045" "\1046" "\1047" "\1048" "\1049";
  /* ၀ ၁ ၂ ၃ ၄ ၅ ၆ ၇ ၈ ၉ */
}

@counter-style oriya {
  system: numeric;
  symbols: "\B66" "\B67" "\B68" "\B69" "\B6A" "\B6B" "\B6C" "\B6D" "\B6E" "\B6F";
  /* ୦ ୧ ୨ ୩ ୪ ୫ ୬ ୭ ୮ ୯ */
}

@counter-style persian {
  system: numeric;
  symbols: "\6F0" "\6F1" "\6F2" "\6F3" "\6F4" "\6F5" "\6F6" "\6F7" "\6F8" "\6F9";
  /* ۰ ۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ */
}

@counter-style lower-roman {
  system: additive;
  range: 1 3999;
  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 upper-roman {
  system: additive;
  range: 1 3999;
  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 tamil {
  system: numeric;
  symbols: "\BE6" "\BE7" "\BE8" "\BE9" "\BEA" "\BEB" "\BEC" "\BED" "\BEE" "\BEF";
  /* ௦ ௧ ௨ ௩ ௪ ௫ ௬ ௭ ௮ ௯ */
}

@counter-style telugu {
  system: numeric;
  symbols: "\C66" "\C67" "\C68" "\C69" "\C6A" "\C6B" "\C6C" "\C6D" "\C6E" "\C6F";
  /* ౦ ౧ ౨ ౩ ౪ ౫ ౬ ౭ ౮ ౯ */
}

@counter-style thai {
  system: numeric;
  symbols: "\E50" "\E51" "\E52" "\E53" "\E54" "\E55" "\E56" "\E57" "\E58" "\E59";
  /* ๐ ๑ ๒ ๓ ๔ ๕ ๖ ๗ ๘ ๙ */
}

@counter-style tibetan {
  system: numeric;
  symbols: "\F20" "\F21" "\F22" "\F23" "\F24" "\F25" "\F26" "\F27" "\F28" "\F29";
  /* ༠ ༡ ༢ ༣ ༤ ༥ ༦ ༧ ༨ ༩ */
}

구현체는 hebrew를 위 @counter-style 규칙에 지정된 범위까지 반드시 구현해야 하며, 더 넓은 범위까지 구현해도 됩니다. 그럴 경우, 해당 range 디스크립터는 구현된 범위를 반영해야 합니다.

6.2. 알파벳형: lower-alpha, lower-latin, upper-alpha, upper-latin, lower-greek, hiragana, hiragana-iroha, katakana, katakana-iroha

lower-alpha

lower-latin

소문자 ASCII 문자 (예: a, b, c, ..., z, aa, ab).

upper-alpha

upper-latin

대문자 ASCII 문자 (예: A, B, C, ..., Z, AA, AB).

lower-greek

소문자 고전 그리스 문자 (예: α, β, γ, ..., ω, αα, αβ).

hiragana

사전순 히라가나 문자 (예: あ, い, う, ..., ん, ああ, あい).

hiragana-iroha

이로하순 히라가나 문자 (예: い, ろ, は, ..., す, いい, いろ).

katakana

사전순 가타카나 문자 (예: ア, イ, ウ, ..., ン, アア, アイ).

katakana-iroha

이로하순 가타카나 문자 (예: イ, ロ, ハ, ..., ス, イイ, イロ)

아래 스타일시트 조각은 이러한 미리 정의된 카운터 스타일의 규범적 정의를 제공합니다:

@counter-style lower-alpha {
  system: 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 lower-latin {
  system: extends lower-alpha;
}

@counter-style upper-alpha {
  system: 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 upper-latin {
  system: extends upper-alpha;
}

@counter-style lower-greek {
  system: 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 hiragana {
  system: 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" "\3090" "\3091" "\3092" "\3093";
  /* あ い う え お か き く け こ さ し す せ そ た ち つ て と な に ぬ ね の は ひ ふ へ ほ ま み む め も や ゆ よ ら り る れ ろ わ ゐ ゑ を ん */
  suffix: "、";
}

@counter-style hiragana-iroha {
  system: 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";
  /* い ろ は に ほ へ と ち り ぬ る を わ か よ た れ そ つ ね な ら む う ゐ の お く や ま け ふ こ え て あ さ き ゆ め み し ゑ ひ も せ す */
  suffix: "、";
}

@counter-style katakana {
  system: 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" "\30F0" "\30F1" "\30F2" "\30F3";
  /* ア イ ウ エ オ カ キ ク ケ コ サ シ ス セ ソ タ チ ツ テ ト ナ ニ ヌ ネ ノ ハ ヒ フ ヘ ホ マ ミ ム メ モ ヤ ユ ヨ ラ リ ル レ ロ ワ ヰ ヱ ヲ ン */
  suffix: "、";
}

@counter-style katakana-iroha {
  system: 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";
  /* イ ロ ハ ニ ホ ヘ ト チ リ ヌ ル ヲ ワ カ ヨ タ レ ソ ツ ネ ナ ラ ム ウ ヰ ノ オ ク ヤ マ ケ フ コ エ テ ア サ キ ユ 메 미 시 웨 히 모 세 스 */
  suffix: "、";
}

6.3. 상징형: disc, circle, square, disclosure-open, disclosure-closed

disc

채워진 원, • U+2022 BULLET과 유사함.

circle

빈 원, ◦ U+25E6 WHITE BULLET과 유사함.

square

채워진 사각형, ▪ U+25AA BLACK SMALL SQUARE와 유사함.

disclosure-open

disclosure-closed

열림 또는 닫힘 상태를 표시하기에 적합한 심볼, 예: HTML details 요소 등.

아래 스타일시트 조각은 이러한 미리 정의된 카운터 스타일의 규범적 정의를 제공합니다:

@counter-style disc {
  system: cyclic;
  symbols: \2022;
  /* • */
  suffix: " ";
}

@counter-style circle {
  system: cyclic;
  symbols: \25E6;
  /* ◦ */
  suffix: " ";
}

@counter-style square {
  system: cyclic;
  symbols: \25AA;
  /* ▪ */
  suffix: " ";
}

@counter-style disclosure-open {
  system: cyclic;
  suffix: " ";
  /* symbols는 아래 규범 텍스트 참조 */
}

@counter-style disclosure-closed {
  system: cyclic;
  suffix: " ";
  /* symbols는 아래 규범 텍스트 참조 */
}

list-style-type에서 사용할 때, UA는 해당 문자 대신 UA가 생성한 이미지나 UA가 선택한 폰트로 렌더링할 수 있습니다. 이미지를 사용할 경우, 반드시 해당 문자와 유사한 모습이어야 하며, 1em × 1em 정사각형을 보기 좋게 채우도록 크기 맞춰야 합니다.

disclosure-open 및 disclosure-closed 카운터 스타일은 HTML details 요소 등에서 열림/닫힘 상태를 표시하기에 적합한 이미지 또는 문자를 마커로 사용해야 합니다. 이미지가 방향성을 가지면, 요소의 writing mode에 반응해야 하며, 이는 Images 4 모듈의 bidi-sensitive images 기능과 유사합니다. 예를 들어 disclosure-closed 스타일은 U+25B8 BLACK RIGHT-POINTING SMALL TRIANGLE(▸), U+25C2 BLACK LEFT-POINTING SMALL TRIANGLE(◂) 문자를 사용할 수 있고, disclosure-open 스타일은 U+25BE BLACK DOWN-POINTING SMALL TRIANGLE(▾) 문자를 사용할 수 있습니다.

6.4. 고정형: cjk-earthly-branch, cjk-heavenly-stem

cjk-earthly-branch

한자 "지지(地支)" 서수 (예: 子, 丑, 寅, ..., 亥).

cjk-heavenly-stem

한자 "천간(天干)" 서수 (예: 甲, 乙, 丙, ..., 癸)

아래 스타일시트 조각은 이러한 미리 정의된 카운터 스타일의 규범적 정의를 제공합니다:

@counter-style cjk-earthly-branch {
  system: fixed;
  symbols: "\5B50" "\4E11" "\5BC5" "\536F" "\8FB0" "\5DF3" "\5348" "\672A" "\7533" "\9149" "\620C" "\4EA5";
  /* 子 丑 寅 卯 辰 巳 午 未 申 酉 戌 亥 */
  suffix: "、";
}

@counter-style cjk-heavenly-stem {
  system: fixed;
  symbols: "\7532" "\4E59" "\4E19" "\4E01" "\620A" "\5DF1" "\5E9A" "\8F9B" "\58EC" "\7678";
  /* 甲 乙 丙 丁 戊 己 庚 辛 壬 癸 */
  suffix: "、";
}

7. 복잡한 미리 정의된 카운터 스타일

작성자는 @counter-style 규칙으로 직접 카운터 스타일을 정의하거나 미리 정의된 카운터 스타일을 사용할 수 있지만, 일부 카운터 스타일은 규정된 알고리즘으로 표현하기엔 너무 복잡합니다. 이 섹션에서는 이러한 카운터 스타일을 설명합니다.

이 섹션에서 규정한 일부 카운터 스타일은 카운터 값을 생성하는 맞춤 알고리즘(custom algorithm)을 가지지만, 그 외에는 @counter-style 규칙으로 정의된 카운터 스타일과 동일합니다. 예를 들어, 작성자는 extends 시스템에서 이 스타일을 참조하여 알고리즘을 재사용하고 나머지 디스크립터만 교체할 수 있습니다.

이 섹션에서 정의된 모든 카운터 스타일은 spoken form으로 numbers를 사용하며, 음수 부호를 사용합니다.

7.1. 동아시아 장문 카운터 스타일

중국어, 일본어, 한국어는 "십삼천백이십삼"처럼 영어의 "thirteen thousand one hundred and twenty-three"와 유사한 "장문(longhand)" 성격의 카운터 스타일을 갖고 있습니다. 각각 공식(formal)과 비공식(informal) 버전이 있습니다. 공식 스타일은 재무/법률 문서 등에서 주로 사용되며, 문자 변형이 더 어렵도록 설계되어 있습니다.

10,000 이상 숫자를 장문 CJK 스타일로 어떻게 표현하는지가 의견이 분분하므로, 이 섹션에서 정의된 모든 카운터 스타일의 범위는 -9999부터 9999로 규정되어 있지만 구현체는 더 넓은 범위를 지원할 수 있습니다. 구현체 지원 범위 밖에서는 폴백으로 cjk-decimal이 사용됩니다.

참고: 구현체는 10,000 이상 카운터 표현에 대해 연구 및 구현을 권장하며, 일반적으로 받아들여지는 답변이 발견될 경우 CSS 작업 그룹에 데이터를 보고하는 것이 좋습니다. 이에 관한 이전 연구는 이전 초안에 일부 포함되어 있습니다.

7.1.1. 일본어: japanese-informal 및 japanese-formal

japanese-informal

일본어 한자 비공식 숫자 표기 (예: 千百十一)

japanese-formal

일본어 한자 공식 숫자 표기 (예: 壱阡壱百壱拾壱)

@counter-style japanese-informal {
  system: additive;
  range: -9999 9999;
  additive-symbols: 9000 \4E5D\5343, 8000 \516B\5343, 7000 \4E03\5343, 6000 \516D\5343, 5000 \4E94\5343, 4000 \56DB\5343, 3000 \4E09\5343, 2000 \4E8C\5343, 1000 \5343, 900 \4E5D\767E, 800 \516B\767E, 700 \4E03\767E, 600 \516D\767E, 500 \4E94\767E, 400 \56DB\767E, 300 \4E09\767E, 200 \4E8C\767E, 100 \767E, 90 \4E5D\5341, 80 \516B\5341, 70 \4E03\5341, 60 \516D\5341, 50 \4E94\5341, 40 \56DB\5341, 30 \4E09\5341, 20 \4E8C\5341, 10 \5341, 9 \4E5D, 8 \516B, 7 \4E03, 6 \516D, 5 \4E94, 4 \56DB, 3 \4E09, 2 \4E8C, 1 \4E00, 0 \3007;
  /* 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 一, 0 〇 */
  suffix: '\3001';
  /* 、 */
  negative: "\30DE\30A4\30CA\30B9";
  /* 마이너스 */
  fallback: cjk-decimal;
}

@counter-style japanese-formal {
  system: additive;
  range: -9999 9999;
  additive-symbols: 9000 \4E5D\9621, 8000 \516B\9621, 7000 \4E03\9621, 6000 \516D\9621, 5000 \4F0D\9621, 4000 \56DB\9621, 3000 \53C2\9621, 2000 \5F10\9621, 1000 \58F1\9621, 900 \4E5D\767E, 800 \516B\767E, 700 \4E03\767E, 600 \516D\767E, 500 \4F0D\767E, 400 \56DB\767E, 300 \53C2\767E, 200 \5F10\767E, 100 \58F1\767E, 90 \4E5D\62FE, 80 \516B\62FE, 70 \4E03\62FE, 60 \516D\62FE, 50 \4F0D\62FE, 40 \56DB\62FE, 30 \53C2\62FE, 20 \5F10\62FE, 10 \58F1\62FE, 9 \4E5D, 8 \516B, 7 \4E03, 6 \516D, 5 \4F0D, 4 \56DB, 3 \53C2, 2 \5F10, 1 \58F1, 0 \96F6;
  /* 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 壱, 0 零 */
  suffix: '\3001';
  /* 、 */
  negative: "\30DE\30A4\30CA\30B9";
  /* 마이너스 */
  fallback: cjk-decimal;
}

7.1.2. 한국어: korean-hangul-formal, korean-hanja-informal, 및 korean-hanja-formal

korean-hangul-formal

한글 숫자 표기 (예: 일천일백일십일)

korean-hanja-informal

한자 비공식 숫자 표기 (예: 千百十一)

korean-hanja-formal

한자 공식 숫자 표기 (예: 壹仟壹百壹拾壹)

@counter-style korean-hangul-formal {
  system: additive;
  range: -9999 9999;
  additive-symbols: 9000 \AD6C\CC9C, 8000 \D314\CC9C, 7000 \CE60\CC9C, 6000 \C721\CC9C, 5000 \C624\CC9C, 4000 \C0AC\CC9C, 3000 \C0BC\CC9C, 2000 \C774\CC9C, 1000 \C77C\CC9C, 900 \AD6C\BC31, 800 \D314\BC31, 700 \CE60\BC31, 600 \C721\BC31, 500 \C624\BC31, 400 \C0AC\BC31, 300 \C0BC\BC31, 200 \C774\BC31, 100 \C77C\BC31, 90 \AD6C\C2ED, 80 \D314\C2ED, 70 \CE60\C2ED, 60 \C721\C2ED, 50 \C624\C2ED, 40 \C0AC\C2ED, 30 \C0BC\C2ED, 20 \C774\C2ED, 10 \C77C\C2ED, 9 \AD6C, 8 \D314, 7 \CE60, 6 \C721, 5 \C624, 4 \C0AC, 3 \C0BC, 2 \C774, 1 \C77C, 0 \C601;
  /* 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 일, 0 영 */
  suffix: ', ';
  negative: "\B9C8\C774\B108\C2A4  ";
  /* 마이너스 (공백 포함) */
}

@counter-style korean-hanja-informal {
  system: additive;
  range: -9999 9999;
  additive-symbols: 9000 \4E5D\5343, 8000 \516B\5343, 7000 \4E03\5343, 6000 \516D\5343, 5000 \4E94\5343, 4000 \56DB\5343, 3000 \4E09\5343, 2000 \4E8C\5343, 1000 \5343, 900 \4E5D\767E, 800 \516B\767E, 700 \4E03\767E, 600 \516D\767E, 500 \4E94\767E, 400 \56DB\767E, 300 \4E09\767E, 200 \4E8C\767E, 100 \767E, 90 \4E5D\5341, 80 \516B\5341, 70 \4E03\5341, 60 \516D\5341, 50 \4E94\5341, 40 \56DB\5341, 30 \4E09\5341, 20 \4E8C\5341, 10 \5341, 9 \4E5D, 8 \516B, 7 \4E03, 6 \516D, 5 \4E94, 4 \56DB, 3 \4E09, 2 \4E8C, 1 \4E00, 0 \96F6;
  /* 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 一, 0 零 */
  suffix: ', ';
  negative: "\B9C8\C774\B108\C2A4  ";
  /* 마이너스 (공백 포함) */
}

@counter-style korean-hanja-formal {
  system: additive;
  range: -9999 9999;
  additive-symbols: 9000 \4E5D\4EDF, 8000 \516B\4EDF, 7000 \4E03\4EDF, 6000 \516D\4EDF, 5000 \4E94\4EDF, 4000 \56DB\4EDF, 3000 \53C3\4EDF, 2000 \8CB3\4EDF, 1000 \58F9\4EDF, 900 \4E5D\767E, 800 \516B\767E, 700 \4E03\767E, 600 \516D\767E, 500 \4E94\767E, 400 \56DB\767E, 300 \53C3\767E, 200 \8CB3\767E, 100 \58F9\767E, 90 \4E5D\62FE, 80 \516B\62FE, 70 \4E03\62FE, 60 \516D\62FE, 50 \4E94\62FE, 40 \56DB\62FE, 30 \53C3\62FE, 20 \8CB3\62FE, 10 \58F9\62FE, 9 \4E5D, 8 \516B, 7 \4E03, 6 \516D, 5 \4E94, 4 \56DB, 3 \53C3, 2 \8CB3, 1 \58F9, 0 \96F6;
  /* 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 壹, 0 零 */
  suffix: ', ';
  negative: "\B9C8\C774\B108\C2A4  ";
  /* 마이너스 (공백 포함) */
}

7.1.3. 중국어: simp-chinese-informal, simp-chinese-formal, trad-chinese-informal, 및 trad-chinese-formal

simp-chinese-informal

중국어(간체) 비공식 숫자 표기 (예: 一千一百一十一)

simp-chinese-formal

중국어(간체) 공식 숫자 표기 (예: 壹仟壹佰壹拾壹)

trad-chinese-informal

중국어(번체) 비공식 숫자 표기 (예: 一千一百一十一)

trad-chinese-formal

중국어(번체) 공식 숫자 표기 (예: 壹仟壹佰壹拾壹)

cjk-ideographic

이 카운터 스타일은 trad-chinese-informal과 동일합니다. (유지보수 목적)

중국어 장문 스타일은 거의 동일한 알고리즘으로 정의되어 있습니다 (여기서 하나의 알고리즘으로 명시하되, 차이는 필요한 곳에서만 강조함), 다만 사용하는 문자 집합이 다릅니다. 각 스타일별로 아래 표에서 문자 집합을 정의합니다.

1. 카운터 값이 0이면, 해당 스타일에 지정된 0 문자로 표현합니다. 이 후 알고리즘은 생략합니다.
2. 초기 표현은 10진수로 만들고, 0이 아닌 각 자릿수에 해당하는 자릿수 마커를 붙입니다. 1의 자리에는 마커가 없습니다.
3. 비공식 스타일에서는, 값이 10에서 19 사이면 십의 자릿수(숫자)는 제거합니다(마커는 남깁니다).
4. 끝에 연속된 0은 제거하고, 나머지 0은 하나로 합칩니다.
5. 0~9의 숫자를 해당 스타일의 문자로 치환합니다. 결과 문자열을 반환합니다.

모든 중국어 장문 카운터 스타일에서 suffix는 "、" U+3001, fallback은 cjk-decimal이고, range는 -9999 9999, negative는 각 스타일별 심볼 표에서 지정됩니다.

아래 표는 각 스타일에서 사용하는 문자를 정의합니다:

 1　　　　 一    41　　 四十一    81　　 八十一
 2　　　　 二    42　　 四十二    82　　 八十二
 3　　　　 三    43　　 四十三    83　　 八十三
 4　　　　 四    44　　 四十四    84　　 八十四
 5　　　　 五    45　　 四十五    85　　 八十五
 6　　　　 六    46　　 四十六    86　　 八十六
 7　　　　 七    47　　 四十七    87　　 八十七
 8　　　　 八    48　　 四十八    88　　 八十八
 9　　　　 九    49　　 四十九    89　　 八十九
10　　　　 十    50　　　 五十    90　　　 九十
11　　　 十一    51　　 五十一    91　　 九十一
12　　　 十二    52　　 五十二    92　　 九十二
13　　　 十三    53　　 五十三    93　　 九十三
14　　　 十四    54　　 五十四    94　　 九十四
15　　　 十五    55　　 五十五    95　　 九十五
16　　　 十六    56　　 五十六    96　　 九十六
17　　　 十七    57　　 五十七    97　　 九十七
18　　　 十八    58　　 五十八    98　　 九十八
19　　　 十九    59　　 五十九    99　　 九十九
20　　　 二十    60　　　 六十   100　　　 一百
21　　 二十一    61　　 六十一   101　 一百零一
22　　 二十二    62　　 六十二   102　 一百零二
23　　 二十三    63　　 六十三   103　 一百零三
24　　 二十四    64　　 六十四   104　 一百零四
25　　 二十五    65　　 六十五   105　 一百零五
26　　 二十六    66　　 六十六   106　 一百零六
27　　 二十七    67　　 六十七   107　 一百零七
28　　 二十八    68　　 六十八   108　 一百零八
29　　 二十九    69　　 六十九   109　 一百零九
30　　　 三十    70　　　 七十   110　 一百一十
31　　 三十一    71　　 七十一   111 一百一十一
32　　 三十二    72　　 七十二   112 一百一十二
33　　 三十三    73　　 七十三   113 一百一十三
34　　 三十四    74　　 七十四   114 一百一十四
35　　 三十五    75　　 七十五   115 一百一十五
36　　 三十六    76　　 七十六   116 一百一十六
37　　 三十七    77　　 七十七   117 一百一十七
38　　 三十八    78　　 七十八   118 一百一十八
39　　 三十九    79　　 七十九   119 一百一十九
40　　　 四十    80　　　 八十   120　 一百二十

7.2. 에티오피아 숫자 카운터 스타일: ethiopic-numeric

ethiopic-numeric 카운터 스타일은 0보다 큰 모든 양의 정수에 대해 정의됩니다. 아래 알고리즘은 10진수를 에티오피아 숫자로 변환합니다:

1. 숫자가 1이면, "፩" (U+1369)를 반환합니다.
2. 숫자를 두 자리씩 그룹으로 나눕니다. 가장 작은 10진수 자리부터 시작합니다.
3. 각 그룹에 순서대로 인덱스를 붙입니다. 가장 작은 자리부터 0번 그룹입니다.
4. 그룹 값이 0이거나, 그룹이 가장 큰 자리이면서 값이 1이거나, 그룹 인덱스가 홀수이고 값이 1이면, 해당 숫자를 제거합니다 (단, 그룹 자체는 남겨서 아래에서 구분자를 추가합니다).
5. 남은 각 숫자에 대해, 아래 리스트에서 해당 에티오피아 문자를 치환합니다.

   십의 자리			일의 자리
   값	코드포인트		값	코드포인트
   10	፲	U+1372	1	፩	U+1369
   20	፳	U+1373	2	፪	U+136A
   30	፴	U+1374	3	፫	U+136B
   40	፵	U+1375	4	፬	U+136C
   50	፶	U+1376	5	፭	U+136D
   60	፷	U+1377	6	፮	U+136E
   70	፸	U+1378	7	፯	U+136F
   80	፹	U+1379	8	፰	U+1370
   90	፺	U+137A	9	፱	U+1371

6. 두 번째 단계에서 홀수 인덱스인 각 그룹(원래 값이 0이었던 그룹 제외)에 ፻ U+137B를 추가합니다.
7. 두 번째 단계에서 짝수 인덱스인 각 그룹(0번 그룹 제외)에 ፼ U+137C를 추가합니다.
8. 모든 그룹을 하나의 문자열로 합쳐 반환합니다.

이 시스템에서 이름은 "ethiopic-numeric", range는 1 infinite, suffix는 "/ " (U+002F SOLIDUS와 U+0020 SPACE), 나머지 디스크립터는 초기값을 사용합니다.

8. 추가 "기성" 카운터 스타일

국제화 작업 그룹(Internationalization Working Group)은 다양한 세계 언어에 대한 기성 @counter-style 규칙의 대형 목록을 Ready-made Counter Styles 문서에서 관리합니다. [predefined-counter-styles]

이 추가 카운터 스타일들은 기본적으로 사용자 에이전트가 지원해야 하는 것은 아니며, 사용자가 직접 스타일시트에 복사해 사용하는 용도입니다.

9. API

9.1. CSSRule 인터페이스 확장

CSSRule 인터페이스는 다음과 같이 확장됩니다:

partial interface CSSRule {
    const unsigned short COUNTER_STYLE_RULE = 11;
};

9.2. CSSCounterStyleRule 인터페이스

CSSCounterStyleRule 인터페이스는 @counter-style 규칙을 나타냅니다.

[Exposed=Window]
interface CSSCounterStyleRule : CSSRule {
  attribute CSSOMString name;
  attribute CSSOMString system;
  attribute CSSOMString symbols;
  attribute CSSOMString additiveSymbols;
  attribute CSSOMString negative;
  attribute CSSOMString prefix;
  attribute CSSOMString suffix;
  attribute CSSOMString range;
  attribute CSSOMString pad;
  attribute CSSOMString speakAs;
  attribute CSSOMString fallback;
};

name, 타입 CSSOMString

name 속성을 얻으면 CSSOMString 객체를 반환하며, 연관된 규칙에 대해 정의된 <counter-style-name> 직렬화 결과를 담고 있습니다.

name 속성을 설정할 때는 다음 과정을 실행합니다:

1. 값이 사전 정의된 counter style과 ASCII 대소문자 구분 없이 일치하면, 소문자로 변환합니다.

2. 값이 "decimal", "disc", "none"이 아니면, 연관 규칙의 이름을 해당 값과 동일한 식별자로 교체합니다.

3. 그 외에는 아무 동작도 하지 않습니다.

system, 타입 CSSOMString

symbols, 타입 CSSOMString

additiveSymbols, 타입 CSSOMString

negative, 타입 CSSOMString

prefix, 타입 CSSOMString

suffix, 타입 CSSOMString

range, 타입 CSSOMString

pad, 타입 CSSOMString

speakAs, 타입 CSSOMString

fallback, 타입 CSSOMString

나머지 속성들은 얻으면 연관된 규칙에서 정의된 디스크립터의 직렬화 결과를 담은 CSSOMString 객체를 반환합니다. 규칙에서 디스크립터를 지정하지 않았다면, 해당 속성은 빈 문자열을 반환합니다.

속성을 설정할 때는 다음 과정을 실행합니다:

1. 값에서 구성 값 목록 파싱을 수행합니다.

2. 반환된 값이 해당 디스크립터의 문법에 맞지 않거나, @counter-style 규칙을 무효로 만드는 경우, 아무 동작도 하지 않고 중단합니다. (예: 일부 시스템은 symbols 디스크립터에 두 개 값이 필요합니다.)

3. 설정하는 속성이 system이고, 새 값이 알고리즘을 변경하는 경우, 아무 동작도 하지 않고 중단합니다. 알고리즘의 일부(예: fixed 시스템의 first symbol value)를 변경하는 것은 허용됩니다.

4. 디스크립터 값을 설정합니다.

10. HTML용 샘플 스타일시트

이 섹션은 참고용(informative)이며, 규범적(normative)이지 않습니다. HTML 자체가 요소에 적용되는 스타일을 정의하며, 일부 경우에는 사용자 에이전트(UA)의 재량에 맡깁니다.

details > summary {
  display: list-item;
  list-style: disclosure-closed inside;
}

details[open] > summary {
  list-style: disclosure-open inside;
}

변경 사항

2017년 12월 후보 권고안 이후의 변경 사항

2017년 12월 14일 후보 권고안(December 14 2017 Candidate Recommendation) 이후의 주요 변경 사항:

• none, decimal, disc, circle, square, disclosure-open, disclosure-close를 오버라이드 불가(non-overridable)로 변경함. (이슈 3584)

• Shadow DOM에서 counter-style 조회를 명확히 함. (이슈 5693)

• 다양한 잘못된 @counter-style 상황에서 어떻게 동작하는지 명확히 함. (이슈 5698, 이슈 5717)

• additive 알고리즘에서 0으로 나누는 오류를 수정함. (이슈 5784)

• square 심볼이 이모지 심볼을 사용하지 않도록 수정함. (이슈 6200)

• UA가 미리 정의된 상징형 카운터 스타일의 폰트 선택을 오버라이드할 수 있도록 허용함. (이슈 6201)

• 미리 정의된 상징형 카운터 스타일의 특별 렌더링을 list-style-type을 통한 목록 마커로만 제한함. (이슈 6201)

• speak-as가 음성 출력(spoken output)을 나타내는 것임을 명확히 함; 다른 접근성 기술(AT)에서도 사용할 수 있음. (이슈 6040)

  카운터 스타일은 시각적으로 명확해도, 음성 합성기나 비시각적 수단으로 의미 있게 표현하기 어렵거나, 단순하게 읽었을 때 의미가 없을 수 있습니다. speak-as 디스크립터는 해당 카운터 스타일로 포맷된 값을 어떻게 말할지(음성 합성) 정의합니다. 접근성 기술은 카운터 스타일을 읽을 때 이 spoken form을 사용해야 하며, speak-as 값을 음성 이외의 출력 변환에 참고할 수도 있습니다.

의견 처리 결과(Disposition of Comments)가 제공됩니다.

2015년 6월 후보 권고안 이후의 변경 사항

2015년 6월 11일 후보 권고안(June 11 2015 Candidate Recommendation) 이후의 주요 변경 사항:

• none 및 disc가 카운터 스타일 이름으로 사용되지 않도록 제외함.

• CSSCounterStyle.name 설정 시 문자열을 직접 사용하고, ident로 파싱하지 않도록 함.

• 카운터 스타일이 요소의 콘텐츠 언어로 읽힌다는 점 명확히 함.

• additive-symbols 튜플이 반드시 엄격하게 내림차순이어야 함을 명시함.

• 잘못된 값은 선언만 무효화되고, 규칙 전체를 무효화하지 않도록 명시함.

• 필수 디스크립터가 없는 @counter-style 규칙은 counter style을 만들지 못할 뿐, 그 외에는 여전히 유효한 규칙임.

• 문법을 CSS bracketed range notation으로 변경하여 음수 값 제한을 반영함.

의견 처리 결과(Disposition of Comments)가 제공됩니다.

2015년 2월 후보 권고안 이후의 변경 사항

• UA가 hebrew 스타일을 명세 정의 범위 이상으로 확장할 수 있도록 허용함 (현재 한계는 @counter-style 기반 정의에서 범위를 늘리기 번거로움 때문임).

감사의 글

아래 인물들과 그들이 작성한 문서는 번호 체계 정의에 매우 큰 도움이 되었습니다: Alexander Savenkov, Arron Eicholz, Aryeh Gregor, Christopher Hoess, Daniel Yacob, Frank Tang, Jonathan Rosenne, Karl Ove Hufthammer, Musheg Arakelyan, Nariné Renard Karapetyan, Randall Bart, Richard Ishida, Simon Montagu (Mozilla, smontagu@smontagu.org)

모든 측면에 대해 광범위한 리뷰를 해준 Xidorn Quan에게 특별히 감사드리며, Simon Sapin과 Håkon Wium Lie의 리뷰에도 감사드립니다.

개인정보 및 보안 고려사항

이 명세는 새로운 개인정보 또는 보안 고려사항을 도입하지 않습니다.