(X)HTML Markup: December 2010 Archives

Formatting Ordered Lists

|

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

Categories:

About The Blog

I am a Penn State technology specialist with a degree in linguistics and have maintained the Penn State Computing with Accents page since 2000.

See Elizabeth Pyatt's Homepage (ejp10@psu.edu) for a profile.

Comments

The standard commenting utility has been disabled due to hungry spam. If you have a comment, please feel free to drop me a line at (ejp10@psu.edu).

Powered by Movable Type Pro

Recent Comments