भाईसाब :) So as I'm sure you already know, the problem is that fillText
and createText
both work on the entire string and so it is able to evaluate the string along with all the diacritic marks (combining characters). However, when you call fillText
and createText
per character, none of the diacritics appear along with the characters they are supposed to be attached to. Hence they are evaluated and drawn individually, which is why you see the diacritic along with the dotted circle (kind of a place holder that says: put a character here).
There is no easy way to do this, really. Your algorithm would basically have to be like this:
- Look up the current character from the string.
- Find all successive characters that are diacritics and then combine all of them into a new string.
- Render that string using
fillText
.
You can check out the results here on a forked version of your fiddle. I modified the sample text to add some more complex characters just to make sure that the algorithm works properly. The code could definitely be cleaned up; I just did it as a proof-of-concept.
The hard part is coming up with a list of code-points for diacritics for all languages if you want to internationalize this. This answer provides a list that should help you get started.