RTL support

[Reinmar]

Is this a bug report or feature request? (choose one)

🆕 Feature request

📃 Other details that might be useful

RTL support is a quite wide topic. We need to consider the UI of the editor as well as the editing features.

If you'd like the editor to better support RTL environments (such as Arabic, Hebrew and Persian) please add 👍. You can also comment what's a minimum viable state for you (i.e. what do you expect working first).

Plan

MVP

Basic changes to editor configuration

• RTL languages must be recognized. The easiest way is hardcoding them in some class or utility like in CKEditor 4.
  • Using config.language = 'ar' will change the dir attribute of the editable.
• contentLanguage configuration like in CKEditor 4 is needed.
  • Setting this config will change the lang and dir attributes of the editable regardless of the editor UI language ☝. For instance, allows writing english text with an Arabic UI and vice–versa. Affects screen readers, spell checkers, font selection, etc..

Changes to the editing layer

• dir attribute support on the contenteditable element.
  • auto by default leaving the decision up to the UA, which sets the text direction based on the first character with a strong directionality,
  • it will be changed via UI language content language configurations
• Text alignment feature must work in RTL environments.
• Block indentation feature must work in RTL environments.
• Two-step caret movement around links must work in RTL environments.
  • Basics work
  • There's an engine issue that breaks it in some cases.
• Blockquote border should be on the right side in RTL

UI layer

Core changes

• Information about LTR/RTL based on the UI language configuration will be passed via editor Locale which is propagated to all UI components.
• Root UI elements should read the locale object and get .ck-rtl CSS class when necessary.
  • Children will use it as a first selector to set proper styling, for instance .ck-rtl .ck.ck-button { ... }

Changes in UI components

• Inputs
  • Changing text direction of the InputView
• Balloons and panels (link balloon, media embed panel, etc.)
  • Action buttons (save, cancel) should be left–aligned
  • Other buttons, for instance those inside the first step of the link editing should also be aligned in a different way. Generally speaking, the layouts must be mirrored.
• Toolbars
  • Items should be right–aligned in ToolbarView.
  • Inline editor toolbar should be on the right side of editable.
  • Block toolbar should be displayed on the right of the editable.
• Dropdowns
  • The opener arrow should be on the left side in the RTL
  • Scrollbar on the left side when RTL (this should probably happen upon changing direction: rtl)
  • Dropdown panel should open to the left of the button in RTL
  • When RTL, the arrow for the split button dropdown should be on the left side.
• Lists
  • List items should be right–aligned in RTL
• Widgets
  • The selection handler should be on the right side when RTL

Accessibility

• In an open dropdown, the left arrow goes back to the parent (toolbar) in LTR. In RTL the right arrow should do that instead.

Beyond MVP

Changes in UI components

• IconView
  • Icon localization because some icons must change their layout based on the language
    • Undo/redo
    • Indent
    • Numbered list
    • Bulleted list
• Balloons
  • The default set of positions should be different for RTL ("west" positions instead of "east" in LTR)
• Image upload progress should go from the right to the left.

Accessibility

• In tables the down arrow moves forwards in LTR (cell to the right). In RTL it should move backwards (cell to the left). Same for the up arrow.
• Text part language support as in the spec. It helps screen readers deal with a mixed language content. Supported by the v4 plugin.

BiDi

• There's a Unicode Bidirectional Algorithm which boils down to searching for a first strong directional character and changing the direction of the block, based on that character. Thanks to that algorithm, each block (usually the paragraph) can have its direction (when different than dir="..." of the editable), which helps editing mixed content and saving it to the database. It obsoletes the CKEditor 4 BiDi plugin.
  • It can be implemented using a set of RegExps, which are based on official BiDi class definitions. For instance, facebook is using that in their utils.
  • The UI of the editor can reflect the direction of the block, e.g. the icons can be mirrored dynamically. More examples.

Related tickets

• https://github.com/ckeditor/ckeditor5-alignment/issues/3
• https://github.com/ckeditor/ckeditor5-editor-classic/issues/32
• Support dir attribute #671

[ilantz]

Please add support for RTL, setting direction based on "strong RTL" characters during input.
Draft.js does this pretty good and allows also per paragraph direction.

[xxyyzz2050]

Please consider adding (dir="auto") to auto set the default direction based on the first detectable charachter

[Kolahzary]

We're switching to CKEditor 4 until implementation of this feature.
It would be much better if we could use toolbar to switch RTL per paragraph

[mohamedsabil83]

