Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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.

share|improve this question
    
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 Jul 21 '11 at 19:10
add comment

2 Answers

up vote 8 down vote accepted

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.

share|improve this answer
    
That's a Class-A answer, Farray. You just saved me several hours of wasted effort (different scenario, same idea). –  Alan Gilbertson Sep 9 '11 at 23:26
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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