Chat panel doesn't render RTL text (Persian/Arabic/Hebrew) correctly
Chat panel doesn't render RTL text (Persian/Arabic/Hebrew) correctly — direction detection needed
Description
When conversing with Claude in a right-to-left (RTL) language (tested with Persian/Farsi), the response text in the VSCode extension's chat webview is always rendered left-to-right (LTR), regardless of the actual text direction. This makes reading multi-line RTL responses difficult — line wrapping, punctuation, and numbers all end up in the wrong visual order.
This affects the VSCode native extension (anthropic.claude-code), tested on version 2.1.202 (darwin-arm64), but likely affects all versions since the underlying webview CSS has no bidi handling.
Steps to reproduce
- Open Claude Code in VSCode.
- Ask Claude a question in Persian (or any RTL language), e.g.
سلام چطوری؟ - Observe the model's Persian response is rendered LTR instead of RTL — text alignment, line-wrapping, and character ordering look wrong and are hard to read.
Expected behavior
Text direction should be automatically detected per paragraph/block, similar to how most modern chat apps (WhatsApp Web, Twitter/X, Gmail) handle mixed LTR/RTL content — i.e., a paragraph starting with a "strong" RTL character (Persian/Arabic/Hebrew) should render right-aligned and RTL, while LTR content (English, code) is unaffected.
Root cause / suggested fix
The webview UI (webview/index.css + webview/index.js inside the extension package) has no direction or unicode-bidi handling on text-rendering elements (message content, markdown blocks, etc.).
The standard CSS fix for this exact problem is unicode-bidi: plaintext, which tells the browser's bidi algorithm to determine paragraph direction based on the first strong-directional character in each block element, rather than assuming a fixed direction. This requires no language detection logic — it's purely a CSS property and is safe to apply broadly (LTR/English content is unaffected).
As a local test, I applied the following patch directly to the installed extension's webview/index.css and confirmed it fixes the issue after a Developer: Reload Window:
p, li, span, div, td, th, blockquote, h1, h2, h3, h4, h5, h6, textarea, input {
unicode-bidi: plaintext !important;
}
This single rule made Persian responses render correctly RTL (right-aligned, correct line/word order) without affecting English text or code blocks.
Suggested action
Consider adding unicode-bidi: plaintext (or an equivalent scoped rule targeting the markdown/message-rendering containers specifically, for a lighter-touch fix) to the chat message rendering styles in the webview bundle. This would fix RTL rendering for Persian, Arabic, Hebrew, and other RTL-script users without requiring any per-message language detection.
Environment
- Claude Code VSCode extension version: 2.1.202 (darwin-arm64)
- OS: macOS (Darwin 25.5.0)
- VSCode (native extension host)
This issue has 1 comment on GitHub. Read the full discussion on GitHub ↗