: Different font colours for accent marks in Unicode I am working on an application which uses some Thai script. Many vowels in Thai script are written as what could best be described as accent
I am working on an application which uses some Thai script. Many vowels in Thai script are written as what could best be described as accent marks above consonants.
For example, in the word: กึด
ก and ด are both consonants, but ึ is a vowel. I need to be able to set the vowel as a different colour to the consonant, but I have no idea whether this is even possible in HTML as I can't select the vowel independently from the consonant.
I'm sure this applies to other situations as well for accents, but I can't find any solutions.
More posts by @Nimeshi706
2 Comments
Sorted by latest first Latest Oldest Best
Short answer: it won't work. Further to what e100 said, you can try a few different ways, but none achieve the desired effect.
Here's the standard "let's render as HTML entities and watch the browser combine the glyphs" sample text:
Let's try changing the color for just the vowel. IE9 renders the characters combined, but uses the first character's color. It's interesting to note that when we do this in Chrome (and I assume Safari as well, since it's based on WebKit) - the characters are not combined. Chrome renders the vowel as a discrete character, likely because the span breaks up its character-parsing engine.
We can try and manually adjust the vowel to position it where it should be, but unfortunately the glyph renders with the "ghost character" at the bottom and this doesn't look right.
We can try to get really crafty and not split up the characters. We'll use a single SPAN around both characters but use CSS' :first-letter pseudo-element selector... only to find that it always renders as the first character's color. This behavior is the same in WebKit and Trident.
Keep in mind that neither Presto nor Gecko can do this either. In fact, Gecko does even worse in our "relative position" attempt as it combines the characters and then mucks the margins up so that both consonants collide. That pretty much covers all your major browsers... bummer.
I don't have an answer but this test case demonstrates the problem, comparing it to a similar treatment of Latin characters.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div>ก<span style='color: red'>ึ</span>ด</div>
<div>ก
<span style='color: red'>ึ</span>
ด
</div>
<div>x<span style='color: red;'>o</span>x</div>
<div>x
<span style='color: red;'>o</span>
x
</div>
</body>
</html>
I get different results in IE8 and Chrome - neither work as you would like. This may come down to browser implementation. Perhaps someone else can build on this.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.