desktop: nested markdown blocks (li, td, blockquote p) render LTR when message dir=auto resolves LTR #54471

Activity

1. opencode-agent commented on Oct 11, 2026

   

   opencode-agentBot

   on Oct 11, 2026 – with OpenCode Agent

   Contributor

   More actions

   Thanks for the detailed report. I was able to reproduce this.

   I loaded the shipped markdown.css from v2.0.22 into headless Chromium and rendered the same <div data-component="markdown" dir="auto"> markup the Markdown component produces, using your example: an English heading and inline code first, then Persian text in a paragraph, a list, a blockquote and a table. I didn't run the packaged desktop app itself.

   • The top-level Persian <p> has unicode-bidi: plaintext and lays out right-to-left.
   • <li>, <blockquote> > p, <th> and <td> keep unicode-bidi: isolate, inherit direction: ltr from the container and lay out left-to-right.

   The result is the same on the latest dev (e31136bd): the stylesheet still applies plaintext only to direct children. With the nested-block rule you suggested added, all of those blocks lay out right-to-left.

   The script below reproduces it, and the screenshot shows the result on v2.0.22.

   

   Reproduction script (repro.ts)

   // Reproduces #54471: nested markdown blocks (li, td, th, blockquote>p) lay out LTR
   // when the markdown container's dir="auto" resolves to LTR.
   // Loads the real packages/session-ui/src/components/markdown.css from a git ref
   // (default v2.0.22; pass another ref, e.g. refs/remotes/default, as argv[2]) into
   // headless Chromium with the DOM the Markdown component renders
   // (<div data-component="markdown" dir="auto">), then measures each block.
   // Usage: bun repro.ts [gitRef]   (needs: bun add playwright && bunx playwright install chromium)
   import { chromium } from "playwright"
   import { execSync } from "node:child_process"
   
   const ref = process.argv[2] ?? "v2.0.22"
   const repo = process.env.REPO ?? "/workspace/repo"
   const css = execSync(`git -C ${repo} show ${ref}:packages/session-ui/src/components/markdown.css`).toString()
   
   const html = `<!doctype html><html><head><meta charset="utf-8"><style>${css}
   body{font-family:sans-serif;width:700px} td,th{border:1px solid #999;width:300px}</style></head><body>
   <div data-component="markdown" dir="auto">
   <h2>Project setup</h2>
   <p>Run <code>npm install</code> first, then:</p>
   <p id="p">این یک پاراگراف فارسی در سطح بالا است.</p>
   <ul><li id="li">گام اول: دانلود ابزار از سایت رسمی</li><li>گام دوم: اجرای دستور نصب و بررسی نسخه</li></ul>
   <blockquote><p id="bq">توجه: این مرحله را حتماً قبل از اجرا انجام دهید.</p></blockquote>
   <table><thead><tr><th id="th">نام</th><th>مقدار</th></tr></thead><tbody><tr><td id="td">نسخه</td><td>2.0.22</td></tr></tbody></table>
   </div></body></html>`
   
   const browser = await chromium.launch()
   const page = await browser.newPage()
   await page.setContent(html)
   const rows = await page.evaluate(() =>
     ["p", "li", "bq", "th", "td"].map((id) => {
       const el = document.getElementById(id)!
       const cs = getComputedStyle(el)
       const box = el.getBoundingClientRect()
       const r = document.createRange()
       const t = el.firstChild!
       r.setStart(t, 0)
       r.setEnd(t, 1)
       const c = r.getBoundingClientRect()
       // first logical character sits at the right edge => RTL paragraph
       const start = box.right - c.right < c.left - box.left ? "right (RTL)" : "left (LTR)"
       return { id, unicodeBidi: cs.unicodeBidi, direction: cs.direction, firstCharStart: start }
     }),
   )
   console.log(`ref=${ref}`)
   console.table(rows)
   await page.screenshot({ path: `/workspace/repro/markdown-${ref.replace(/\W+/g, "_")}.png`, fullPage: true })
   await browser.close()
   const bad = rows.filter((r) => r.id !== "p" && r.firstCharStart.startsWith("left"))
   console.log(bad.length ? `BUG: nested RTL blocks laid out LTR: ${bad.map((r) => r.id).join(", ")}` : "OK")

   Run it: bun repro.ts
2. opencode-agent

   added

   reproduced

   on Oct 11, 2026
3. argszero commented on Oct 11, 2026

   

   argszero

   on Oct 11, 2026

   Contributor

   More actions

   I'd like to work on this.

   Confirmed the cause on the current dev: the rule in packages/session-ui/src/components/markdown.css is

   [data-component="markdown"] > * {
     unicode-bidi: plaintext;
   }

   so only the container's direct children resolve a direction from their own first strong character. <li>, <td>, <th> and <p> inside <blockquote> keep the UA default unicode-bidi: isolate and inherit whatever the container's dir="auto" resolved to, which is why the scramble only shows up when the reply starts with Latin text (a heading or inline code).

   Plan: extend the plaintext rule to nested block-level elements, keeping code blocks ([data-component="markdown-code"], :not(pre) > code) and Mermaid diagrams explicitly isolated and LTR, and cover it with a component test that measures the computed unicode-bidi on those nested elements so it fails on the unmodified stylesheet.
4. argszero commented on Oct 11, 2026

   

   argszero

   on Oct 11, 2026

   Contributor

   More actions

   Opened #54636 for this.

   markdown.css extended unicode-bidi: plaintext only to the direct children of the markdown container ([data-component="markdown"] > *), and unicode-bidi does not inherit, so nested blocks (li, td, th, a p inside a blockquote) kept the browser default and inherited the container's dir="auto" direction. The PR extends the plaintext rule to the set the UA stylesheet isolates, in a low-specificity :where() list, and leaves div out so code blocks and Mermaid diagrams keep direction: ltr; unicode-bidi: isolate. component-tests/markdown.spec.ts covers the nested case and the code-block exclusion.
5. neriousy

   marked [FEATURE]: Add RTL (Right-to-Left) language support in the chat panel #26915 as a duplicate of this issue on Nov 12, 2026