Problem
When Claude Code responds with Arabic text (or any RTL language) mixed with English in the VS Code extension, the text renders in wrong order — words appear jumbled and unreadable.
The user's input text in the chat renders correctly (proper RTL flow).
Claude's output text in the chat renders incorrectly (wrong word ordering).
This happens because the output container uses LTR direction by default, and the Unicode Bidirectional Algorithm cannot properly handle the mixed text without an RTL base direction.
Screenshots
Example of broken rendering — Arabic + English on the same line shows words in wrong order, making the text unreadable.
Expected Behavior
Mixed Arabic/English text should render with proper RTL flow:
- Arabic words read right-to-left
- English segments read left-to-right within the RTL flow
- Overall line flows right-to-left (word closest to the right is read first)
Proposed Fix
Add dir="auto" to the chat message output container element:
<div dir="auto">{{ message content }}</div>dir="auto" lets the browser detect the text direction automatically based on the first strong directional character. This is a one-line fix that:
- Correctly renders RTL languages (Arabic, Hebrew, Persian, Urdu)
- Does not affect existing LTR (English) rendering
- Is the W3C recommended approach for user-generated content
Workarounds Attempted
- Unicode RLM markers (U+200F): The extension escapes them and shows literal
\u200F text
- Separation approach: Writing Arabic and English on separate lines works but is awkward and unnatural
Environment
- VS Code (Windsurf/Antigravity fork) on Windows 11
- Claude Code extension v2.1.81
- Language: Arabic (RTL)
Problem
When Claude Code responds with Arabic text (or any RTL language) mixed with English in the VS Code extension, the text renders in wrong order — words appear jumbled and unreadable.
The user's input text in the chat renders correctly (proper RTL flow).
Claude's output text in the chat renders incorrectly (wrong word ordering).
This happens because the output container uses LTR direction by default, and the Unicode Bidirectional Algorithm cannot properly handle the mixed text without an RTL base direction.
Screenshots
Example of broken rendering — Arabic + English on the same line shows words in wrong order, making the text unreadable.
Expected Behavior
Mixed Arabic/English text should render with proper RTL flow:
Proposed Fix
Add
dir="auto"to the chat message output container element:dir="auto"lets the browser detect the text direction automatically based on the first strong directional character. This is a one-line fix that:Workarounds Attempted
\u200FtextEnvironment