CSS has a property called letter-spacing, which allows web authors to style thier text such that letters can be spaced out. E.g.:

C R O S S R O A D S

Things get interesting for Telugu. A character or letter from the the user’s perspective can actually contain multiple Unicode code points. For example, “స్త్రీ” is one character/letter. Similarly, “స్ట్రాంగ్” has two characters.

When letter spacing is applied to Telugu text, web browsers need to add additional space between characters. What matters is what is considered a letter by each browser might vary.

I tried to test this in few web browsers. It worked properly in Mozilla Firefox and Google Chrome browsers. However, IE 11 has issues. Here is an image showing rendering across these browsers at the time of this post:

Here is a test page for you to see how your web browser shows it. I didn’t have access to Microsoft Edge browser. If you are using Windows 10, please post a screenshot of that test page from Edge browser.

It is a custom that ordered lists are presented with numerals or alphabet. And, Telugu web sites would want to present lists in their pages in Telugu numerals or alphabet. For example:

౧. శుక్రుడు
౨. బుధుడు
౩. భూమి
౪. అంగారకుడు

Or, with alphabet:

అ. శుక్రుడు
ఆ. బుధుడు
ఇ. భూమి
ఈ. అంగారకుడు

CSS3 makes these possible. CSS3 added a concept called counter styles and extended list-style-type property to accept any defined counter style as a value. CSS3 also added predefined counter style called telugu for Telugu numerals.

That means we can just write the following CSS for ordered lists to show up with Telugu numbers:

ol {
  list-style-type: telugu;
}

See this in action. At the time of writing this, it is working fine in Firefox and Chrome. Not in IE 11, though.

CSS3 did not define a counter style for lists with Telugu alphabet. But, the whole point of counter styles is to let web authors write their own counter styles. So, we can define our own list styles.

Let’s first define a counter style:

@counter-style telugu-alphabetic {
  system: alphabetic;
  symbols: 'అ' 'ఆ' 'ఇ' 'ఈ' 'ఉ' 'ఊ' 'ఎ' 'ఏ' 'ఐ' 'ఒ' 'ఓ' 'ఔ' 'అం' 'అః' 'క' 'ఖ' 'గ' 'ఘ' 'ఙ' 'చ' 'ఛ' 'జ' 'ఝ' 'ఞ' 'ట' 'ఠ' 'డ' 'ఢ' 'ణ' 'త' 'థ' 'ద' 'ధ' 'న' 'ప' 'ఫ' 'బ' 'భ' 'మ' 'య' 'ర' 'ల' 'వ' 'శ' 'ష' 'స' 'హ' 'ళ' 'క్ష' 'ఱ';
}

Now, we can use it as follows:

ol {
  list-style-type: telugu-alphabetic;
}

See this in action. This works in Firefox. Sadly, other browsers do not yet have support for user defined counter styles (@counter-style rules).

These counter styles can be extended to achieve different formatting needs like placing the number or letter in parentheses. Something like below:

(అ) శుక్రుడు
(ఆ) బుధుడు
(ఇ) భూమి
(ఈ) అంగారకుడు

I compiled few counter styles for Telugu covering major use cases, including styles with parenthesis. What else do you think should be covered?