We just back to use CKEditor 4 until supporting RTL in CKEditor 5

[mohamedsabil83]

Any news about time to support RTL?

[xsoheilalizadeh]

Thanks for your great editor, we wait for RTL support to upgrade CKEditor 4 to CKEditor 5 version.

[ghost]

Any news about RTL?

[Reinmar]

@oleq research this topic and will share his findings here. We expect to have the most important issues solved until the end of June, but the first improvements should land sooner than that.

[oleq]

Just FYI: I updated the "Plan" section of the first comment with a rough roadmap and listed steps to make the editor RTL–friendly. Please let me know in the comment if there's anything I forgot to mention but should land in the MVP.

[mlewand]

📰 Just an update to all of us following this issue: unfortunately we won't be able to ship this feature in the upcoming iteration. This is a priority issue for us, and we'd like to have it as soon as possible, but the scope of this issue is quite big, as shown in the research. Also it requires more testing. Currently we don't have the required man power to complete this feature.

It's not an official ETA but we should resume the works in June so given the complexity we can expect it to be available somewhere in July. That's just a rough estimation, we'll be updating this issue as we know more.

[abedio]

I wrote the plugin for BiDi
https://github.com/abedi-ir/ckeditor5-direction/

[EhsanJamshidi]

Thanks, I'll check it and let you know

[AHasanin]

@AHasanin Confirmed, thanks!

I added the Alignment feature to the PoC and it does not work when in RTL mode.

any progress on this issue?

[oleq]

@AHasanin Since [email protected] we officially support RTL content and that includes the alignment feature. Update your editor and give it a try!

[mohamedsabil83]

I wrote the plugin for BiDi
https://github.com/abedi-ir/ckeditor5-direction/

Hey @oleq, what about BiDi plugin which introduced by @abedi-ir?

[oleq]

You can use it if it works for you (I haven't seen it yet, though) but keep in mind we don't provide support for 3rd–party plugins.

BiDi is on our TODO list so one day it's gonna be a core editor feature. Unfortunately, I can't share any strong ETA with you.

[mustafa-online]

😢

[arasrezaei]

any updates on this?

[webdev51]

Its 2022, is this done yet? I'm amazed how editor like CK which is loaded with features lacks in RTL support!

[FilipTokarski]

@webdev51 did you see https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html#righttoleft-rtl-languages-support?

[mohamedsabil83]

@webdev51 did you see https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html#righttoleft-rtl-languages-support?

What about direction - bidi - in the same editor. The text in the editor must be LTR or RTL but not both if I need to use languages from both directions in the same editor.

[FilipTokarski]

As mentioned in one of the previous comments:

BiDi is on our TODO list so one day it's gonna be a core editor feature. Unfortunately, I can't share any strong ETA with you.

[AbobkerElaghel]

10/ 10/ 2022
Any update on the TextDirection toolbar item??
I don't believe it's challenging to implement as a toolbar item since you guys have 50 or more items.
And it's a common thing (item) in most rich text editor libraries or software.

I don't want to change the whole language of the content or the UI to just let the end user write in RTL??!..
it's much more efficient that they can change the direction while they are writing, most countries speak their native language and English anyway, so this is an impotent feature for RTL languages. and sometimes end users want to mix and match between Arabic (RTL) and English (LTR). so forcing only one direction is not efficient.

[movahhedi]

Still waiting.

[Witoso]

@movahhedi could you share for which improvement are you waiting?

[mohamedsabil83]

@Witoso, I'm sure he means the same that all are asking for a while: the BIDI directions. It's inefficient to be stuck in one direction, especially with us who need to write in the two directions in the same article.

[Witoso]

Doesn't Text part language solve this problem?

[mohamedsabil83]

No, it didn't. What we are talking about is the traditional paragraph redirection RTL/LTR. So, in one paragraph, we press the LTR button and start writing one of the LTR languages, e.g. English. In another paragraph, we press the RTL button and write in one of the RTL languages, e.g. Arabic.

[Witoso]

Ok, gotcha! So it's a bit more generic than text part languages. They also allow you to do this, but with the selection of language, not paragraph direction.

This is the ticket in which the improvement is tracked: #2008. If someone haven't, please +1 it to bump it in our priorities.

[mohamedsabil83]

Of course, it's more efficient than the text part. Instead of adding many languages written from LTR, we need to hit the LTR button and the same for the RTL languages.
Just for missing this in CKEditor5, I started using another editor and know a lot do the same.

[AlaHashesh]

Any updates on this?