Styling diacritics without styling attached base characters

[kelpso]

I would like to colour the vowel ◌็อย of a given Thai word ผล็อย, part of which is the diacritic ◌็ on the consonant ล, without highlighting any of the consonant parts.

I have tried to do the following which should work based on Google searches but doesn’t colour the diacritic (everything else in the <span> colours just fine): ผล<span class="highlight">็อย</span>

I have also tried inserting the COMBINING GRAPHEME JOINER (U+034F) before the <span> which people online have mentioned helps the renderer to treat the base character and diacritic as separate pieces before formatting and combining, but this doesn’t seem to make a difference.

Lastly, I have tried turning off Unicode normalisation as per the manual and performing the above steps again with no success.

Is this a limitation of the Anki HTML renderer or is there something else going on?

[Duude]

I tinkered around a bit, now it should work.

You had to go with the font-size of the diacritic over 20px, to change the color (don’t ask me why, I don’t know). It works now.

Put that in your HTML-Code:

ผล<span class="highlight">อ<span class="diacritic">&#x0E47</span>ย</span>

And put that into your styling:

.highlight
{
	color: blue;
}

.diacritic
{
	font-size: 22px;
	color: red;
}

It should look like that now:

[kelpso]

This is incredible, thank you so much! My font size is 60px so setting the diacritic to 61px in my case worked. I don’t know how I would have figured this out myself.