teolemon
commented
4 months ago 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: rtlandtext-align: rightto control text direction and alignment. - HTML: Use the
dir="rtl"attribute on thehtmltag or specific elements to indicate RTL directionality.
Let me know if you'd like any of these checklist items explained in more detail.
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:
Expected behavior
It should change to RTL. The most naive way is just adding the
dir=rtlattribute 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:
This is Ubuntu in Hebrew:
KDE in Arabic:
Sharif Linux (Presenting a Persian GNOME):
Platform (Desktop, Mobile, Hunger Games)