Recommended way to handle RTL mixed with LTR languages

[GiorgosK (Giorgos Kontopoulos)]

The forum we are running is mainly in english but we have some pages recently that are RTL (arabic)
what is the recommended way to get a specific topic to have RTL direction

is this the only posibility ?

Support RTL blocks for LTR-layout website and vice versa

Users would like sometimes to write both RTL and LTR text in one single post. Right now, the direction of everything in the website (including text editor and posted posts) depends on the layout of the language used. Arabic means RTL and English means LTR. It would be helpful if one can choose that he wants these paragraphs to be opposite the direction of the website. I tried: <div dir="rtl"> … </div> to force a direction change since HTML is supported, but that didn’t do anything, even if i…

is this a plugin that can handle the tags [text-direction=rtl] [/text-direction]

any other way ?

[simon]

We are going to be adding a site setting for supporting mixed text direction very soon. I’m working on it now.

[GiorgosK (Giorgos Kontopoulos)]

so the plugin is not really supported ?
should it be avoided ?
will it cause trouble if you solution comes out ?
any ETA on your solution ?

[simon]

I haven’t looked at that plugin in a while. I wouldn’t recommend using it. For now, the best way to get RTL content to display correctly when a LTR locale is being used is to wrap the content in <div dir="rtl"></div> tags. Doing this won’t cause any trouble when support for mixed text direction is added. The ETA for that feature is early next week.

[GiorgosK (Giorgos Kontopoulos)]

Thanks for the answer
I tried both <p class="rtl"></p> and <p dir="rtl"></p> inside a post but I end up with <p></p> in both cases

So its strips out the attributes, how can I tell discourse to not strip those attributes ? is there a setting ?

[simon]

@GiorgosK

I tried both <p class=“rtl”></p> and <p dir=“rtl”></p> inside a post but I end up with <p></p> in both cases

Sorry, the dir attribute is only whitelisted for <div> tags.

<div dir="rtl">this is a test</div> will work:

There is no setting to add attributes to the Discourse whitelist. It can be done through a plugin. That’s what the plugin that you linked to is doing.

[GiorgosK (Giorgos Kontopoulos)]

Great thanks that worked

[parisa (Pari)]

Great job! I’ve been looking for this feature. Is it automatic? like suggested here?

Set direction of text depending on text itself

Facebook has it ! [image] When Writing with an RTL language the ticker goes to the other way which gives a very intuitive experience. I need this for my community because we are bilingual. Thanks Discourse … Love

Or is it a button to change the direction of text?

[j.jaffeux (Joffrey Jaffeux)]

Any reason we don’t enforce dir="auto" ?

dir HTML global attribute - HTML | MDN

[simon]

@j.jaffeux

Any reason we don’t enforce dir=“auto” ?

It’s doesn’t get inherited, so it would need to be applied to every element in a cooked post. Also, Internet Explorer doesn’t support it. If we’re not concerned about supporting IE, there are places in the code that it would be useful (titles, category descriptions, etc.), but it’s easy enough to add a helper function that sets the direction of those elements based on their text content.

@parisa

Is it automatic?

It automatically applies the correct direction to text in the preview window, cooked posts, titles etc. It sets the direction of text fields based on the text that is entered. It doesn’t automatically set the direction of the composer’s textarea. To make it easier to type, you can switch the direction of the textarea by clicking a button. Changing the textarea’s direction doesn’t affect its final output. It will be formatted correctly regardless of the direction the textarea is set to.

Facebook’s editor handles text direction very well. They can do this because their editor is using contenteditable. This lets them set the text direction on individual elements in the editor. It’s possible to get behaviour similar to this by adding the attribute dir="auto"to the composer’s textarea, but doing that has some strange side effects.

[parisa (Pari)]

any update for this feature?

[simon]

It is available in the master branch now. Enable it by selecting the support_mixed_text_direction setting. I’ll write a topic about it soon.

There are a few improvements that could be made to the way it’s setting the text direction for topics. The biggest problem I’m seeing with it is that usernames need to be treated as a special case.

To get category descriptions to display correctly on the categories page, you need to add this css to your theme. I’ll make a pull request to add that to the main code.

.category-description span {
    display: inline-block;
}

The button for toggling the editor’s direction is found here. Toggling the editor’s direction doesn’t affect the editor’s output, it just makes it easier to type.

There are still a few areas where mixed text could be displayed that are not having their text-direction set. If you come across any, please let us know.

[parisa (Pari)]

Fantastic! I have updated discourse to latest and it is working like a charm.

@simon

The button for toggling the editor’s direction is found here. Toggling the editor’s direction doesn’t affect the editor’s output, it just makes it easier to type.

My first comment would be if you can do something for this button to not toggle entire editor and just toggle current paragraph. That would be great.

I keep an eye on this new feature and let you know about problems.

[sam (Sam Saffron)]

I would love to support partial ltr/rtl to be visible in the composer but it will require a pretty big change to the composer cause we can no longer use a text area and would have to use a content editable div

[parisa (Pari)]

So maybe removing that button is better. because at least for my community, it is confusing the ppl. they think that it is that button that decides the direction of text.

another question.

I realized that to change the direction of text, rtl and ltr contents should be separated by two enters. Can you also support correct direction with one enter?

[parisa (Pari)]

@parisa

So maybe removing that button is better.

Please ignore this suggestion. It is good when it comes to a full ltr/rtl post.

[simon]

Thanks for the feedback! One of the main reasons for adding the button was to make it easier to add blocks of code on RTL sites.

[parisa (Pari)]

Is this possible @simon ?

@parisa

I realized that to change the direction of text, rtl and ltr contents should be separated by two enters. Can you also support correct direction with one enter?

non tech people don’t understand the difference between one and two enters.

[simon]

I think it is possible, but I’m not sure how efficient it will be. I’ll give it a try.

The easiest non-technical explanation for the difference between one and two enters is that two enters (a blank line) creates a new paragraph. The direction is being set at the paragraph level.

[parisa (Pari)]

@simon, I found that there is a great performance drop in long topics containing mixed text direction. First I thought its because of rating plugin. However after further examination, I turned off this feature in our forum, and found that everything was back to normal.