Ensure the Mobile App works well in Right-To-Left (RTL) languages (such as Arabic or Hebrew)

[teolemon]

What

• Ensure the Mobile App works well in Right-To-Left (RTL) languages (such as Arabic or Hebrew)

Checklist (AI generated)

Visual Elements & Layout

• Text Direction:
  • Verify all text flows from right to left.
  • Ensure correct alignment of text within text boxes and UI elements.
• Layout Mirroring:
  • Reverse the layout of screens, including navigation elements, buttons, and content blocks.
  • Icons and graphics that convey direction should be mirrored.
• Margins & Padding:
  • Adjust margins and padding to accommodate RTL text flow (generally, leading margins become trailing, and vice versa).
• Text Alignment:
  • Ensure text is right-aligned by default.
• Input Fields:
  • Place cursors and text input indicators on the right side.
  • Align labels to the right of input fields.

Language-Specific Considerations

• Numerals:
  • Confirm proper display of Arabic or Hebrew numerals when appropriate.
• Punctuation:
  • Verify correct handling of RTL punctuation marks and their interaction with surrounding text.
• Ligatures:
  • If applicable, support ligatures in Arabic script for improved readability.
• Diacritics:
  • Ensure correct placement and display of diacritics in Arabic and Hebrew.

Functionality

• Swiping & Gestures:
  • Reverse swipe gestures for navigation and interactions.
• Scrolling:
  • Ensure horizontal scrolling starts from the right.
• Sorting:
  • Adapt sorting algorithms to work correctly with RTL text.
• Search:
  • Implement RTL-aware search functionality, including handling of diacritics and ligatures.
• Date/Time Formatting:
  • Use appropriate date and time formats for the target locale.

Testing & Localization

• Pseudo-Localization:
  • Use pseudo-localization techniques to simulate RTL text expansion and identify potential layout issues.
• Language-Specific Testing:
  • Thoroughly test the app with native RTL speakers on various devices and screen sizes.
• Localization Professionals:
  • Engage professional translators and localization experts familiar with RTL languages and cultural nuances.

Additional Considerations

• Images:
  • Avoid embedding text within images, as it can't be mirrored easily.
• Accessibility:
  • Ensure the app remains accessible to users with disabilities in RTL languages.
• Fonts:
  • Choose fonts that support RTL characters and display them clearly.
• Cultural Sensitivity:
  • Be mindful of cultural references and sensitivities in content and design.
• Updates:
  • Plan for ongoing maintenance and updates to address RTL-specific issues that may arise.

[g123k]

We have already implemented a lot a year ago: https://github.com/openfoodfacts/smooth-app/pull/4310 But that's the same as the accessibility, we need to check regularly.

[monsieurtanuki]

@yarons You have an obvious added value here. I don't think checking regularly all the bullet-points mentioned above is realistic, but would you please create an issue each time you see an RTL bug?

[yarons]

There are methods and explanations which are far more human design oriented. There's a famous blog post about RTL from the Spotify engineering team: https://engineering.atspotify.com/2019/04/right-to-left-the-mirror-world/

The Android Material equivalent: https://m2.material.io/design/usability/bidirectionality.html#mirroring-layout

When it comes to Desktop things are pretty straight-forward, with Android it's a bit more complicated due to the location of the thumb, in Hebrew we still use our right hand to control the phone so flipping the controls will require us to stretch the thumb further despite the original design that allows you to use an LTR app with one hand conveniently

Once you're minded about it and know the details it's becoming natural. With the latest redesign things look way better but still the input fields are a little clunky, there are some small refinements required but it's not completely unusable. I'll try to add screenshots that convey some of the pains we're experiencing but it's better to just try and edit a product in RTL yourself (assuming you remember the fields) and you'll see most of the gaps. Thanks :)