Add support for right-to-left text directionality

[omerori]

Add support for posting RTL texts in languages such as Arabic and Hebrew.

Please report any incorrect display in this issue.

[annando]

Can you provide what exactly has to be done? What happens when you enter Hebrew or Arabic content in Friendica?

[tobiasd]

Here is some guide for styling Wordpress, but the actions taken are not WP specific.

[ahangarha]

I have a suggestion. You just add dir="auto" to any element which can potentially contain RTL or LTR text. It makes the browser define direction of the content based on first character. I have used this on different projects and it works perfectly. I assume gitlab also does the same thing for handling its markdown in issues, MR, etc.

I have a firefox addon called add bidi support which applies this attribute to almost all elements. It is not supposed to work perfectly in all circumstances (due to different architecture of html in different websites, but it demonstrate how this approach would work.

I am not sure if I can do this on friendica as I have not seen the source code. So let me know if you can do it or not.

[ahangarha]

Here is some guide for styling Wordpress, but the actions taken are not WP specific.

This doesn't bring support for bidirectional text. This enforces RTL direction which would be problematic if you want to see LTR text. So this is not solution. On social media, we are dealing with situation in which people with different languages want to interact with each other. So the platform should be able to handle both RTL and LTR at the same time. It would be fine if the overall direction of page be either of LTR or RTL (perhaps based on selected interface language) but it shouldn't lead to wrong direction for individual texts. RTL should be seen RTL and LTR should be seen LTR.

[annando]

Thanks for the hint with dir="auto". This would need to be added to the appropriate template files.

[ahangarha]

I am not sure about one thing. This approach also works in some scenarios. Just add these stylesheets:

.wall-item-body, .wall-item-body *, .media-heading {
  unicode-bidi: plaintext;
}

It needs to be set with more care as it can displace some other things such as RTL titles of a post fetched from RSS.

But rest, it works fine

[ahangarha]

Any update in this regard?

[MrPetovan]

Not yet, do you have a federated social media account that we could follow with RTL content to check our implementation?

[ahangarha]

Not yet, do you have a federated social media account that we could follow with RTL content to check our implementation?

I am on mastodon: https://mas.to/@ahangarha/

But also you can check some twitter subscription with some Persian hashtags like #نرم‌افزار_آزاد.

If needed, I can share some mixed text I sometimes use to check bidi support on different apps.

[MrPetovan]

Thank you. The way I see it, there are two separate aspect of this, the UI and the content. The UI needs a full translation and then several tweaks on every page to make sure it feels right for RTL readers. For the content, it seems easier since only post bodies and profile information need to be correctly displayed. I believe the dir="auto" will be enough to satisfy RTL content, but the UI will need a whole different effort.

[ahangarha]

That would be a good start. There are few other things we need to keep in mind. One is when a post starts with a username (like mentioning a person) mentions should be in <bdi>. Such kind of things needs to be addressed.

[MrPetovan]

Thank you for the hint, I didn't know about this tag. so all display names should be wrapped with this tag.

[ahangarha]

Yes. It might be possible to add unicode-bidi: isolate to those parts but it is discouraged to do so. Though I have done this on some projects like Sengi to prevent HTML manipulation.

And lets work with content first. Regardless of UI direction, content should show up in right direction. UI can be handled later.

[ahangarha]

I have not tried to wrap things in <bdi> as the main approach. I have used dir="auto" and sometimes played with unicode-bidi.

I can make some test these days to see how would this approach work.

I am not sure if myself can run a local installation of Friendica to test. I will do it with sample texts.

[MrPetovan]

Question for you: in the column where we show in order:

• Profile name
• Profile address
• Profile information

If the name and information are RTL, should the address also be RTL? Using dir="auto" on the parent element of these three, the address follows the detected text direction.

Using dir="auto" on each individual element leaves the address in LTR, is it expected?

[ahangarha]

Yes. this is how it should look like. It should apply direction based on the first strong character.

What is rendered in this image, is the exact expected result.

[MrPetovan]

I added the <bdi> tag to the display names of the mentions, but since we have the mention's @ outside of this tag, I'm not sure what is the expected display in the following cases:

• LTR message with RTL mention
• RTL message with LTR mention
• RTL message with RTL mention

Could you please provide sample displays for these cases?

[ahangarha]

I just don't know how we can work on this together since I don't have enough technical knowledge to run local env.
I don't think we would anytime (at least any time soon) have RTL mention. Usernames are in latin character. I haven't seen RTL username.

[ahangarha]

There is another important issue: there shouldn't be any hard alignment (left|right) at least for such contents. padding, margin, text-align and border should use start|end instead of left|right. For all these styles except text-align, we should use relevant bidirectional alternatives. For example instead of padding-left: 1rem we should use padding-inline-start:1rem.

[MrPetovan]

I just don't know how we can work on this together since I don't have enough technical knowledge to run local env.
I don't think we would anytime (at least any time soon) have RTL mention. Usernames are in latin character. I haven't seen RTL username.

Friendica doesn't display usernames for mentions, it displays display names, which can be RTL.

Example with your display name:

@مصطفی آهنگرها Test mention at start of the message

There is another important issue: there shouldn't be any hard alignment (left|right) at least for such contents. padding, margin, text-align and border should use start|end instead of left|right. For all these styles except text-align, we should use relevant bidirectional alternatives. For example instead of padding-left: 1rem we should use padding-inline-start:1rem.

But this is only relevant if we have asymmetrical paddings/margins, right? And I don't think we have many absolute text-align values.

[ahangarha]

In this case (display name), it should be isolated so that the direction of rest of the text would be be determined by the main part of the post. You sample text is shown properly.

[MrPetovan]

Ok, I think the user-submitted content part is covered thanks to your precious technical hints. It wasn't much to add, but I would have needed a lot of time to figure out what to add. Thank you!

[ahangarha]

Is there any instance deployed directly from dev branch? So I test.

[annando]

@ahangarha In several days (when I consider it stable enough), I will switch squeet.me to dev.

[ahangarha]

Then I make an account there for test. I already have account on venera.social but I rarely post on that.

[annando]

@ahangarha this weekend I updated squeet.me.

[ahangarha]

Today I checked squeet.me. Individual posts and conversations are fine but indexes (like search, posts,...) are not.

Addressed in #10270

[ahangarha]

Well done!

Just I notice two issues:

1. at least in this particular post, the dir="auto" is set to outer div with makes whole of the inner div get RTL or LTR direction.

2. Tags/hashtags need to be improved for RTL content. Not a big issue but it should be in the list.

Addressed in #10278

[ahangarha]

Also the post creation form needs to support bidi.

Addressed in #10278

[ahangarha]

Should I report all issues regarding bidi here?

[ahangarha]

Post title doesn't have dir="auto":

Post URL

Addressed in #10278

[MrPetovan]

Should I report all issues regarding bidi here?

Absolutely, it would be way too noisy in separate issues. I'll look into your most recent reports later.

[MrPetovan]

The mentions seems not to work as expected either, in a RTL post the at-sign ends up at the end of the username like this: danialbehzadi@. This is because the @ is outside of the <bdi> tag used for mentions.

Wrong: @<a><bdi>danialbehzadi</bdi></a>
Correct: <bdi>@<a>dianalbehzadi</a></bdi>

[MrPetovan]

1. at least in this particular post, the dir="auto" is set to outer div with makes whole of the inner div get RTL or LTR direction.

Unfortunately I wasn't able to use <bdi> successfully to modify the direction of a line with just a URL on it. We don't have a paragraph structure, so we need to use dir="auto" on the parent <div> at the moment.

[MrPetovan]

2. Tags/hashtags need to be improved for RTL content. Not a big issue but it should be in the list.

Is this the correct way it should display?

[ahangarha]

Unfortunately I wasn't able to use <bdi> successfully to modify the direction of a line with just a URL on it. We don't have a paragraph structure, so we need to use dir="auto" on the parent <div> at the moment.

It is fine to add dir="auto" but it is put in a wrong place (or at least it should be added to some other elements as well. Look at these screenshots:

The span and div elements related to show-more need dir="auto".

Addressed in friendica/friendica-addons#1118

[ahangarha]

Is this the correct way it should display?

It is at least in shape. Though it would be ideal if it can show the # and the other sign in reverse order in RTL hashtags. but I would say it is fine for now.

I think we don't need to go for this much fine tuning at this stage at least. The priority is to make the UI work for RTL content. These details can be fine tuned later.

[MrPetovan]

Thank you, I included the hash-mark in the <bdi> tag and it worked.

[tobiasd]

Is this still an issue? Or should the expansion of the RTL support be another ticket?

[ahangarha]

Is this still an issue? Or should the expansion of the RTL support be another ticket?

Do you experience any issue? On some instances such as venera.social it is already working. I can say it is working fine.

[tobiasd]

So we can close this ticket?

[ahangarha]

I think so. If there be any issue, one can open a new issue.

[AlfredSK]

I recently saw a reshared post with RTL text. In frio the text of the reshared content was overlapping the little network icon and link to source icon.

[MrPetovan]

A screenshot and/or a link would be welcome.

[AlfredSK]

Yes. The problem is to find it again.

[AlfredSK]

Ha! Found one. :-)

Username and date of post are inserted on the right side. But it should be on the left side.

Steps to reproduce:

1. Import this post on your node https://venera.social/display/67851619-983298e32d387710-a32197cb
2. Or use the original https://persadon.com/@danialbehzadi/106521529502265000
3. Click on 'Quote Share'
4. Look at the preview

I only used the preview function to reproduce the issue. But the same happens with the submitted share.

[tobiasd]

Ok, but lets close this ticket never the less, new issues with the RTL support should get their own tickets.

[tobiasd]

With #10849 the Arabic translation of the strings used in the web UI of Friendica arrives in the repository as it now covers more then 50% of all strings used. Guess the RTL support campaign enters the next step.