lemmy-ui

lemmy-ui copied to clipboard

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

I have no familiarity with this, but anyone should feel free to give it a try.

I found this page which gives a lot ofdetails on how bidirectional text works: https://www.w3.org/International/articles/inline-bidi-markup/

Another great resource: https://rtlstyling.com/posts/rtl-styling

Another great resource: https://rtlstyling.com/posts/rtl-styling

Please notice that bidi is not about RTL. One can use RTL if it is known that the content is RTL. We are talking about a social media in which people may write text in different languages and even wrote mixed content. We don't have and we don't want to have rich text editor in which the user can specify which direction should be applied on a specific portion of the text. We want to handle this situation automatically which is called bidirectional text support.

In most of the cases, adding dir="auto" to the element which contains the text is the trick. In addition we need to use other values that absolute left|right for text alignment or padding/margin or even borders.

In most of the cases, adding dir="auto" to the element which contains the text is the trick.

Yes, to each element if you want true mixed content support. (And to the top element only for nested elements like ul or blockquote https://codepen.io/cadars/pen/poeXMXZ )

I did a quick review of what would be needed to fully support RTL languages in lemmy-ui:

1. Editor: add dir="auto" to all elements users can create, like @ahangarha suggested.
2. Add the proper lang attribute to the html element when switching the language. For now it's always lang="en".
3. Add dir="rtl" to the html element for RTL languages.
4. Switch to logical CSS properties:
   • Because lemmy-ui is using flexbox for layout at its core this is quite easy, see https://github.com/cadars/lemmy-ui/commit/4ded16218bd977787d9b7ea0f8d19b09a294f299 https://github.com/cadars/lemmy-ui/commit/025a058120df457f053af6a51b7a7c01902753e1
   • The hard part: most of the styling comes from the (bootstrap) themes CSS, and rewriting each theme by hand, or asking future theme writers to only use logical properties isn't really an option: a solution would be to use RTLCSS or similar(?) to convert each theme to their RTL counterpart. (of course this adds yet another dependency to the project…)

Things like RTLCSS wouldn't help as per my understanding. We need to modify certain styles. For example:

• text-align:left|right -> text-align:start|end
• padding-left|right:* -> padding-inline-start|end
• margin-left|right:* -> margin-inline-start|end
• and somehow similar properties for border,...

In an ideal world, yes, but lemmy-ui uses Bootstrap themes, and rewriting them is no small feat; so using a “converter”, while being a less elegant solution, sounds way more practical.

Let's say some bidifix. I don't know when I would find time to work on this, but it should easy to implement.

Whoever takes this on, I want to mention that lemmy-ui uses bootstrap, and it has RTL instructions here: https://getbootstrap.com/docs/5.0/getting-started/rtl/

Whoever takes this on, I want to mention that lemmy-ui uses bootstrap, and it has RTL instructions here: https://getbootstrap.com/docs/5.0/getting-started/rtl/

Again, this is for explicitly define direction. Such solutions won't work for us. We need dynamic directions based on the content.

Any update on this case guys? We need the RTL ASAP please.

PRs adding this welcome.

I checked dependencies. Lemmy uses markdown-it for handling markdown. I have success in convincing marked to add bidi support (they made a plugin for it) but still struggling with developers on markdown-it.

There are some workaround. If lemmy developers are ok with adding this feature in two steps, I think we can start working on it. We can make markdown sections to follow the first character's direction till markdown-it add bidi support or a plugin be made for it. then we can remove the relevant modification for these section since it will be fully handled by markdown parser.

If it is ok, I try to find some time to create local development environment.

Sweet, let me know if you need any help setting up a development environment.

In few week I will come back again. First I try to do it on my own and if I failed, I will seek help.

I just wanted to inform you that we are working on a plugin for markdown-it which is used in this project for parsing md to html. This plugin called markdown-it-bidi and is under development. not ready to be used in production but I think it is on the track.

I decided to do this so that not only we can help lemmy to fix this issue but many more projects can benefit from. It is under LGPL which I think is very good :). So if I didn't follow up here, that was the reason. Hopefully in sometimes we can add that in this project and...

If anyone interested, please check the code and share your thoughts.

@dessalines @ahangarha Friends, no progress with this yet?

@jayabie I am looking for an opportunity to open some time for it.

@dessalines @ahangarha

No update my friends?

@jayabie I am going to try now. As long as there is no nested elements (like list within list) the plugin is usable even now.

But let me try it on the actual project in development environment. If successful, I send PR. Would it be fine? I mean within 2 days I might ask to assign this issue to me. Would it be fine?

Hello @ahangarha

I'm just a guy seeking for RTL, i think you should ask @dessalines if any extra permissions needed.

But let me try it on the actual project in development environment. If successful, I send PR. Would it be fine? I mean within 2 days I might ask to assign this issue to me. Would it be fine?

@ahangarha There is no rush, no one else is working on this. Just take your time and make a pull request when you are ready. Also feel free to ask if anything is unclear.

@Nutomic I have issue in building backend. How can I get help? I don't think here is a good place.

@ahangarha What error do you get? Make sure to run git submodule init && git submodule update before build. And follow the documentation.

https://join-lemmy.org/docs/en/contributing/contributing.html

This was and still is the error:

➜  lemmy git:(main) cargo check
   Compiling lemmy_utils v0.16.5 (/****/lemmy/crates/utils)
    Checking futures v0.3.21
    Checking actix-server v2.1.1
    Checking opentelemetry v0.17.0
error: failed to run custom build command for `lemmy_utils v0.16.5 (/****/lemmy/crates/utils)`

Caused by:
  process didn't exit successfully: `/****/lemmy/target/debug/build/lemmy_utils-53c738f32a60fcf3/build-script-build` (exit status: 1)
  --- stdout
  cargo:rerun-if-changed=translations/email/en.json
  cargo:rerun-if-changed=translations/email/pt.json
  cargo:rerun-if-changed=translations/email/ko.json
  cargo:rerun-if-changed=translations/email/fi.json

  --- stderr
  Error: Fmt(Os { code: 2, kind: NotFound, message: "No such file or directory" })
warning: build failed, waiting for other jobs to finish...
error: build failed

It seems it cannot get translations.

So you are missing the submodule. Did you run the commands from my previous comment? And what does git status show?

Yes. I ran.

I ran clone with --recursive and also I ran the commands you gave me. Nothing happened. see:

➜  lemmy git:(main) git submodule init && git submodule update
➜  lemmy git:(main)
➜  lemmy git:(main) git submodule status                      
 3f86b5c40796fa83054e2226e36effff3b93198a crates/utils/translations (remotes/origin/lemmy-ml-registration-message-252-g3f86b5c)

We also saw issues with that when people were running old versions of rust, or not properly using rustup to get new rust versions.

If the files are there, make sure you're at least on rust 1.60.

What does rustc --version say?

Also lmk if I can help in any way... we desperately need RTL, but I have no experience with it, how it should work, or how to test it.

My rust version is 1.59.0.

For RTL (I would say bidi not RTL) it depends. I had a presentation about this in LinuxAppSummit 2022. I have to prepare its video and publish. Otherwise, we need to spend some time to work on it. Sometimes it gets tricky.