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


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.

Source : Link , Question Author : JohnGB , Answer Author : Farray

Leave a Comment