Fix RTL alignment for Persian/Arabic instruction sections

[MRGhust]

Description:

This PR fixes RTL alignment issues in Persian and Arabic UI sections.

Previously, some instruction and help texts were left-aligned when FA/AR was active.
The layout has now been updated to correctly apply RTL direction and right alignment.

Changes included:

• Updated helpmodal.ts to ensure help and instruction text renders with proper RTL layout
• Updated Utils.ts to improve RTL detection and apply consistent behavior for FA/AR
• Confirmed that EN and other LTR languages are unaffected

Testing:

• Tested with Persian and Arabic
• Percent symbols and numbers now display on the correct side
• Help modal content is fully right-aligned
• No regressions found in other UI sections

Please complete the following:

• I have added screenshots for all UI updates
• I process any text displayed to the user through translateText() and I've added it to the en.json file
• I have added relevant tests to the test directory
• I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced

Please put your Discord username so you can be contacted if a bug or regression is found:

nobodyiran

[coderabbitai]

Walkthrough

Pull request adds internationalization support for right-to-left (RTL) languages. Introduces utility functions to detect language and RTL status, applies RTL CSS classes to HelpModal components, and restructures the attack ratio display in ControlPanel to support flexible alignment.

Changes

Cohort / File(s)	Summary
RTL and language utility functions src/client/Utils.ts	Added getCurrentLanguage() to read current language from DOM and isRtlLanguage() to determine RTL status based on Arabic, Persian, or Hebrew language codes.
HelpModal RTL support src/client/HelpModal.ts	Integrated RTL detection by importing isRtlLanguage, computing RTL state in render, applying RTL-specific CSS class (.rtl-align) to wrapping div, and applying dynamic alignment class to tbody elements instead of fixed text-left.
ControlPanel attack ratio restructuring src/client/graphics/layers/ControlPanel.ts	Rewrote attack ratio display from plain label to span-based layout with inline-flex structure; removed translate="no" attribute and reorganized percentage and troop count presentation.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Verify RTL language detection logic correctly identifies Arabic (ar), Persian (fa), and Hebrew (he)
• Confirm CSS class application and RTL-specific styling does not break existing layouts
• Review DOM structure changes in ControlPanel for alignment and spacing correctness across language modes

Possibly related PRs

• Update Instructions and text in Build menu/Player panel #785 — Modifies HelpModal.ts for RTL detection and content structure adjustments
• Fix: Correct percentage (%) placement in Persian UI (RTL handling) #2501 — Updates ControlPanel.ts attack-ratio label structure to handle RTL alignment

Suggested labels

UI/UX

Suggested reviewers

• evanpelle

Poem

🌍 Right meets left, scripts dance and flow,
Languages bloom where text can go,
Arabic, Persian, Hebrew too,
Tables aligned for every view! ✨

Pre-merge checks

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing RTL alignment for Persian/Arabic instruction sections, which matches the core objective of the pull request.
Description check	✅ Passed	The description is directly related to the changeset, explaining RTL alignment fixes in detail with specific files modified, testing performed, and expected outcomes.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[MRGhust]

before

[MRGhust]

after

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/client/HelpModal.ts (2)

45-49: Consider using Tailwind's text-right directly.

The inline .rtl-align style applies text-align: right, but you're already using Tailwind's text-right class for tables. You could replace this custom CSS with Tailwind's text-right class on line 55 instead.

Apply this diff to use Tailwind exclusively:

-      <style>
-        .rtl-align {
-          text-align: right;
-        }
-      </style>
       <o-modal
         id="helpModal"
         title="Instructions"
         translationKey="main.instructions"
       >
-        <div class="${isRtl ? "rtl-align" : ""}">
+        <div class="${isRtl ? "text-right" : ""}">

---

55-67: Add dir="rtl" attribute for complete RTL support.

While text alignment is handled via CSS classes, the dir="rtl" attribute is important for proper bidirectional text rendering and affects element flow, margin/padding direction, and other browser behaviors beyond text alignment.

Apply this diff to add proper direction attribute:

-        <div class="${isRtl ? "rtl-align" : ""}">
+        <div class="${isRtl ? "rtl-align" : ""}" dir="${isRtl ? "rtl" : "ltr"}">

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9b125c8 and 01dda04.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (3)

• src/client/HelpModal.ts (3 hunks)
• src/client/Utils.ts (1 hunks)
• src/client/graphics/layers/ControlPanel.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: andrewNiziolek
Repo: openfrontio/OpenFrontIO PR: 1007
File: resources/lang/de.json:115-115
Timestamp: 2025-06-02T14:27:37.609Z
Learning: For OpenFrontIO project: When localization keys are renamed in language JSON files, the maintainers separate technical changes from translation content updates. They wait for community translators to update the actual translation values rather than attempting to translate in the same PR. This allows technical changes to proceed while ensuring accurate translations from native speakers.

Learnt from: TheGiraffe3
Repo: openfrontio/OpenFrontIO PR: 884
File: resources/lang/en.json:456-461
Timestamp: 2025-08-16T10:52:08.292Z
Learning: In OpenFrontIO, translation files in resources/lang/*.json (except en.json) should not be updated in regular PRs. Only dedicated translation PRs titled "mls" and made by Aotumori should update non-English locale files. Regular PRs should only update en.json when adding or modifying translation keys.

📚 Learning: 2025-07-23T12:36:35.354Z

Learnt from: Aotumuri
Repo: openfrontio/OpenFrontIO PR: 1534
File: src/client/LangSelector.ts:97-106
Timestamp: 2025-07-23T12:36:35.354Z
Learning: In OpenFrontIO's LangSelector.ts, the getClosestSupportedLang method always joins language code parts with underscores ("_") because all keys in the languageMap use underscore format (e.g., pt_BR, sv_SE, zh_CN). This normalization ensures consistency regardless of whether the input language code uses hyphens or underscores as delimiters.

Applied to files:

• src/client/Utils.ts

🧬 Code graph analysis (2)

src/client/HelpModal.ts (2)

src/client/Utils.ts (2)

• isRtlLanguage (164-167)
• translateText (92-147)

src/client/LangSelector.ts (1)

• translateText (258-278)

src/client/graphics/layers/ControlPanel.ts (1)

src/client/Utils.ts (2)

• translateText (92-147)
• renderTroops (15-17)

🔇 Additional comments (6)

src/client/graphics/layers/ControlPanel.ts (1)

193-208: LGTM! Proper handling of numbers in RTL contexts.

The use of dir="ltr" with unicode-bidi: isolate ensures numbers and percentage symbols display correctly in RTL languages. This follows web standards for mixed-direction content.

src/client/HelpModal.ts (3)

3-8: LGTM! Clean import structure.

---

40-42: LGTM! Clear RTL detection logic.

---

460-460: LGTM! Consistent alignment across table bodies.

src/client/Utils.ts (2)

149-157: LGTM! Clean utility following existing patterns.

The function correctly queries the DOM for the language selector and uses optional chaining for safe access. Returning null when unavailable is clear and idiomatic.

---

159-167: LGTM! Comprehensive RTL detection.

The function correctly identifies the three main RTL languages (Arabic, Farsi, Hebrew) and uses .startsWith() to handle language variants with either hyphen or underscore delimiters. The implementation is clean and well-documented.

[CLAassistant]

All committers have signed the CLA.