[Bug]: How to remove extra spaces from i-text for non-English languages like hindi, gujarati, etc?

[BhargavZanzmera]

CheckList

• [x] I agree to follow this project's Code of Conduct
• [X] I have read and followed the Contributing Guide
• [X] I have read and followed the Issue Tracker Guide
• [X] I have searched and referenced existing issues and discussions
• [X] I am filing a BUG report.
• [X] I have managed to reproduce the bug after upgrading to the latest version
• [X] I have created an accurate and minimal reproduction

Version

5.3.0

In What environments are you experiencing the problem?

Firefox, Chrome, Safari, Opera, Microsoft Edge

Node Version (if applicable)

None

Link To Reproduction

http://fabricjs.com/test/misc/itext.html

Steps To Reproduce

1. Copy the word उज्जैन or any other hindi word that includes joint character.
2. Paste it in itext object of above given link.
3. You can see after word ends there is an extra space. Because of that it creates curser issue also.

Note : watch below video to reproduce bug. If you are unable to create it then try some other joint word of hindi or gujarati.

screen-capture (4).webm

Expected Behavior

I-text box size should be same as per the content it has.

Actual Behavior

Error Message & Stack Trace

No response

[asturur]

Fabric grapheme abilities are not enough for hindi.

i suggest you take a grapheme splitting library like this one that covers unicode up to 15 https://github.com/orisano/graphemesplit and override fabric.util.string.graphemeSplit.

As state in docs fabric.util.string.graphemeSplit is meant to be changed with specialized libraries, since we won't be updating it to run behind unicode changes.

[vimlesh1975]

installed npm i graphemesplit, then I used like this and problem solved. import split from 'graphemesplit'; fabric.util.string.graphemeSplit = split

[ShaMan123]

In v6 you need to override FabricText

[ShaMan123]

And maybe it is time it is part of the repo