Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Feature request: right-to-left (RTL) support for Arabic documents

オープン
  • 何か問題がありますか？
#2,295 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
45/100
issue の種類
機能追加
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
react, tailwindcss, typescript
領域
accessibility, frontend, internationalization

調査の方向性

Start in packages/ui/components/BlockRenderer.tsx, which the request names as the place to set a per-block dir; the same treatment is needed in BlockquoteBlock.tsx and TableBlock.tsx. Read the block prop shape there to see where block.content is available, then implement the RTL-vs-Latin counting rule from the issue and swap physical classes for logical ones (marginInlineStart, border-s-2 ps-4, text-start). Done means Arabic lists, blockquotes and tables flip in plan review while English output is byte-for-byte unchanged; there is no test named in the payload, so verify in the annotate and plan-review views.

索引モデルが issue の本文から書いたものです。

説明

What happens

Plans and documents written in Arabic (and other RTL languages) render left-to-right in annotate and plan review (plannotator 0.28.35, Windows, Claude Code):

  • Arabic paragraphs and headings are left-aligned, and their punctuation jumps to the wrong end of the line.
  • Bullets and numbers sit on the left of Arabic list items, and nested items indent from the left.
  • The blockquote rule is on the left side.
  • Table columns run left-to-right, and headers are forced left (text-left).
  • The table of contents in the left sidebar has the same problems.
  • Inline code inside an Arabic sentence (for example Use `POST /ingest` here written in Arabic) splits the surrounding punctuation.

Agent output in Arabic is common now. The plans we review are mostly Arabic with English identifiers and code mixed in, so this affects every review.

Why dir="auto" is not enough

dir="auto" picks the direction from the first strong character. In mixed documents many Arabic lines start with an English identifier or code, for example a list item that begins with `POST /ingest` and continues in Arabic. Those lines would wrongly come out LTR. Short English-only headings inside an Arabic document (for example "Jev" or "WebSocket") also read better when they follow the document's direction.

Proposed change

  1. A direction per block. For each block, take block.content, drop the inline code spans, and compare the count of RTL letters with Latin letters:

    • The block is rtl when RTL letters are at least half the Latin count.
    • The block is ltr when it has only Latin text and at least about 30 letters.
    • Otherwise it follows the document's majority direction.

    Set the result as a dir attribute on the block root in packages/ui/components/BlockRenderer.tsx (headings, paragraphs, list items), BlockquoteBlock.tsx and TableBlock.tsx. Then lists, tables and alignment follow from the browser's own bidi handling.

  2. Logical properties instead of physical ones (Tailwind 4 supports them):

    • list indent style={{ marginLeft }} becomes marginInlineStart;
    • blockquote border-l-2 pl-4 becomes border-s-2 ps-4;
    • table headers text-left become text-start.

  3. Code stays LTR. Code blocks get dir="ltr", and inline code gets unicode-bidi: isolate so punctuation around it stays in place.

  4. Comments. The comment textarea gets dir="auto", and the TOC entries use the same direction as their heading.

No text changes, so annotation offsets and quotes are unaffected. It also adds no setting: English documents keep rendering exactly as they do today.

Optional: a textDirection: "auto" | "ltr" | "rtl" setting for people who want to force one.

Workaround in the meantime

I'm using a small userscript that applies the same idea from outside: it sets dir per [data-block-id] and adds a few CSS overrides. It works, but it relies on internal class names and inline styles, so it breaks whenever the markup changes. A built-in fix would be much more robust.

I'm happy to open a PR along these lines if this direction works for you.

主要言語
TypeScript
スター
8.7k
フォーク
649
平均マージ
6時間
マージ済み PR（30日）
514

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

backnotprop/plannotator のほかの issue

backnotprop/plannotator の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。