Suneditor: Any plans for RTL (right to left) support?

[BrianJVarley]

Hi @JiHong88 , the editor is impressive and covers nearly all of our requirements. But I don't see a config option for RTL (right to left) text direction in the editor.

Is this something on the roadmap or already existing option? (I didn't see this in the docs). The rtl configuration is defined as..

In a right-to-left, top-to-bottom script (commonly shortened to right to left or abbreviated RTL), writing starts from the right of the page and continues to the left. This can be contrasted against left-to-right writing systems, where writing starts from the left of the page and continues to the right.
Arabic, Hebrew, Pashto, Persian, Urdu, and Sindhi are the most widespread RTL writing systems in modern times.

Example Toolbar button on other editor:

Configuration Example:

[JiHong88]

Hi @BrianJVarley
Thank for your suggestion.
I'll add RTL option and button to next version.

[BrianJVarley]

Hey JiHong88. Looking at the RTL support on different editors, the RTL button seems to be a common approach to flipping the editor content direction. But another thing to consider is order and direction of toolbar buttons.

When I've tested in this editor an other that support RTL fully. You can see that certain toolbar icons are re-ordered and flipped backwards on language change to arabic: (see bold, italic, strikethrough format buttons and toolbar labels)

@JiHong88 will the upcoming implementation of RTL include flipping and re-organising toolbar icons? In addition to flipping the editor content that I mentioned originally. I think the Material Docs give a good explanation of the different factors for icons.

[BrianJVarley]

@JiHong88 I see the commit above for RTL. Is this available to test on a public released version? https://github.com/JiHong88/SunEditor/commit/c43b5c511507025c152a1ef4fc5b50355bc29369

[JiHong88]

@BrianJVarley I will upload it to the test server.
Check and giving me feedback will help for develop.

[BrianJVarley]

@JiHong88 sure, How can I check this change on the test server? Is there a link to access it?

[JiHong88]

@BrianJVarley I'll notify you at the this week after update.

[JiHong88]

Hi, @BrianJVarley
I uploaded RTL options under development.
It is still being modified.
Modal window, the title at the bottom of the toolbar, and the table selector are being modified.

Please tell me know if there are any further modifications to be made.
Ex) Image modify box, etc...

http://suneditor.com/test/index.html

[BrianJVarley]

Hi @JiHong88 I tested the RTL feature above. The editor contents alignment and text typing direction look great for RTL.
But I notice some bugs with toolbar button direction, label direction and dropdown lists contents. When I compare it to this editor implementation of RTL - https://ckeditor.com/ckeditor-4/demo/(To test RTL change browser language to Arabic).

Here is some feedback on RTL feature that I think will improve it. I think if you can make the below changes it will make RTL feature it will be more complete:

• Toolbar Dropdown Menus (Format, Size, Font, Paragraph Style, Text Style, Line Height, Align): These toolbar button dropdown menus _contents_ / _text_ should be LTR (left aligned), because contents are still in English and Numbers. Currently the text is backwards which isn't correct. Also the ▼ icon on dropdown menu should display on left side of button text:

• Icon Direction: In RTL only _some icons_ should be reversed. I have highlighted in green icons that should be reversed, also highlighted in red icons should _not_ be reversed i.e, same as LTR mode:

• Ordering of Icons: These icons should be ordered as, [Italic, Underline, Bold] the reverse of LTR mode. Also icons should not be flipped backwards. They should be same direction as LTR mode.

• Undo/Redo Buttons: These buttons should _not_ be flipped. They are same in LTR mode as in RTL mode. See: https://material.io/design/usability/bidirectionality.html#mirroring-elements

• Toolbar Labels: Because toolbars labels are still in English, they should still read LTR. Currently, they are backwards.

• Image Modify Box: URL input text should be LTR _not_ RTL because URL is still LTR regardless of language, Submit button should be left side of modal, close (x) button should
  be left side of modal. "Link" and "Image" tab text should be normal LTR as its English text. Tab should be on right side of modal.

[JiHong88]

@BrianJVarley I updated to the test page.
And please comment on these components.

Also the color picker is modified

[BrianJVarley]

@JiHong88 The above changes look correct apart from some changes to icon order (should be reverse order for RTL). A good test to verify RTL is implemented correctly is to open Google Docs and change keyboard language to Arabic to check what toolbar options change.

I do notice some minor bugs on label and toolbar buttons as follows. I think the following changes would improve RTL feature further:

