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
#2374 (comment).

[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

[amitmas]

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

[mistriel]

@YaakovHatam are you going to complete this MR ?

[asturur]

We merged a basic implementation of RTL.
#7046

[mistriel]

Initial support was released in version 4.5.0

[vijaygurjar]

I am checking with RTL support in fabricjs and its look amazing, but i found one issue when manually set cursor at somewhere in middle in text editing mode and writing text then cursor location is not set properly.

[asturur]

Can you open an issue with a detailed description and a jsfiddle that show this problem, and this problem only?
a clean simple example.

[vijaygurjar]

Hello asturur
Thanks for your quick reply.
I made sample url : https://jsfiddle.net/vijaygurjar/cj8wy5xu/
edit text to set cursor middle of the text box and writing text but added characters not at right position. May be i am doing some mistake to set properties.

[mistriel]

From the snippet you created it seems that you are trying to write English (Latin) inside an IText that is set with text direction rtl now that wont work - you will need to set the text direction back to ltr in order to make it work as expected.

[igalya]

Another issue is when using RTL text and textAlign is 'center' or 'right'.
Cursor is behaving strange.

[asturur]

Did you try the latest master? i thought we fixed that.

[igalya]

4.6? yes.

[mistriel]

@asturur it was not fixed. The only way to work with RTL (direction == rtl) and cursor working as expected is to set textAlign to right. Otherwise cursor is not on the correct location.

[chiragbytes]

Hello @asturur

I am having issue with charSpacing in hebrew selected texts, after applying charSpacing text got flipped.
I found similar issue on #6848 , later tha found to be linked here.

After upgrading fabricJS to 4.6.0 and using new property direction I am still facing the same issue.

FYI, I am using Angular 8 with fabric js in my project.

Here is my code that i am using for applying charSpacing.
obj.set({ 'charSpacing': Math.ceil(Number(event.target.value)) });

Thank you.

[ShaMan123]

#7864

[oustr]

@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 Seems that your link is 404 now😥And I'm still confused whether the text selection problem of rtl text is fixed, as I found I couldn't select some part of a rtl text in fabricjs, because when I click at the middle of such a text the cursor is always at the right. Seems that you're working on the rtl problems and I wonder if this bug is fixed, the information and discussions here on github still confuse me a lot

[YaakovHatam]

@oustr It was a while ago and I don't know where the RTL issue currently stands in the project
Can you write down what the problem is specifically and I'll try to restore?

[asturur]

In general RTL is poorly supported.
Shaman123 made some work to fix it, but it was a full refactor that i didn't merge.
Before planning a full refactor of text i prefer to stack fixes on the current architecture even if the dev experience for who works on the fix is not great.

Most of the issue we have is because of the difference firefox and chrome handle the RTL text.