8

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.

Improve this question
1
  • If this is for illustrative purposes, rather than for every occurrence in an arbitrary text, you might consider a figure or illustration. You might try an in-line graphic (with the alt-text as the two glyphs).
    – horatio
    Commented Jul 21, 2011 at 19:10

2 Answers 2

Reset to default
9

Short answer: it won't work. Further to what e100 said, you can try a few different ways, but none achieve the desired effect.

  1. Here's the standard "let's render as HTML entities and watch the browser combine the glyphs" sample text:

    IE - Correct characters - all 1 color

  2. 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.

    IE - Correct characters - wrong colors

    Chrome - Wrong characters - correct colors

  3. 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.

    IE - Wrong characters - correct colors

  4. 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.

    IE - Correct characters - wrong colors

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.

Improve this answer
1
  • That's a Class-A answer, Farray. You just saved me several hours of wasted effort (different scenario, same idea).
    – Alan Gilbertson
    Commented Sep 9, 2011 at 23:26
1

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>&#x0E01;<span style='color: red'>&#x0E36;</span>&#x0E14;</div>
    <div>&#x0E01;
        <span style='color: red'>&#x0E36;</span>
&#x0E14;
    </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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.