1) Undo / Redo button: These buttons should be pointing same direction as in LTR mode. SO non change to icon, (left arrow = undo, right arrow - redo) See correct implementation here:

2) Indent / Out-dent button: The English part of the label here is backwards, should be LTR:

3) Link Button: should be mirrored:
Undo / redo, more buttons: should be placed on left side of editor:

4) Image Insert Dialog: These button positions should differ from LTR mode (the same way as it was implemented for the general toolbar) – just reverse button positions:

5) Table Insert DIalog: These button positions should differ from LTR mode (the same way as it was implemented for the general toolbar) – just reverse button positions:

[impulsgraw]

Hi @JiHong88 ,

Since some time I keep an eye on your wonderful wysiwyg library, it's really great!
I consider the RTL support as a must-have in modern content editors, it's amazing you've decided to implement it for the SunEditor.
The suggestions from @BrianJVarley are quite precise 👍 .
During the implementation of RTL feature in my project I have found the following resources as comprehensively informative to refer to:

• https://translate.google.com/translate?hl=en&sl=ru&tl=en&u=https%3A%2F%2Fhabr.com%2Fru%2Fcompany%2F2gis%2Fblog%2F358148%2F
• https://translate.google.com/translate?hl=en&sl=ru&tl=en&u=https%3A%2F%2Fhabr.com%2Fru%2Fcompany%2Fabbyy%2Fblog%2F251579%2F
• https://www.w3.org/International/talks/1602-oman/ -- a nice post from W3
• https://steelkiwi.com/blog/right-to-left-rtl-website-development-design/

Several useful suggestions:

• Following things should always remain LTR (as they don't have RTL equivalents): phone numbers (including all signs), URLs, email addresses, date&time (unless it's in the Arabic/Hebrew traditional format); although the text alignment anyway should always reflect the text direction -- for ex. the URL in the long text-input should be LTR, but aligned to the right. One can consider such small pieces as foreign LTR "aliens" inside the outer RTL context.
• The default RTL locales for most languages (Arabic, Hebrew, Urdu) in the widely-used regular fonts (Times, Arial, Helvetica, etc) are quite poor and either just not intended for such purposes, or just appear unreadable for native speakers. Consider the example below -- such tooltip label has very small Arabic letters.
  
  So I think it's better to reconsider the font-family. I have found the Noto Sans family as the great alternative.
• BTW, on the screenshot with the tooltip above, the string slices are misaligned towards to each other: if in English you see something like "Shortcut description (Ctrl+F5)" then in Arabic you should see "(F5+Ctrl) Shortcut description" -- the part in the round braces moves from the string ending into the beginning (and vice-versa).

Don't hesitate to reach out in case of questions!
I'll try to have some more walkthrough meantime,

Thanks,
Andrey.

[JiHong88]

@BrianJVarley @impulsgraw
I updated RTL mode of the test page. http://suneditor.com/test/index.html

The creation of all controllers and tables has also been modified with RTL.
And the list of align buttons has been modified so that the right sort is at the top by default.

At the bottom of the test page is a list of buttons used when creating the editor.
I created a button module by reversing the order of the button list in RTL mode, but I am not sure if it is the correct operation.

And.. I'm confused if the Math plugin should also be RTL.

[JiHong88]

@BrianJVarley @impulsgraw
The 2.34.0 version has been updated.
If this issue has not been resolved, please reopen this issue.
Thank you.

[BrianJVarley]

@JiHong88 great! I'll take a run through your linked test page this week to verify. @impulsgraw what's your thoughts on this latest RTL release?

I do see _three_ things that could be addressed on RTL feature:

• Toolbar Arabic label text: It's very small, take a look at indent / outdent buttons. Maybe a different font here such as Andrei suggested could be more legible. Such as - https://www.google.com/get/noto/

• Toolbar Short Cut Text English: On the indent and outdent toolbar buttons the shortcut text is not clear, I can't read which shortcut combination that is. Is there any way you can use a different font or use more whitespace?

• Toolbar bold icon: The icon should not be flipped, currently its backwards. Can you position the bold icon normally the same as LTR? So for example..'B'

RTL User Function:
On a different note, I think there is a benefit to exposing a "User Function" for the RTL prop similar to editorInstance.enabled();. At the moment we would have to re-create the editorInstance in order to update rtl mode at runtime. But if you exposed an editorInstance.rtl.enable() editorInstance.rtl.disable() it would allow the client to update to RTL mode dynamically when browser locale is changed to Arabic language.

Is this something you have considered as an enhancement?