feat(i18n): Add RTL (Right-to-Left) support for Arabic and other RTL languages #10908

Feature Request

Summary

Add comprehensive RTL (Right-to-Left) support for Arabic and other RTL languages (Hebrew, Persian, Urdu) to improve accessibility and usability for users in RTL-speaking regions.

Motivation

OpenCode already has Arabic translations (README.ar.md and Arabic locale in the app), but the UI doesn't properly handle RTL text direction. This makes the interface difficult to use for Arabic-speaking users as text alignment, layout, and reading flow are incorrect.

Proposed Solution

1. Add Arabic Font Support

• Include IBM Plex Sans Arabic font (Regular, Medium, SemiBold weights)
• Use unicode-range in @font-face to only load Arabic glyphs when needed
• Add --font-family-arabic CSS variable

2. Create RTL Stylesheet (rtl.css)

• Text direction and alignment rules for html[dir="rtl"]
• Preserve LTR for code blocks, file paths, URLs
• Icon flipping utilities for directional icons (arrows, etc.)
• Scrollbar positioning adjustments
• Form input RTL alignment
• Logical CSS properties (margin-inline-start, padding-inline-end, etc.)

3. Extend i18n Context

• Add isRTL accessor to detect RTL locale
• Add direction accessor returning "ltr" or "rtl"
• Auto-set document.documentElement.dir when locale changes

4. RTL Utility Classes

• .font-arabic - Explicitly use Arabic font
• .rtl-flip - Flip icons horizontally
• .preserve-ltr - Keep content LTR (for code)
• .text-start / .text-end - RTL-aware alignment
• .ms-auto / .me-auto - RTL-aware margins

RTL Languages to Support

Implementation Notes

I have a working implementation ready that includes:

• 3 IBM Plex Sans Arabic font files (~224KB total)
• fonts-arabic.css with optimized @font-face declarations
• rtl.css with comprehensive RTL styling
• Modified i18n.tsx with RTL detection helpers
• Modified language.tsx to auto-apply dir attribute
• RTL utility classes in utilities.css

Files Changed: 12 files, +357 lines

Screenshots

The implementation correctly renders Arabic text right-to-left while preserving LTR for code blocks:

┌─────────────────────────────────────────┐
│                          مرحبا بالعالم  │  <- Arabic text aligned right
│                                         │
│  console.log("Hello")                   │  <- Code stays LTR
│                                         │
│                      هذا نص عربي للاختبار │  <- More Arabic text
└─────────────────────────────────────────┘

Additional Context

• IBM Plex Sans Arabic is the Arabic companion to IBM Plex (already used in OpenCode)
• Uses unicode-range so fonts only load when Arabic characters are present
• No breaking changes - LTR languages work exactly as before
• Tested with standalone HTML and Vite dev server

Contribution

I'm happy to submit a PR with this implementation. Let me know if you'd like any changes to the approach!