Common-voice: rtl problem in arabic and persian website

[herotux]

website show texts ltr
maybe need rtl direction for a div to fix this problem

https://voice.mozilla.org/fa

[Gregoor]

Thanks for raising this! Last time we talked about this RTL languages were not yet close to being translated. Happy to see that the Persian is going along so great! I'll make sure to push RTL onto our agenda. Afaik there's more to it than just changing text direction, isn't it?

[herotux]

Tanks alot :rose:
Yes it is.

[yarons]

We are seeing the exact same issues with both Hebrew and Urdu on the staging websites:
Urdu - https://voice.allizom.org/ur
Hebrew - https://voice.allizom.org/he

[Gregoor]

Alrighty! I've spend some time looking into RTLing our site. The change should be on staging in a bit. Once it is, would you mind browsing around a bit and flagging issues?

One issue that I know of is the language selection, where the globe is still on the left. I'm going to rewrite that component completely soon anyway, so I didn't want to get too deep into it.

Another thing I was wondering: On the contribution screen the back arrow is pointing to the left. Should it be pointing to the right?

[peiying2]

https://voice.allizom.org/dv - the latest RTL language added to CV.

[Gregoor]

Ah, missed that one. Thanks, Peiying. I also added a separate json file listing the RTL locales: https://github.com/mozilla/voice-web/blob/master/locales/rtl.json

Or is there a way to get RTL info from Pontoon @peiying2 ?

[peiying2]

@Gregoor not sure if you can see this without logging in (admin only): https://pontoon.mozilla.org/a/base/locale/?all=&o=-5.2.3. This is the best place to confirm that.

Right now we have Arabic, Dhivehi, Hebrew, Persian, Urdu working in CV projects (we have more RTL languages in Pontoon). Another is to get to the language for CV and check the strings' directions - would not advice that.

[Gregoor]

Thanks! Unfortunately that link is behind an admin login. I also just saw that the GraphQL also has a direction field. Would you advise against that one as well?

[5y]

@Gregoor

Just two small problems until now :

• The "Optional Demographic Data" drop-down menu on the main page should be mirrored. ("Arrow" transfer the left and "title and content" transfer the right.)

  • Back Button and Skip Button in the "Speak" page should be mirrored.

Thank You.

[Gregoor]

RE the optional demographic dropdown: Can't do much about that one, as it's a screenshot.

RE the arrows: They're flipped now.

Thanks for the feedback! :)

[Gregoor]

@5y the text inputs on the profile seem wrong in RTL languages (text input is always LTR for those). Could I get your take on this?

[5y]

@Gregoor Do you mean in the main page? could you please sent me the link of the profile ?

[Gregoor]

@5y the profile page: https://voice.allizom.org/fa/profile/info
You need to be logged in to see the page though

[5y]

@5y the profile page: https://voice.allizom.org/fa/profile/info
You need to be logged in to see the page though

@Gregoor The direction of input text on the profile section is fine.

• The Avatar section title should be aligned to the right side.
  
• The Goals section, Your languages title should be aligned to the right.
  
• The Add language plus sign in the Profile section should be aligned to the right .
  

[Gregoor]

Thanks, that's very helpful! I just pushed a commit addressing those.

Except for the add languages plus sign, as it's already mirrored from the LTR version. Shouldn't it be mirrored in this instance?

[5y]

Thanks, that's very helpful! I just pushed a commit addressing those.

Except for the add languages plus sign, as it's already mirrored from the LTR version. Shouldn't it be mirrored in this instance?

@Gregoor you are very welcome.
It should be aligned looks like following example of Firefox for iOS in Persian.
The point is we put the sign on the right side and in some cases we mirrored the sign too.

[Gregoor]

Alrighty, I moved it to the right. What confused me, is that it's on the right in LTR languages as well:

I don't have a good intuition for when it should be mirrored and when not, so thanks for guiding me through it :)