anomalyco/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-07-23 02:36:57 -04:00
Code Issues 5.9k Packages Projects Releases 19 Wiki Activity

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

New Issue
Open
opened 2026-02-16 18:08:12 -05:00 by yindo · 1 comment
yindo commented 2026-02-16 18:08:12 -05:00
Owner
Copy Link
Copy Source

Originally created by @amrpyt on GitHub (Jan 27, 2026).

Originally assigned to: @thdxr on GitHub.

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

Locale Language
ar Arabic
he Hebrew
fa Persian (Farsi)
ur Urdu

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!

Originally created by @amrpyt on GitHub (Jan 27, 2026). Originally assigned to: @thdxr on GitHub. ## 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 | Locale | Language | |--------|----------| | `ar` | Arabic | | `he` | Hebrew | | `fa` | Persian (Farsi) | | `ur` | Urdu | ### 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!
yindo added the docs label 2026-02-16 18:08:12 -05:00
yindo commented 2026-02-16 18:08:12 -05:00
Author
Owner
Copy Link
Copy Source

@github-actions[bot] commented on GitHub (Jan 27, 2026):

This issue might be a duplicate of existing issues. Please check:

  • #6284: [FEATURE]: Support for RTL languages - Requests RTL support for Arabic and other RTL languages with character reversal fixes
  • #9255: [FEATURE]:RTL support! - Another RTL Arabic support request for both CLI and Desktop versions
  • #9948: [FEATURE]: Add Arabic Language Support to the Desktop App - Closed issue requesting Arabic localization and language support

Feel free to ignore if your implementation addresses aspects not covered in these issues.

@github-actions[bot] commented on GitHub (Jan 27, 2026): This issue might be a duplicate of existing issues. Please check: - #6284: [FEATURE]: Support for RTL languages - Requests RTL support for Arabic and other RTL languages with character reversal fixes - #9255: [FEATURE]:RTL support! - Another RTL Arabic support request for both CLI and Desktop versions - #9948: [FEATURE]: Add Arabic Language Support to the Desktop App - Closed issue requesting Arabic localization and language support Feel free to ignore if your implementation addresses aspects not covered in these issues.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
acp
bad
bug
discussion
docs
documentation
enhancement
extension
good first issue
growth
help-wanted
mcp
model-problem
needs:compliance
nix
opentui
perf
pull-request
Mirrored from GitHub Pull Request
 tui
web
windows
zen
No Label docs
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#7781
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?