Add support for RTL scripts

[aahani]

I propose adding LTR, RTL (Left to right, Right to left) direction functionality to blocks. It is useful for RTL scripts (Persian, Pashto, Arabic, Hebrew).
It is supported by TinyMCE: https://www.tinymce.com/docs/plugins/directionality/ as shown here:

It can be a toggling button (Default LTR, toggle to RTL) before trash.

[jasmussen]

Interesting!

RTL is absolutely important. Is there a a use-case for mixing LTR and RTL in a single post or page, though? Would it be enough that the wp-admin was set to an RTL language and so the block editor became RTL entirely as well?

[aahani]

There are many use cases of LTR in a RTL script (say Persian). For instance:

Case 1: A company active in oil & gas industry is listing its products and services as well as its foreign partners. They usually list these items in English (LTR). For instance:

شرکت نفت کاو در سال ۱۳۸۴ با هدف ارائه خدمات و کالاهای مورد نیاز صنایع نفت، گاز و پتروشیمی و بویژه پروژه‌های خطوط لوله و تاسیسات آغاز بکار نمود. این شرکت از‌‌ همان ابتدا بعنوان نماینده رسمی و انحصاری کارخانجات نورد و پروفیل ساوه عرضه کننده انواع لوله‌ها با استانداردهای ASTM و API فعالیت خود را آغاز نمود و با به دست آوردن رزومه‌ای قابل توجه در زمینه فروش انواع لوله‌ها به شرکت‌های نفت، گاز و پتروشیمی و آب و همچنین شرکت‌های پیمانکاری فعال در این صنایع بعنوان یکی از شرکت‌های پیشرو در ارائه خدمات و کالا‌ها به صنایع نفت و گاز اعم از مصارف جهت سرویس‌های ترش و شیرین و صنایع پایین دستی و بالا دستی معرفی می‌گردد. (Company Introduction)

کالاهای قابل تامین: (Products)

شیرآلات: (Valves)

• Globe Valve
• ...
• Check Valve

شرکای خارجی: (partners)

• Company A
• ...
• Company Z

پمپها: (Valves)

• Diesel Pumps
• ...
• Centrifugal pumps

شرکای خارجی: (partners)

• Company X1
• ...
• Company Xn

 

Case 2: Consider a university website that includes a section for academic papers. At the end of academic articles, they list their references in two sections: Persian & Latin (LTR). For example:

منابع فارسی: (Persian References)

1. الوانی، سیدمهدی؛ آذر، عادل؛ دانایی فرد، حسن. (1390). روش شناسی پژوهش کیفی در مدیریت: رویکردی جامع. اشراقی.
2. ...
3. مهدوی، سیدمحمدصادق؛ شریفی، منصور. (1386). تاملی بر اختلافات پارادایمی روش های کمی و کیفی در علوم اجتماعی. پژوهشنامه علوم انسانی، بهار 1386، شماره 53 (ویژه نامه جامعه شناسی)، صص 387-416.

منابع لاتین: (Latin References)

1. Aczél, J., & Saaty, T. L. (1983). Procedures for synthesizing ratio judgements. Journal of mathematical Psychology, 27(1), 93-102.
2. ...
3. Yeo, K. T., & Ning, J. H. (2002). Integrating Supply Chain and Critical Chain Concepts in Engineer-Procure-Construct (EPC) Projects. International Journal of Project Management 20, 253-262.

Case 3: In a knowledge management section of a company's intranet, they may use many English texts in a Persian script, e.g.:

مدارک تهیه شده توسط واحد مهندسی فرآیند عبارتند از:

• Process flow diagram
• Process equipment list
• Process fluids list
• Heat and material balance
• Process data sheet
• ...
• Operating manual

Case 4: In a site dedicated to teaching Persian to English, a teacher writes lessons and needs to provide translations of conversations, e.g.:

مکالمه:

ل- سلام، نام من لیلا است.

س- سلام، من سارا هستم.

...

Translation (English)
L: Hi, my name is Leila.
S: Hello, my name is Sarah.
…

---

P.S.:

As a simple trick, some may try to use tables and left and right alignments (provided by current WordPress default editor / TinyMCE editor) in those tables, but it will not work. e.g.:

