Add bidi / RTL support

[ahangarha]

Is your proposal related to a problem?

Considering the very nature of social media platforms (like Lemmy), people with different languages would create content. It becomes problematic when one creates content in RTL languages (like Persian, Arabic, Urdu,...). Lemmy is not ready to render RTL (or even mixed RTL/LTR) text properly.

Describe the solution you'd like

There are two approaches in general. One is through HTML modification which can be done by add dir="auto" attribute to elements containing user generated text or by wrapping it in <bdi> tags. The other approach would be through CSS by adding unicode-bidi: plaintext. In either of approaches, there should be avoidance in using absolute positioning or spacing. For example instead of text-align: left we should use text-align: start or instead of padding-left we should use padding-inline-start unless there be some strong UX reason.

Describe alternatives you've considered

--

Additional context

Just keep in mind that bidi (bidirectional text) is different from using RTL or LTR in general based on the language user choose for the interface.

I have opened this issue here not on back-end because I think this can be managed on front-end.

---

Todo

• [ ] Post Title
• [x] Post Text (#1963)
• [ ] Comments

[dessalines]

Thanks! Again I personally don't have time to work on this, but hopefully that code can be helpful to someone who does.

[jayabie]

No update made to this? we need the RTL from lemmy`s master branch very much so we can get the updates.

[Nutomic]

If you want this to be implemented, you can work on it yourself (or hire someone to work on it), and then make a pull request. We would definitely like to merge this functionality.

[jayabie]

No progress made on this @dessalines @Nutomic ?

[dessalines]

No. Read the comments above.

[jayabie]

I couldn't find anyone to make it this is why i'm asking.

[xximj]

Hey @jayabie Feel free to say hi at @mjxtb:matrix.org - we can team up on this.

[jayabie]

@xximj Thanks for your invitation, i will join soon.

[lorem10]

Hi guys, we had a draft PR that was supposed to work on other sections last week. is it in progress, I also want to contribute to this case

[hamidrezakp]

Hi guys, we had a draft PR that was supposed to work on other sections last week. is it in progress, I also want to contribute to this case

Hey, do you mean #1963 or something else you were working on? Anyways, we love to see progress on this part, especially on comments section.

Last week i have done some testing with comments section and it's kinda impossible to make HTML uls bidirectional. only one direction can be chosen.(maybe i wasn't trying hard).

@dessalines When can we expect the new UI to be ready? Is it worth it to make effort and fix this UI?

[ahangarha]

For lists, only we can add direction to ul and not to li. Don't waste time on fixing issues with li.

[hamidrezakp]

For lists, only we can add direction to ul and not to li. Don't waste time on fixing issues with li.

Yup, i've tested it, and if we can make it happen, it's gonna look ugly. For comments section, we should avoid using ul.

[ahangarha]

May you share some screenshots of what you see as ugly?

[hamidrezakp]

May you share some screenshots of what you see as ugly?

I couldn't make it happen, it was hypothetically. one comment on left and another on right, inside chain of replies, should be hard to follow.

[ahangarha]

That is the nature of the issue. It happens the same if we do it here. See:

این متن فارسی است و در به صورت یک متن RTL با تراز راست‌چین نمایش داده می‌شود.

[hamidrezakp]

Any updates on this? @ahangarha did you get to work on comments section? At least we can merge the parts that is working(#1963)

[ahangarha]

I haven't worked on it yet.

Since the current partial solution doesn't harm the project, I would say we can ask for merging #1963

For lists, I need to make a new release in markdown-it-bidi. But I don't think this is a crucial issue for now.

[hamidrezakp]

Let's have this issue open as it it not totally completed, but partially. The comments section needs BIDI too.

[ahangarha]

@hamidrezakp Can you make a checklist of what is done and what are remaining?

[hamidrezakp]

@hamidrezakp Can you make a checklist of what is done and what are remaining?

Sure:

• [ ] Post Title
• [x] Post Text (#1963)
• [ ] Comments

Although we should discuss if we want to have post title be bidi even if users layout is different than title direction (e.g. User with en_us language opens a Persian post with Persian title).

Other than post title, imo we just need comments to be bidi for now.

And please update your first comment and mention current status.

[ahangarha]

if we want to have post title be bidi even if users layout is different than title direction We should have bidi by I think what you mean is that if we should enforce text alignment with left|right rather than start.

This is important but it is a design decision.

[Nutomic]

I just submitted a backend PR which allows Arabic (and Cyrillic) in usernames and community names: https://github.com/LemmyNet/lemmy/pull/4083