How to Color-code Manchu/Mongolian Script on Webpage?

Question

My odyssey started from a rather simple task. I had a Manchu word in the traditional script and I wanted to change all the vowels in the word (ignoring ligatures) to a different color

<p>ᠠᠮᠪᡠᠯᠠ ᠪᠠᠨᡳᡥᠠ</p>
<p><span class="red">ᠠ</span>ᠮᠪᡠᠯ<span class="red">ᠠ</span> ᠪᠠᠨ<span class="red">ᡳ</span>ᡥ<span class="red">ᠠ</span></p>

By the way, this was not the actual production code I tested, just what I could remember of it, so forgive me if there are any typos. (The class .red just defines color:red;).

Of course, this didn't work. Being a cursive script, I am creating an artificial break inside the word when I wrap one letter in a span. So I was curious: Arabic is also a cursive script... so I grabbed a random sentence in arabic

<p> مرحبًا، كيف يم<span class="red">ن</span>نني مساعدتك؟ </p>

and it worked (for me).

I then tried considering other solutions, but nothing short of using HarfBuzz or reimplementing the glyph substitution, ligation, and kerning rules manually on HTML canvas seemed to do the trick, neither of which would be idea for a simple website idea of mine, and frankly, neither of which I currently have the ability to do. Perhaps I could manually edit the font and link every glyph to a (potentially illegal) unicode codepoint, but that would definitely violate some online font licenses. I've also tried Free variant selectors, to no avail (you can't get every possible combination just with those, and some fonts don't even support them).

It's rather unfortunate that such a seemingly simple task ran into a dead end so soon; such are the troubles of minority cursive scripts in the digital age. Any pointers would be greatly appreciated!

Answer 1

A. Use SVG: One option is to convert your text into an SVG image and apply color to specific elements within the image. You can create separate text elements for each character and style them individually using CSS. SVG gives you more flexibility in manipulating and styling individual characters. However, keep in mind that this approach may not be suitable for large bodies of text due to performance considerations.

B. use :nth-letter selector :

<style>
    .red {
        color: red;
    }

    /* Apply red color to the 1st, 3rd, 5th, etc. letters */
    p:nth-letter(odd) {
        color: red;
    }
    
    /* Apply red color to the 2nd, 4th, 6th, etc. letters */
    p:nth-letter(even) {
        color: red;
    }
</style>

<p>ᠠᠮᠪᡠᠯᠠ ᠪᠠᠨᡳᡥᠠ</p>

Keep in mind that browser support for :nth-letter is limited at the moment, so it's important to test this code in various browsers to ensure it works as expected.