Translation (English)	فارسی
L: Hi, my name is Leila.	ل- سلام، نام من لیلا است.
S: Hello, my name is Sarah.	س- سلام، من سارا هستم.
L: I live in Tehran, where do you live?	ل- من در تهران زندگی می کنم، تو کجا زندگی می کنی؟
S: I live in Paris. I study Persian language and literature, what's your job?	س- من در پاریس زندگی می کنم. من دانشجوی زبان و ادبیات فارسی هستم، شغل تو چیست؟
L: Very interesting, I am a Persian language teacher.	ل- چه جالب، من معلم زبان فارسی هستم
…	...

So, he shall go Text section of editor and use dir="rtl" in td of each Persian column! (a hard task if the table has a lot of rows). The above table using dir="rtl" markup:

Translation (English)	فارسی
L: Hi, my name is Leila.	ل- سلام، نام من لیلا است.
S: Hello, my name is Sarah.	س- سلام، من سارا هستم.
L: I live in Tehran, where do you live?	ل- من در تهران زندگی می کنم، تو کجا زندگی می کنی؟
S: I live in Paris. I study Persian language and literature, what's your job?	س- من در پاریس زندگی می کنم. من دانشجوی زبان و ادبیات فارسی هستم، شغل تو چیست؟
L: Very interesting, I am a Persian language teacher.	ل- چه جالب، من معلم زبان فارسی هستم
…	...

[jasmussen]

Wow that is really interesting. Thanks so much for explaining this!

[jasmussen]

The block concept perhaps lends itself to approaching this challenge in a new light.

For example, do we have RTL and LTR blocks where whatever you put inside them is flipped? Or are LTR and RTL advanced properties that can be toggled for each block? See also #16

[aahani]

Hi again
A block as a whole or some parts of it can be RTL or LTR (e.g. some columns, e.g. translation columns in the above mentioned example). so I think it is better to consider it in the block edit section (inline markup)

[jasmussen]

Let's make sure we remember to add an LTR button when a user has an RTL language. This is what's been done in the past, let's consider that a baseline task. We should add this button as an inline button, as suggested here.

[intronic]

How about a language switcher as well?
Language blocks could have their own spelling, translation options, and maybe other things as well as direction.

[gziolo]

