Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

RTL languages appear in LTR #940

Open
yarons opened this issue Apr 14, 2024 · 1 comment
Open

RTL languages appear in LTR #940

yarons opened this issue Apr 14, 2024 · 1 comment
Labels
LTR support

Comments

@yarons
Copy link

yarons commented Apr 14, 2024

What

RTL (Right-to-Left languages such as Hebrew, Arabic, Persian, Urdu, etc.) refers to languages written from the reverse order of LTR languages (Such as English, French, Latin, etc.), the UI should change accordingly.

Steps to reproduce the behavior:

  1. Go to settings
  2. Select a different UI language
  3. The UI will remain in LTR

Expected behavior

It should change to RTL.
The most naive way is just adding the dir=rtl attribute to the <body> tag (can be done automagically with JS or even CSS directly) and then looking at all the glitches and fix them manually.

Screenshots

A blog post by Spotify: https://engineering.atspotify.com/2019/04/right-to-left-the-mirror-world/
This is Windows 11 in Hebrew:
image
This is Ubuntu in Hebrew:
image
KDE in Arabic:
image
Sharif Linux (Presenting a Persian GNOME):
image

Platform (Desktop, Mobile, Hunger Games)

  • OS: macOS
  • Platform: Desktop
@teolemon teolemon added the 🐛 Bug Something isn't working label May 4, 2024
@teolemon
Copy link
Member

What

  • Ensure Hunger Games works well in Right-To-Left (RTL) languages (such as Arabic or Hebrew)

Checklist (AI generated)

Functionality:

  • Text Input Direction:
    • Ensure all text fields (e.g., term name, description) automatically switch to RTL input when an RTL language is selected.
    • Verify that placeholder text within fields is also displayed in RTL.
  • Text Alignment:
    • Check that all text within the editor aligns to the right by default for RTL languages.
    • Confirm that headings, labels, and instructions are also right-aligned.
  • Hierarchy Display:
    • If the taxonomy is displayed hierarchically (e.g., tree view), ensure the hierarchy expands from right to left.
    • Verify that indentation of child terms is consistent with RTL reading direction.
  • Drag-and-Drop:
    • If drag-and-drop functionality is used, ensure terms are correctly repositioned within the RTL hierarchy when dragged.
  • Search:
    • Test that search results are displayed in RTL and that filtering/sorting functions work correctly.
  • Error Messages and Notifications:
    • Verify that any error messages, warnings, or success notifications are displayed in RTL format.

Visual Design:

  • Icons and Controls:
    • Check that any icons used (e.g., arrows, add/delete buttons) are flipped horizontally for RTL to maintain visual consistency.
    • If dropdown menus are used, ensure they open to the left in RTL mode.
  • Layout:
    • Review the overall layout of the editor to confirm that elements are positioned intuitively for RTL users (e.g., menus on the right, save buttons on the left).
  • Spacing and Padding:
    • Adjust spacing and padding around elements as needed to accommodate RTL text, which may require more space due to diacritics.

Localization:

  • Language Switching:
    • Test the language switching mechanism to ensure smooth transitions between RTL and LTR languages.
  • Date and Number Formats:
    • Verify that dates and numbers are displayed in the appropriate RTL format.
  • Cultural Considerations:
    • If applicable, consider any cultural sensitivities related to colors, imagery, or terminology when localizing for specific RTL regions.

Testing:

  • Real Users:
    • Conduct usability testing with native speakers of RTL languages to gather feedback on any issues or areas for improvement.
  • Automated Testing:
    • If possible, implement automated tests to ensure consistent RTL behavior across different browsers and platforms.

Additional Considerations:

  • Font Selection: Choose a font that supports the RTL script clearly and legibly.
  • CSS: Use CSS properties like direction: rtl and text-align: right to control text direction and alignment.
  • HTML: Use the dir="rtl" attribute on the html tag or specific elements to indicate RTL directionality.

Let me know if you'd like any of these checklist items explained in more detail.

@teolemon teolemon removed the 🐛 Bug Something isn't working label Oct 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
LTR support
Projects
Hunger Games (new)
Status: To Discuss & Validate
Right-to-Left support accross Open Food Facts
Status: No status
Milestone
No milestone
Development

No branches or pull requests
2 participants
@yarons @teolemon