fix(web): add bidirectional text support for RTL languages#2128
fix(web): add bidirectional text support for RTL languages#2128darkyeg wants to merge 6 commits intopingdotgg:mainfrom
Conversation
Chat messages with RTL languages (Arabic, Hebrew, Persian) rendered incorrectly because the browser defaulted to LTR with no direction hints, causing text and punctuation to appear in the wrong order. Apply dir="auto" and unicode-bidi: plaintext so each line and block element detects its base direction from its first strong character. Code blocks and tables are isolated as LTR to preserve their layout.
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
github-actions
bot
added
vouch:unvouched
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Replace padding-left and border-left with padding-inline-start and border-inline-start on lists and blockquotes so they flip correctly in RTL. Use text-align: start instead of left on table cells. Replace data-testid selector with a dedicated class for the composer bidi rule.
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
ApprovabilityVerdict: Approved Purely presentational changes adding RTL language support via standard HTML You can customize Macroscope's approvability policy. Learn more. |
Card inherits direction from header language via dir="auto", question text and option labels/descriptions each resolve their own direction independently. Uses logical CSS properties (text-start, gap-x-2) instead of physical ones for correct RTL layout.
Add dir="auto" to thread title rendering in header, sidebar, and settings archive. Add bidi support to plan sidebar (explanation, steps, plan title) and proposed plan card/banner. Use text-start logical property in plan sidebar expand button.
macroscopeapp
bot
dismissed
their stale review
Dismissing prior approval to re-evaluate e2f066b
darkyeg
changed the title
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit e2f066b. Configure here.
…lements only Remove dir="auto" from the outer question panel wrapper to avoid reversing flex layouts for shortcut keys and status indicators. The inner text elements (question, labels, descriptions) already have their own dir="auto" which handles text direction correctly. Also includes formatting fixes from bun fmt.
github-actions
bot
added
size:L
1 participant
What Changed
composer, question panels, thread titles, plan sidebar, and
plan cards
properties (text-start, gap-x, border-inline-start)
Why
RTL text like Arabic and Hebrew was unreadable when mixed with
English. Punctuation jumping around, words in wrong order.
dir="auto" lets the browser figure out direction per element
from the first strong character, which is the standard fix for this.
Addresses #1771
UI Changes
Before
before.mp4
After
after.mp4
Checklist
Note
Low Risk
Primarily presentational changes (
dirattributes and CSS logical properties) with minimal behavioral impact; main risk is small layout/regression in text alignment or markdown rendering.Overview
Improves RTL/mixed-direction readability across the chat UI by adding
dir="auto"to key text containers (chat markdown, user messages, composer editor, thread/plan titles, and plan/question panels) so browsers auto-detect direction per element.Updates global styles to better handle bidirectional content via
unicode-bidi: plaintext, switches several left/right-specific rules to logical properties (padding-inline-start,border-inline-start,text-align: start,text-start), and explicitly keepspre/code/tablecontent LTR to avoid flipped code/table rendering.Reviewed by Cursor Bugbot for commit d1fd51c. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
[!NOTE]
Add bidirectional text support for RTL languages across chat and sidebar components
dir="auto"to user message text, chat markdown, composer input, thread titles, plan titles, and archived thread headings so browsers auto-detect RTL/LTR direction per element.unicode-bidi: plaintextfor paragraph-level direction detection and logical CSS properties (padding-inline-start,border-inline-start,text-align: start) to respect RTL layouts.pre/code/tableblocks inside chat markdown to preserve code readability.text-leftwithtext-starton option and plan buttons so alignment is logical in both LTR and RTL contexts.Macroscope summarized d1fd51c.