Fabric.js: Cursor of iText in RTL mode (originX == 'right')

[YaakovHatam]

EDIT (17/05/2020)

Hello guyz, i have started to write the RTL version of iText, you can take the dist/favric.rtl.js in my forked repository, after i'll finish i will rewrite it and merge to fabric.js repository.

https://github.com/YaakovHatam/fabric.js

hello i made quick fix that allow the cursor behave like it should be in Right-to-Left texts.

in the function:

renderCursor: function(boundaries, ctx) {

i have replaces the code:

boundaries.left + leftOffset,

with:

this.originX === 'right' ? -boundaries.left - leftOffset : boundaries.left + leftOffset,

and now it works proper!

add:
and for the selection the change is:
in the function

renderSelection: function(chars, boundaries, ctx) {

instead

boundaries.left + lineOffset,

replace with

this.originX === 'right' ? -boundaries.left - boxWidth +lineOffset : boundaries.left + lineOffset,

[asturur]

i don t think right to left text is supported.

what language are you using?

[YaakovHatam]

@asturur this fix will let you rtl version

[asturur]

i cannot see why originX should handle text direction.
if rtl.is supported should be supported with any originX and originY.

[YaakovHatam]

@asturur i use the Hebrew/English languages, when the user want iText with hebrew i set the originX to right, but the cursor still work like left origin.

[asturur]

Because originX and originY influence just the position where top and left
are originated.
If we will support RTL languages we have to specify a property "this.rtl =
true" we cannot base it on originX that has another meaning.

2015-07-30 13:18 GMT+02:00 yaakov hatam [email protected]:

@asturur https://github.com/asturur i use the Hebrew/English languages,
when the user want iText with hebrew i set the originX to right, but the
cursor still work like left origin.

—
Reply to this email directly or view it on GitHub
https://github.com/kangax/fabric.js/issues/2374#issuecomment-126276917.

[YaakovHatam]

@asturur i will add the "rtl" property and will post my enhancement.

[asturur]

@kob-e did you ever completed this feature?

[asturur]

reference: #2673, #2766, #2825

[ThakurKarthik]

@YaakovHatam @asturur any work progress here?

[asturur]

no. Sadly no progress on RTL text at all

[ThakurKarthik]

The workaround @YaakovHatam was mentioning at the beginning is not RTL right..it's just cursor manipulation to start from right.Even the text-align also does the same,it still have to be implemented like a css direction : rtl style.Don't know if we can try this algorithm .

[YaakovHatam]

Hello guyz, i have started to write the RTL version of iText, you can take the dist/favric.rtl.js in my forked repository, after i'll finish i will rewrite it and merge to fabric.js repository.

https://github.com/YaakovHatam/fabric.js

[asturur]

Hi @YaakovHatam you may want to open a PR early to gather feedback and comments about the code.

Thanks for trying!

[YaakovHatam]

Thanks @asturur -
My plan is:

1. Getting a itext working with rtl fully
2. Rewrite the code within the classes of fabricjs

[asturur]

would be great if you share it earlier if you want to contribute it back. When is done and working going back and adapt things to fabricjs style may be hard.

[YaakovHatam]

@asturur I will deal with the RTL issues in the fabric.js . After 3 years of using this amazing library with Hebrew after doing a lot of fixes, I decided to contribute back.
For now, as you can see in the link: https://yaakovhatam.github.io/fabric.js/index.html
The RTL works, the arrow keys now work, the mixed text (Latin / Hebrew / Arabic) works properly. Now I fix the selection of text.
Once I will complete these basics I will discuss with you how to implement it in the source code.

[YaakovHatam]

It will be nice if the users here will give me some test cases

[MebDevelop]

It is not working as well. It's writing text in wrong place.

[MebDevelop]

And also cursor position is not correct

[amitmas]

Looks good, very nice work...
Except the wrong selection position, there is another problem that the text dissapear when scaling horizontally or vertically.