Skip to content

fix: RTL text layout support in web UI (issue #16875)#22088

Closed
uriva wants to merge 1 commit intoanomalyco:devfrom
uriva:fix/rtl-text-direction
Closed

fix: RTL text layout support in web UI (issue #16875)#22088
uriva wants to merge 1 commit intoanomalyco:devfrom
uriva:fix/rtl-text-direction

Conversation

@uriva
Copy link
Copy Markdown

@uriva uriva commented Apr 11, 2026

Summary

  • Converts hardcoded physical CSS properties to logical properties across 10 UI component files so that RTL layouts render correctly (padding-left → padding-inline-start, margin-left → margin-inline-start, text-align: left → text-align: start, border-left → border-inline-start, etc.)
  • Expands RTL locale detection beyond Arabic to include Hebrew (he), Persian/Farsi (fa), and Urdu (ur) in the console dir() function
  • Adds isRtl() export alongside dir() in the console language utility
  • Adds shared @opencode-ai/util/rtl module with a comprehensive RTL language detection utility for use across packages
  • Adds clarifying comments on direction: rtl CSS truncation-trick usages to distinguish them from actual RTL layout

Changes by file

File Change
packages/console/app/src/lib/language.ts Expand dir() to use RTL locale set; add isRtl() export
packages/util/src/rtl.ts New — shared RTL direction detection with full ISO 639 language coverage
packages/ui/src/components/markdown.css Lists, blockquotes, tables → logical properties
packages/ui/src/components/message-part.css User message alignment, padding, text-align → logical properties
packages/ui/src/components/card.css Card accent line and action padding → logical properties
packages/ui/src/components/message-nav.css Nav padding and alignment → logical properties
packages/ui/src/components/tool-error-card.css Content padding → logical properties
packages/ui/src/components/dialog.css Dialog description padding → logical properties
packages/ui/src/components/file.css Diff hunk padding/text-align → logical properties
packages/ui/src/components/session-turn.css Truncation-trick comment
packages/ui/src/components/session-review.css Truncation-trick comment

What this does NOT address

The TUI (terminal) layer uses OpenTUI which has zero RTL/Bidi support — all paddingLeft/paddingRight props, text alignment, and word-wrapping assume LTR. Proper TUI RTL support requires adding a Bidi algorithm to the OpenTUI Zig renderer, which is a separate effort.

Closes #16875
Related: #14257, #22076, #21676

- Convert hardcoded physical CSS properties to logical properties
  (padding-left → padding-inline-start, margin-left → margin-inline-start,
   text-align: left → text-align: start, border-left → border-inline-start)
- Expand RTL locale detection beyond Arabic to include Hebrew (he),
  Persian/Farsi (fa), and Urdu (ur)
- Add shared @opencode-ai/util/rtl module for RTL direction detection
- Add isRtl() export alongside dir() in console language utility
- Preserve direction:rtl truncation-trick comments for clarity

Fixes RTL text appearing wrongly indented and disconnected in the
web/console UI. TUI (terminal) layer still needs OpenTUI bidi support
(separate effort).
@github-actions github-actions Bot added the needs:compliance This means the issue will auto-close after 2 hours. label Apr 11, 2026
@github-actions
Copy link
Copy Markdown
Contributor

This PR doesn't fully meet our contributing guidelines and PR template.

What needs to be fixed:

  • PR description is missing required template sections. Please use the PR template.

Please edit this PR description to address the above within 2 hours, or it will be automatically closed.

If you believe this was flagged incorrectly, please let a maintainer know.

@github-actions
Copy link
Copy Markdown
Contributor

The following comment was made by an LLM, it may be inaccurate:

Potential duplicate found:

@github-actions
Copy link
Copy Markdown
Contributor

This pull request has been automatically closed because it was not updated to meet our contributing guidelines within the 2-hour window.

Feel free to open a new pull request that follows our guidelines.

@github-actions github-actions Bot removed the needs:compliance This means the issue will auto-close after 2 hours. label Apr 12, 2026
@github-actions github-actions Bot closed this Apr 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

RTL language support (Persian/Arabic) - characters appear reversed and disconnected

1 participant