RTL Layout Support

[Simon-Laux]

Areas:

• [ ] Navbar
• [ ] macOS placeholder for traffic lights (window controls)
• [X] Chatlist items
• [x] Create Chat Dialog
• [ ] Add Member Dialog
  • [X] List
  • [ ] checkmarks in list items
• [ ] New chat floating action button
• [ ] Icons (directional icons such as back buttons on dialogs and checkmarks)
• [ ] Overlay position:
  • [ ] AccountListSidebar hover info (opens in wrong direction)
  • [ ] Emoji Picker
• [ ] Composer:
  • [ ] send button arrow icon needs to be flipped
  • [x] text input field should be set to rtl
• [ ] MessageList
  • [ ] messages are on wrong side and sharp corner is on the wrong side -> also they don't fill screen (probably because of the hover buttons
• [ ] Settings Dialog
• [ ] Dialogs (uses portals, so maybe blueprint removal helps with that: #4006)
• [ ] Small screen mode
• [ ] look in css for margin-right, padding-left, float: right and so on and convert to inline-start/inline-end

Useful resources:

• html dir=<ltr|rtl> attribute
• https://developer.mozilla.org/en-US/docs/Web/CSS/:dir

Questions:

• [ ] Do we enable it based on language or as user preference?
  • based on language is easy and doesn't introduce extra setting
  • extra setting allows testing with other languages
• [ ] Should Icons be mirrored as well?
  • verified checkmarks and other checkmarks?
  • the send button should be mirrored
• [ ] Should we open context menus in the opposite direction? (this is about the preference, if there is not enough space there it will open on another side of the cursor)
  • I think it makes sense because you read in the other direction, but I don't know what other apps do in RTL mode

Misc:

• there seems to be no consistent API across browsers to find out writing direction (firefox has no api, safari and chrome have different api), so I would say we hardcode this in _locales/_languages.json?

CC @farooqkz

[r10s]

Do we enable it based on language or as user preference?

if it all, it should be a debug-only-hidden setting, not even experimental. for the user, there is no reason to have this option - languages are RTL or LRT, not both. android/iOS/Windows/Mac/whatever usually do not have this option in UI accessible by the user.

so, i would not go for that at all - for testing, devs can easily just switch to an RTL language - we devs anyway know the position of buttons without reading :)

Should Icons be mirrored as well?

makes sense esp. for the "back" button, as you already noted. for all other icons, i would defer these discussions when all other parts are fine. is there just a CSS trick for mirroring? that would make the decision easier, however (cmp. https://m2.material.io/design/usability/bidirectionality.html#mirroring-layout )

Should we open context menus in the opposite direction?

i would expect that to make sense as well, however, this is again a minor issue, compared to the overall fix of showing the layout correctly mirrored

NB: i added the "bug" label as we already have at least some RTL languages that are displayed wrong

[farooqkz]

Do we enable it based on language or as user preference?

if it all, it should be a debug-only-hidden setting, not even experimental. for the user, there is no reason to have this option - languages are RTL or LRT, not both. android/iOS/Windows/Mac/whatever usually do not have this option in UI accessible by the user.

The thing is, that there is no conseneus on the Persian community that the layout should be RTL. Actually some folks find it "weird" after a lifetime of working with LTR layout in the softwares. Needless to say, Every single ordinary Persian user uses the computers with English UI language, and LTR. Just advanced users switch to Persian UI language for their computers. Users like me. So keep in mind that:

• The user should have choice of choosing a locale other than OS's locale. Because some users want DeltaChat in Persian and the rest of OS in English.
• Adding RTL support for Iranian users is more like an optional enhancement than something which we really need. Power users already know English, even if some of them tend to switch to Persian for the OS and apps just for the sake of their language and culture. And ordinary users are used to be dumb(as is they don't know what button they are clicking) because even if at their own computer they switch to Persian, another computer few meters away would be in English.

So overall: adding RTL support is definitely a huge plus for Iranians but not as big impact as it has for Hebrew and Arabic speakers.

Here in my comments, by Persians I mean Iranian Persians. Tajiks and Afghans respect their language and culture much more than we do.

[r10s]

thanks a lot for the insights and details!

some folks find it "weird"

is there a comparable user-changable option in Android/iOS/Windows/Mac or other larger apps?

surely, one can think of whatever cases, however, it also makes sense to keep things simple. for the beginning, i would not go beyond what is usual and offered by other systems and app, that could go to a feature proposal

on android/iOS, Farsi is RTL since forever, and iirc, no one complained; desktop adding more stuff here may raise expectations also there. so also consistency should be taken into account

from https://www.quora.com/Is-it-true-that-Farsi-is-written-from-left-to-right-or-is-that-not-true-What-makes-it-that-way-if-it-is-or-isnt-I-was-told-it-isnt-written-from-right-to-left :

The Farsi language, like any other language, can be written left to right if it is in an alphabet like the Roman alphabet

maybe add a second locale than, that transcribes Farsi in Latin?

is there a language code for that? cmp https://github.com/deltachat/deltachat-android/issues/3213 where we have troubles with that ... :)

[farooqkz]

The standard form for the app is to be mirrored. But some people within the Persian community don't like this "standard" on PC. On Android people have been using Persian UI with mirrored UI since the first day so there is no problem there. I agree it's weird that some dislike this. But it is how it is. There are other weird things within the community:

• There is "Finglish". Persian with English alphabet. It is the new norm within the new generation(born 1995 and later). When I told an Arab friend about this, he was partially shocked and he said if it would've been for Arabic, we would consider it an attack.
• Iranian Persians tend to use English words instead of Persian ones. Some believe it's stylish, cool, and shows knowledge of the speaker. Some others blindly, sometimes without conciousness, follow the former group. Some folks have highly negative view about such a usage. I'm not talking about technical words like WebXDC. I'm talking about simple words like "Event" or "Meet up" which is being frequently used in speech of an Iranian Persian speaker. It is becoming, or has become the new normal within our country, unfortunately.

I'm pinging @ahangarha @mehr32 to get them involved.

[ahangarha]

A general point: Regarding the layout, everything except a few icons should be flipped. If some people dislike it, it is because they never used it that way. Thought I can accept the option to prevent flip but if the use set the app language to be one of RTLs, the default behavior should be as described.

But to me, the issue is not adding RTL support. All apps should have bidirectional text support. This means, regardless of the overall layout, any element with user generated content should show the content (and also apply padding, margin, border) based on its own content. And this is very much doable with all major technologies used today.

Regarding using Latin alphabet for Persian, I can say do not waste your time on it. I don't have even a single example in mind where an app supports Persian with Latin characters. This is just a waste of time. Either add support for Persian with its official character sets (unicode standard) or just focus on other features of the app.

---

To @farooqkz: By the way, Finglish is not new. It started in mass level when mobile phones came to public use and people could only send Latin characters in their SMS. Perhaps most of the shit got started from that point because technology was faulty not that English was cool. But the next generations got it wrong because of not knowing the background. They thought being advanced is to continue doing the buggy thing. This is a good example of how tools can shape our mind and then we start justifying the new behavior with absurd excuses 🤣