5

I am trying to draw text along a curve on html5 canvas. To do this, I need to break up input text into constituent characters which can individually be rotated and translated etc. The breaking up of text is easy for English. Given input string s, s[i] gives the ith character. But this does not work for non-english strings. I have a jsfiddle here illustrating the problem: http://jsfiddle.net/c6HV8/. Note that the fiddle appears differently in Chrome and IE at time of this writing. To see what the problem is, consider you have non-english text in a string s. Create a text node to which you pass s. Next, create a text node for each s[i] and display the text nodes adjacent to each other. Now compare the results. They are not the same. How can I break up non-english text into constituent characters in javascript, so that the two results are the same?

enter image description here

morpheus
  • 18,676
  • 24
  • 96
  • 159
  • 1
    The name for the problem you're trying to solve is [*text segmentation*](http://en.wikipedia.org/wiki/Text_segmentation). I don't think there's a whole lot out there for client-side JS because it tends to involve large data tables. – Mike Samuel Feb 11 '14 at 22:22

1 Answers1

3

भाईसाब :) 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.

Community
  • 1
  • 1
Vivin Paliath
  • 94,126
  • 40
  • 223
  • 295
  • Nice! will keep this open for sometime and accept as answer if don't get a better response. – morpheus Feb 11 '14 at 22:35
  • 2
    Unfortunately, that isn't even all of it. In some languages and fonts, the shape of a character will depend on surrounding characters. Arabic text tends to be particularly prone to this issue. (It's also right-to-left, which is another likely source of trouble…) Long story short, you'll need to distinguish between *characters* and *glyphs* to do this properly (and it's tough!). –  Feb 11 '14 at 23:22
  • @duskwuff Yes, thanks for reminding me. I had written something similar and then accidentally erased it when I reformatted my answer. It becomes exceedingly hard to figure out what amounts to a character and what amounts to a glyph... basically a lot of heuristics and it's not likely to be perfect! – Vivin Paliath Feb 11 '14 at 23:41