Fabric.js: Text selection box issue for some languages.

[bhaskardas9475]

Version

3.0.0

Test Case

https://jsfiddle.net/bhaskar321/zp6st8h4/1/

Information about environment

Nodejs or browser?
Browser
Which browsers?
Chrome Version 74.0.3729.169 (Official Build) (64-bit)

Steps to reproduce

1. Add text in canvas.
2. I am adding one indian language text (ಕಾರ್ಮಿಕರ)

Expected Behavior

Selection box should match the actual width of the whole text.

Actual Behavior

Selection box width is smaller than the text

[asturur]

hi @bhaskardas9475,
You need to override fabric.util.graphemeSplit with some function that is able to handle diatrical marks and unicode points for indian language.

[bhaskardas9475]

Hello @asturur ,
Thanks for the suggestion. That would be really helpful if you elaborate little more. May be a small example of code.

[asturur]

check grapheme splitter https://www.npmjs.com/package/grapheme-splitter

fabric.util.graphemeSplit = function(stringOfText) {
  // import a library that does this job, like grapheme splitter
  return graphemeSplitter(stringOfText)
}

[bhaskardas9475]

Works Perfectly..
--Thanks @asturur