Colored diacritics and unicode behaviour

Question

I just stumbled over this question about coloring diacritics. The task was to color diacritics in another color than the base text, like in á presenting a in blue and ´ in red. I thought I could give it a try, separating letter and diacritic through unicode combining marks, and applying another color to the diacritics by putting a span around it, like this:

<p>
p<span>̄ </span>
o<span>̄ </span>
m<span>̃ </span>
o<span>̃ </span>
d<span>̈ </span>
o<span>̈ </span>
r<span>̌ </span>
o<span>̌ </span>
</p>

Now, having defined a simple CSS like this,

p { color:blue; }
span { color:red; }

I get the following, quite unforeseen but beautiful result:

What is happening here? I naively guessed that the font rendering algorithm prefers pre-rendered characters like ōõöřǒ, as long as they exist in the font, over dynamically combined ones like p̄m̃d̈, rendering it as one or two separate items retrospectively, which then triggers the diacritics coloring only in the second case. (Please tell me frankly when this interpretation is complete nonsense.) Further, this would mean that the approach for coloring diacritics surprisingly actually works under non-standard circumstances. Can anyone explain this behaviour? And would there be a way to enforce this for the other (completely blue) letters too? It is a kind of "fun" question not yet linked to an application right now, but it might be an interesting case to learn from.

I put up a fiddle so you can play around with it.

Answer 1

One valid solution, as proposed by RandomGuy32, is

to insert the Combining Grapheme Joiner (U+034F) between the base letter and the accent. This way the font renderer won’t try to substitute the precomposed glyph and instead apply the colours to each character separately.

I tried this in the fiddle (version 2 of the one mentioned in my question). I put a U+034F directly after each base letter, and indeed this is working as RandomGuy32 explained. You do not see in the codeblock here, so I inserted a comment to indicate the position of U+034F:

o͏<!--U+034F--><span>̄

However, this would require a renderer on client or server side to process each letter with a diacritic, then separate it and insert both the span and U+034F. It might be a solution when you do not want to double your text (as proposed in a CSS based solutions on the page mentioned above).