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.