RTL better support

[HKalbasi]

This issue is for tracking UI problems for right to left languages. I will fill it incrementally.

• [x] For start, Username should be near avatar regardless of language direction:

• [x] And if sender's username is in ltr but message text is in rtl, can lead to wrong direction: (Can solve by separating sender name and message text into two elements, maybe hard to solve) In this image, image room name is correct but last message (which is equal to room name) is reversed.

And some good links (maybe useless, maybe you already aware of):

• unicode-bidi property in css
• unicode-bidi resolve algorithm

[su-ex]

Thanks! 👍 I've added checkboxes so they can be ticked off. ☑️

[su-ex]

If the username is left aligned, what should happen to the text below? Should the actual text be left aligned too or right aligned? It looks weird if the username is left aligned and the text is right aligned.

[HKalbasi]

I think it is not so important because bubble size is determined via text size and always it fill the bubble. In telegram, username is left aligned but text is right aligned, and that's good.

Also I recently found a way to fix number 2, by adding a U+2068 charachter (isolation character) between sender name and message text. https://github.com/tulir/mautrix-telegram/issues/592

[su-ex]

I think I got them. Please check after the next release if these problems are gone and just continuously update the list and maybe close while there is nothing and reopen once there something pops up again.

[HKalbasi]

Thank you for your great work!

[HKalbasi]

Recently I upgraded my browser. It is brave based on chromium 90. After upgrade, rtl become completely broken everywhere (in messages, sending messages, etc). It is still correct in firefox. This is probably problem with chromium but I'm not sure because my other PWAs are ok.

[su-ex]

Does it work with Chromium 90? How does Element (if it's about anything except the bubble layout) or the from Element inherited "modern" layout (if it's about the room view) behave? Screenshots (how it is vs how it should be) and maybe even offending classes of elements (devtools) would be great!

[HKalbasi]

Brave (wrong):

Firefox (correct):

It has dir="auto" and definitely should work!

[su-ex]

Hmm, very weird. I think I can't reproduce this with Chromium 90. Maybe I'll install Brave later to test there. Does Element's text input field behave right? And which platform are you on?

[HKalbasi]

Yes it seems brave-specific. Anyway it is related to chrome or brave and does nothing to do with schildi. So I will close this issue.

[su-ex]

I use :dir() for enhanced displaying of rtl. Since there's much user produced content where the direction is not known this was the only feasable way without messing around with JavaScript. For Chromium this is in development and according to the tracking bug there's slow but steady progress. However, this is only used for cosmetics: With Chromium right now rtl text might be left aligned and such, but the word order should be right. Since the desktop electron builds are based upon Chromium I definitely tested that and the word order matched Firefox, although it might not be pretty until this is implemented there too.

[HKalbasi]

No this is not related to :dir() and it is ok in chromium 90 (and was ok in brave) and I can replicate it in https://hkalbasi.github.io/notes/test-rtl/ without any css or js.

[HKalbasi]

In the latest release direction is always LTR in message bubbles:

But it is fine in rooms list and message editor: