MyanmarWeb

Myanmar script lists and generated counters

Latest versions of Firefox and Chrome (IE?) support the myanmar numerical list type. This is a barebones list type that can be optimised for Burmese documents. @counter-style can be used to add new lists types or extend or modify existing list types. Currently @counter-style is only supported by the latest versions of Firefox. ?????? IDENTIFY VERSION OF FX THAT SUPPORTS THIS .... REF TO SPEC ??????

It is necessary to use the CSS cascade to provide appropriate fallbacks when you extend a predefined list type.

Numerical ordered lists

The default myanmar list type follows the formating of European lists. Inserting a period at the end of the decimal list marker. An alternative, that is more appropriate for Burmese content, is to place the decimal list marker within parentheses. Using the @counter-style to define an alternative myanmar list type:

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

Alternatively, a more concise rule would extend the original list type rather than defining a new list type:

@counter-style myanmar-parens {
    system: extends myanmar; 
    prefix: "("; 
    suffix: ") "; 
}

Ideally, the new list type myanmar-parens should be added to a cascade that enables browsers that do not support @counter-style to use an appropriate fallback list type:

ol {
    list-style: myanmar; 
    list-style: myanmar-parens;
}

If @counter-style is supported the myanmar-parens list type will be used. If @counter-style is not supported, then the browser will use the myanmar list type. If the myanmar is not supported the browser will fallback to the standard decimal list type.

See demo 1 and demo 1a (using extends)

Alphabetic ordered lists

It is possible to contruct alphabetic list type for each language you need to support. A definition for a Burmese alphabetic list type:

@counter-style burmese-consonant {
    system: alphabetic;
    symbols: '\1000'  '\1001'  '\1002'  '\1003'  '\1004'  '\1005'  '\1006'  '\1007'  '\1008'  '\100A'  '\100B'  '\100C'  '\100D'  '\100E'  '\100F'  '\1010'  '\1011'  '\1012'  '\1013'  '\1014'  '\1015'  '\1016'  '\1017'  '\1018'  '\1019'  '\101A'  '\101B'  '\101C'  '\101D'  '\101E'  '\101F'  '\1020'  '\1021';
    /* symbols: က ခ ဂ ဃ င စ ဆ ဇ ဈ ည ဋ ဌ ဍ ဎ တ ထ ဒ ဓ န ပ ဖ ဗ ဘ မ ယ ရ လ ဝ သ ဟ ဠ အ; */
    prefix: "(";
    suffix: ") ";
}

Likewise, it is wise to provide appropriate fallbacks using the CSS cascade:

ol.alpha {
    list-style: myanmar; 
    list-style: burmese-consonant;
}

See demo 2

Mixing list types

Alternating numeric and alphabetic nested lists

It is possible to alternate list types:

ol {
    list-style: myanmar; 
    list-style: myanmar-parens;
}

ol ol {
    list-style: myanmar; 
    list-style: burmese-consonant;
}

ol ol ol {
    list-style: myanmar; 
    list-style: myanmar-parens;
}

See demo 3

Alphabetic nested lists

@counter-style burmese-consonant-dbl {
    system: alphabetic;
    symbols: '\1000\1000''\1001\1001''\1002\1002''\1003\1003''\1004\1004''\1005\1005''\1006\1006''\1007\1007''\1008\1008''\100A\100A''\100B\100B''\100C\100C''\100D\100D''\100E\100E''\1010\1010''\1011\1011''\1012\1012''\1013\1013''\1014\1014''\1015\1015''\1016\1016''\1017\1017''\1018\1018''\1019\1019''\101A\101A''\101B\101B''\101C\101C''\101D\101D''\101E\101E''\101F\101F''\1020\1020''\1021\1021';
    /* symbols: ကက ခခ ဂဂ ဃဃ ငင စစ ဆဆ ဇဇ ဈဈ ညည ဋဋ ဌဌ ဍဍ ဎဎ တတ ထထ ဒဒ ဓဓ နန ပပ ဖဖ ဗဗ ဘဘ မမ ယယ ရရ လလ ဝဝ သသ ဟဟ ဠဠ အအ; */
    prefix: "(";
    suffix: ") ";
}

ol {
    list-style: myanmar; 
    list-style: burmese-consonant;
}

ol ol {
    list-style: myanmar; 
    list-style: burmese-consonant-dbl;
}

ol ol ol {
    list-style: myanmar; 
    list-style: burmese-consonant;
}

See demo 4

Unordered lists

It is possible to define a list type that uses a hyphen or an en-dash for the marker:

@counter-style dash {
  system: cyclic;
  symbols: \2013;
  /* – */
  suffix: " ";
}

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

And the associated ul rule:

ul {
    list-style: dash; 
}

See demo 5

Numeric headings

It is possible to automatically number headings and subheadings. The CSS could look like:

h1:before {
    content: counter(chapt, myanmar) "။" ;
    padding-right: 0.5em;
}

h1 {
    counter-increment: chapt;
    counter-reset: section;
}

h2:before {
    content: counter(chapt, myanmar) "." counter(section, myanmar) "။" ;
    padding-right: 0.5em;
}

h2 {
    counter-increment: section;
    margin: 1.0em;
}

h3:before {
    content: counter(chapt, myanmar) "." counter(section, myanmar) "." counter(subsection, myanmar) "။" ;
    padding-right: 0.5em;
}

h3 {
    counter-increment: subsection;
    margin: 1.0em;
}

See demo 6