Status of This Document
This section describes the status of this
document at the time of its publication. A list of current W3C publications and the latest revision
of this technical report can be found in the
W3C technical reports index at
https://www.w3.org/TR/.
This document describes counter styles used by various cultures around the world and can be used as a reference for those wishing to define user-defined counter styles for CSS. The content of this document was originally part of the CSS Lists and Counters specification, but is now published as a standalone document by the W3C Internationalization Working Group. It is expected that the document will be updated from time to time to include new information.
This document was published by the Internationalization Working Group as a
Group Draft Note using the Note
track.
This document is NOT an official W3C technical report.
It is a sample document meant to illustrate the style for Process 2021.
Group Draft Notes are not endorsed
by W3C nor its Members. This
is a draft document and may
be updated, replaced or obsoleted by other documents at any time. It is
inappropriate to cite this document as other than work in progress.
The
1 August 2017 W3C Patent
Policy does not carry any licensing requirements or commitments on this document.
This document is governed by the
2 November 2021 W3C Process Document.
1. Introduction
Browsers that implement the CSS Counter Styles Level 3 specification provide a mechanism for authors to create user-defined counter styles for use with CSS list-markers and generated-content counters.
As a content author, unless the counter style you want to use is one of a small set that are predefined in the specification, you yourself will need to define how it works in your style sheet. To make it easier for you, this document provides code snippets that people have already worked out for a large set of user-defined and predefined styles, covering more than 25 writing systems around the world.
If you find what you are looking for, you can simply cut and paste the style you need into your stylesheet. Alternatively, you can use the styles here for inspiration, or adapt them to suit your preferences.
For example, the following CSS code defines the arabic-indic counter style, then applies it to ordered lists using the list-style-type property.
@counter-style arabic-indic {
system: numeric;
symbols: '\660' '\661' '\662' '\663' '\664' '\665' '\666' '\667' '\668' '\669';
}
ol { list-style-type: arabic-indic; }
The CSS Counter Styles Level 3 specification includes a number of predefined counter-styles for which browsers are expected to implement built-in support. The definitions of those styles are also included here, for ease of reference, and identified as such by a note.
We try to only include in this document counter styles that are in regular use in the wild, and we are particularly interested in supporting the needs of people who use non-Latin scripts. You may find more experimental or new templates on other sites, such as that provided by Christoph Päper.
1.1 Adapting prefixes & suffixes
The likelihood that you will need to customise the basic counter symbols in the styles provided here is low. However, there is a much higher likelihood that you will want to vary the affixes (prefix and/or suffix) associated with counters. For example, counters used for numbering headings may look better as just the bare counter, whereas in lists the counter may be following by a period+space, be surrounded by parentheses, or be followed by a script-specific delimiter, etc. In fact, different strategies may be used on the same page, depending on the level of nesting or the context in which the list is used.
For the styles shown here we apply a common default. (Often, none is specified, which will result in a period+space suffix.) If you want a different affix you should make the appropriate change. Code for some common alternatives is given in the panel just below.
Space-only suffixes need to be explicitly defined as follows:
suffix: ' ';
Counters in parentheses need to have both prefix and suffix defined:
prefix: '(';
suffix: ') ';
Notes are used to describe alternative affixes for a given style, and where they involve a non-ASCII character or some other special arrangement, suggested code is provided.
For example, Myanmar may use ။ [U+104B MYANMAR SIGN SECTION] as a suffix, so the Myanmar section includes:
suffix: '။ ';
If you want to provide multiple alternative affix declarations for a given counter style, you will find it most effective to add another style using the standard extension mechanism.
For example, the following defines two styles for Myanmar that differ only in the prefix/suffix used. Either style can be used for a given list just by specifying the appropriate name.
@counter-style myanmar {
system: numeric;
symbols: '၀' '၁' '၂' '၃' '၄' '၅' '၆' '၇' '၈' '၉';
prefix: '(';
suffix: ') ';
}
@counter-style myanmar-section {
system: extends myanmar;
prefix: '';
suffix: "။ ";
}
ol { list-style-type: myanmar; }
#toc ol { list-style-type: myanmar-section; }
1.2 Things to remember
-
At the time of writing, the CSS Counter Styles Level 3 specification is still in the Candidate Recommendation phase. Custom counter styles are not yet supported in all browsers. See a set of basic tests to find which browsers support this feature. On browsers that don't support custom counter styles, the counter styles will fall back to the default.
Many of the styles described here are already supported by name in browsers. See the tests for a list of what international styles are supported natively by which browsers.
-
You can call these styles or the ones you invent yourself by whatever name you prefer. For example, if you prefer to call the persian counter style extended-arabic, you can just change the name of the counter style. Bear in mind, however, that a counter style called persian may be supported by browsers that don't support @counter-style, so using standard names can sometimes be beneficial.
The Internationalization Working Group expects this document to be updated from time to time as new information or corrections are added. If you wish to propose new information to be included here, please raise an issue in github.
However, before submitting a counter-style template for inclusion, please gather evidence that is actually in use in the wild. For example, it is easy to conceive different alphabetic lists that correspond to various European languages, but we haven't yet seen good evidence that such lists are used widely, and so they are not included here. You should also provide a counter style definition for a template you'd like to see included.
19. Korean
@counter-style circled-korean-consonant {
system: fixed;
symbols: '\3260' '\3261' '\3262' '\3263' '\3264' '\3265' '\3266' '\3267' '\3268' '\3269' '\326A' '\326B' '\326C' '\326D';
/* symbols: '㉠' '㉡' '㉢' '㉣' '㉤' '㉥' '㉦' '㉧' '㉨' '㉩' '㉪' '㉫' '㉬' '㉭'; */
suffix: ' ';
}
@counter-style circled-korean-syllable {
system: fixed;
symbols: '\326E' '\326F' '\3270' '\3271' '\3272' '\3273' '\3274' '\3275' '\3276' '\3277' '\3278' '\3279' '\327A' '\327B';
/* symbols: '㉮' '㉯' '㉰' '㉱' '㉲' '㉳' '㉴' '㉵' '㉶' '㉷' '㉸' '㉹' '㉺' '㉻'; */
suffix: ' ';
}
@counter-style hangul {
system: alphabetic;
symbols: '\AC00' '\B098' '\B2E4' '\B77C' '\B9C8' '\BC14' '\C0AC' '\C544' '\C790' '\CC28' '\CE74' '\D0C0' '\D30C' '\D558';
/* symbols: '가' '나' '다' '라' '마' '바' '사' '아' '자' '차' '카' '타' '파' '하'; */
}
@counter-style hangul-consonant {
system: alphabetic;
symbols: '\3131' '\3134' '\3137' '\3139' '\3141' '\3142' '\3145' '\3147' '\3148' '\314A' '\314B' '\314C' '\314D' '\314E';
/* symbols: 'ㄱ' 'ㄴ' 'ㄷ' 'ㄹ' 'ㅁ' 'ㅂ' 'ㅅ' 'ㅇ' 'ㅈ' 'ㅊ' 'ㅋ' 'ㅌ' 'ㅍ' 'ㅎ'; */
}
@counter-style korean-consonant {
system: alphabetic;
symbols: '\3131' '\3134' '\3137' '\3139' '\3141' '\3142' '\3145' '\3147' '\3148' '\314A' '\314B' '\314C' '\314D' '\314E';
/* symbols: 'ㄱ' 'ㄴ' 'ㄷ' 'ㄹ' 'ㅁ' 'ㅂ' 'ㅅ' 'ㅇ' 'ㅈ' 'ㅊ' 'ㅋ' 'ㅌ' 'ㅍ' 'ㅎ'; */
}
@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';
/* additive-symbols: 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 ";
/* 마이너스 (followed by a space) */
}
@counter-style korean-syllable {
system: alphabetic;
symbols: '\AC00' '\B098' '\B2E4' '\B77C' '\B9C8' '\BC14' '\C0AC' '\C544' '\C790' '\CC28' '\CE74' '\D0C0' '\D30C' '\D558';
/* symbols: '가' '나' '다' '라' '마' '바' '사' '아' '자' '차' '카' '타' '파' '하'; */
}
@counter-style parenthesized-hangul-consonant {
system: fixed;
symbols: '\3200' '\3201' '\3202' '\3203' '\3204' '\3205' '\3206' '\3207' '\3208' '\3209' '\320A' '\320B' '\320C' '\320D';
/* symbols: '㈀' '㈁' '㈂' '㈃' '㈄' '㈅' '㈆' '㈇' '㈈' '㈉' '㈊' '㈋' '㈌' '㈍'; */
suffix: ' ';
}
@counter-style parenthesized-hangul-syllable {
system: fixed;
symbols: '\320E' '\320F' '\3210' '\3211' '\3212' '\3213' '\3214' '\3215' '\3216' '\3217' '\3218' '\3219' '\321A';
/* symbols: '㈎' '㈏' '㈐' '㈑' '㈒' '㈓' '㈔' '㈕' '㈖' '㈗' '㈘' '㈙' '㈚'; */
suffix: ' ';
}
@counter-style korean-hanja-informal { /* this is a predefined complex style in the CSS3 Counter Styles specification */
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;
/* additive-symbols: 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 ";
/* 마이너스 (followed by a space) */
}
@counter-style korean-hanja-formal { /* this is a predefined complex style in the CSS3 Counter Styles specification */
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;
/* additive-symbols: 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 ";
/* 마이너스 (followed by a space) */
}
Note
Alternative affix styles: Many of the Korean styles listed here use , [U+002C COMMA + U+0020 SPACE] as the default suffix, however sometimes . [U+002E FULL STOP + U+0020 SPACE] is preferred. To apply that to the styles above, replace the suffix declarations with:
suffix: \002E\0020; /*. */
Note
The following are built-in styles in Blink and Webkit, but none work out of the box in Firefox: hangul, hangul-consonant
Note
See also the Han CJK section for additional styles.