Formatting Ordered Lists

By On · Add Comment

A topic receiving some attention in the CSS specs are how to format ordered lists across different numbering systems. Not all are supported in every browser, but a wide range are, so I thought I would present some test data.

If your browser does not support a particular list type, you will see something like “1,2,3” as bullets for the list items. If your browser supports a list, but is missing a font, you may see some Unicode question marks of death indicating to go find a font for that glyph.

Note: Test data is not complete, so a untested type may be supported in some browsers.

Supported in all browsers

Numeric
list-style-type:decimal		 Capital Alphabetical
list-style-type:upper-alpha		 Lower Alphabetical
list-style-type:lower-alpha
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3

Capital Roman
list-style-type:upper-roman		 Lower Roman
list-style-type:lower-roman
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3

CSS 2 Firefox, Safari, Opera, Internet Explorer 8

  • These are supported in Firefox/Safari.
  • They are also supported in Internet Explorer 8, but a DOCTYPE statement must be included.
Leading Zero
list-style-type:
decimal-leading-zero		 Armenian
list-style-type:
aremenian		 Georgian
list-style-type:
georgian		 Lower Greek
list-style-type:
lower-greek
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3

Only in Firefox, Safari

These are other list styles being proposed as well. The following styles are found in Dreamweaver CS5 and are supported in recent versions of Firefox and Safari

Hebrew
list-style-type:
hebrew		 Katakana
list-style-type:
katakana		 Hiragana
list-style-type:
hiragana		 Hiragana-Iroha
list-style-type:
hiragana-iroha 		CJK Numbers
list-style-type:
cjk-ideographic
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3

 

Only in Safari

CSS 3 includes many more specifications, particularly for Asian languages. Some are supported in in recent versions Safari like the ones below. For a complete list of propsed specifications see the W3C Specification for CSS 3 Lists.

Arabic-Indic
list-style-type:
arabic-indic		 Devanagari
list-style-type:
devanagari		 Thai
list-style-type:
thai		 Bengali
list-style-type:
bengali		 Gujarati
list-style-type:
gujarati
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3

Gurmukhi
list-style-type:
gurmukhi		 Kannada
list-style-type:
kannada		 Lao
list-style-type:
lao 		Malayalam
list-style-type:
malayalam		 Mongolian
list-style-type:
mongolian
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3

Myanmar
list-style-type:
myanmar 		Persian
list-style-type:
persian		 Telugu
list-style-type:
telugu		 Tibetan
list-style-type:
tibetan
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
Share →

Leave a Reply

Skip to toolbar