@yurynix and @ranh given your experience with RTL on WordPress.com, do you have a suggestion what would be the best way to tackle it? I remember that you even worked on auto language direction in Reader (Automattic/wp-calypso#9664).

[yurynix]

Until we have a way to apply styles to an inner element in a block ( nested block? ),
I'm not really sure how we can achieve this functionality.

So there are 2 issues here:

1. Alignment ( css text-align: left|right; )
2. Directionality ( css direction: ltr|rtl; )

Both of them needs to be applied to a parent html element, in a block context such as a table,
it'll be hard to figure that out unless the cell is itself a block?

As an intermediary solution, we might want to make it easy for people to insert these special unicode characters:

LRM | U+200E | LEFT-TO-RIGHT MARK | Left-to-right zero-width character
RLM | U+200F | RIGHT-TO-LEFT MARK | Right-to-left zero-width non-Arabic character

For more info see here.

Here's an example:

• Notice the exclamation mark, it's initially on the right and should be on the left in RTL
• I insert the RLM character and the exclamation mark moves to where it should be - on the left.

This solves the directionality issue, but not the alignment issue.

Adding @yoavf as he might have more insights on that.

[aduth]

What are the actionable steps to be done here?

Let's make sure we remember to add an LTR button when a user has an RTL language.

To clarify, is this to be included in RichText's formatting toolbar?

[jeffpaul]

This ticket was mentioned in Slack in #core-editor by jeffpaul. View the logs.

[youknowriad]

I tried addding these buttons in the formatting toolbar. The problem here is that they work only on multiine RichTexts (quote) and not in single line ones (paragraph), I guess that's because this direction applies to the paragraph level only. So instead of adding it as a formatting toolbar, I wonder if this should be a block level control instead.

What do you think?

[azaozz]

The classic editor gets only one button, LTR. It works by changing the text direction (on/off), no need for two buttons there.

I guess that's because this direction applies to the paragraph level only.

Right, the dir attribute generally applies only to "block" elements. I think it makes sense to add that button as block level control (in the block properties) for single-line blocks, but what about multi-line blocks? Seems we will have to add one in the block properties, and another on the formatting toolbar. Logically this makes sense: one will apply to the whole block, the other to one of the block elements in multi-line blocks. May be a bit confusing though.

The alternative is to always have the LTR button in the formatting toolbar and apply it either to the whole block or one of the block elements according to the selection (this is how it works in the classic editor).

[youknowriad]

We discussed this a bit in WCEU and I think we should be pragmatic. The main way to create content in Gutenberg is using single line blocks (paragraph, headings...), let's try to get the block level support first and we can iterate to see if we add the multi-line support as well.

[yoavf]

A bit late, but chiming in an attempt to add a little bit of clarity to what we need to do, at least in order prevent a usability regression for users with RTL UI.

@jasmussen said it right

Let's make sure we remember to add an LTR button when a user has an RTL language. This is what's been done in the past, let's consider that a baseline task. We should add this button as an inline button, as suggested here.

In the classic editor, when in RTL UI, you get an extra button to your toolbar, in both visual and HTML modes:

Visual Editor - the button works on a paragraph level

HTML Editor- the button applies to the entire editor

For Gutenberg, I'd say that the minimum required would be a similar button on the paragraph block formatting toolbar when UI is RTL.
Then:

• Add that button (or a setting where there's no formatting bar) to other blocks.
• Document setting for directionality that would apply to the entire post.

For reference, Google Sheets has the following buttons on the main toolbar (possibly only for relevant users):

Sheet direction button, cell direction buttons

[hussamzahrani]

I use the admin panel in english even if the front end is RTL , switching to RTL would create a mayhem with most of the plugins
so I prefer if its possible to add the RTL button as an option in the plugin preferences instead of inheriting the user or the admin language

[jasmussen]

We discussed this a bit in WCEU and I think we should be pragmatic. The main way to create content in Gutenberg is using single line blocks (paragraph, headings...)

I think this is a good start, that means users who need to show individual paragraphs as LTR can do that.

Applying this across paragraphs or blocks would be a nice enhancenement, but can be addressed/ticketed separately.

Mockup:

@yoavf can you verify if the above approach is sufficient/right for now?

[yoavf]

@yoavf can you verify if the above approach is sufficient/right for now?

Yes, LGTM!

[aduth]

Pull request at #10663

[urShadoww]

Just wanted to check on when RTL support is expected for the end users. I am having a hard time writing posts containing English and Arabic.

[sardbaba]

As a temporary solution I've added a "rtl-content" class at block level and

.rtl-content { text-align: right; direction: rtl; }
on both style.css and style-editor.css

[a-atalla]

@aahani i think i came up with a solution via custom block smart-paragraph

[oussjarrousse]

I cannot find the right-to-left button in the new Gutenberg blocks.
@aduth Please consider reopening this issue or creating a new issue.

[youknowriad]

@oussjarrousse Would you mind creating an issue yourself and describe what you're seeing (screenshots, language...) and on which blocks? Thanks.

[dirad]

@youknowriad @oussjarrousse
Was another issue opend?

this comment on 10663 talks about the problem.

I am using a en_US system, but need to be able to write Arabic and Hebrew, so RTL, but cannot find any button to do this.. or any reference online to the right way to get it.

should this issue actually be closed?

[youknowriad]

@dirad I believe this issue matched the behavior in the classic editor: show the button when using an RTL locale but I can see the value for non-RTL languages too. Please do create an issue for it to discuss how it can be more globally made visible.

[danielwebguy]

@yoavf I am looking for a solution for this issue and I see that even after 2-3 years I can't find a proper solution.
Can you please update us if there is a solution for this?
Thank you.
Daniel

[urShadoww]

Have been waiting for the solution since Gutenberg launched.

[shula]

@azaozz
The classic editor gets only one button, LTR. It works by changing the text direction (on/off), no need for two buttons there.

Oh, but it is needed:
The way you see it, RTL is the exception, such as bold text.
But in many situations RTL is the norm, or LTR / RTL are has equal importance.
Also, a wordpress editor interface direction can be different than the OS settings.

A single button is therefore ambiguous.
I know it for myself and for my non-tech authors.

When 2 buttons are shown, the user gets clear unambiguous indication of the current direction,
AND the user will be able to set the direction without guessing.
2 buttons UI is also the de-facto standard in text editors (msoffice, libreoffice, and others).

A separate UI for wordpress alianates end users.