Chat panel doesn't render RTL text (Persian/Arabic/Hebrew) correctly

Open 💬 1 comment Opened Jul 7, 2026 by mhbesharatnia

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

  1. Open Claude Code in VSCode.
  2. Ask Claude a question in Persian (or any RTL language), e.g. سلام چطوری؟
  3. 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)

View original on GitHub ↗

This issue has 1 comment on GitHub. Read the full discussion on GitHub ↗