jubyuhanna-create/arabic-ready

Arabic-ready output（アラビア語対応出力）

目標: アラビア語が最初から正しく表示・読み取れ、ネイティブな感覚で出力されること。あらゆる出力形式で。

1. 何かを書き始める前に3つのことを決定する

決定事項	デフォルト	変更する場合
対象ユーザーのロケール	ar + 地域が既知なら地域も（ar-SA、ar-EG、ar-AE、ar-MA...）	ユーザーが国/都市/市場を指定した場合
数字	UI、価格、電話番号、コード、チャートでは欧文数字0-9。エジプト、サウジアラビア、イラク、レバント、スーダン、イエメンを対象としたフォーマル/編集用テキストではアラビア・インド数字٠-٩	ユーザーが要求した場合、またはブランド/地域が明確に٠-٩を使用している場合。マグリブ（MA/DZ/TN）では常に0-9を使用
文体	現代標準アラビア語（フスハー）、明確で現代的、古典的ではない	ユーザーが方言（エジプト方言、湾岸方言、レバント方言...）を要求した場合、またはチャネルがカジュアル（WhatsAppプロモ、SNS投稿）の場合：references/writing.mdを参照

1つの出力で数字体系を混在させないこと。

2. 基本ルール（すべての出力タイプに適用）

1. ルートで1度だけ方向を宣言する。 その後はすべてが継承されるようにする。 ❌ <html> + 要素にstyle="direction:rtl"を散布 ✅ <html lang="ar" dir="rtl"> · docx <w:bidi/> + <w:rtl/> · pptx rtl="1" · Flutter Directionality(textDirection: TextDirection.rtl) / locale: Locale('ar')
2. 論理方向を使用し、left/rightは使わない。 アラビア語では「開始」は右側。 ❌ margin-left、ml-4、text-left、left: 0、EdgeInsets.only(left:) ✅ margin-inline-start、ms-4、text-start、inset-inline-start: 0、EdgeInsetsDirectional.only(start:)
3. LTRの孤立要素（電話番号、メールアドレス、URL、コード、数字に隣接する英語の名前、負の数）を分離する。 ❌ اتصل على +966 50 123 4567. → 4567 123 50 966+と表示される ✅ اتصل على <bdi dir="ltr">+966 50 123 4567</bdi>. · プレーンテキスト：LRI…PDI（⁦…⁩）で囲むか、-5の前にLRM ‎を置く
4. 電話番号、メール、URL、コード、IBAN、パスワードの入力フィールドは、RTLフォーム内でもdir="ltr"のままにする（text-endで配置）。
5. 方向性のあるアイコンのみを反転する。 戻る/進む矢印、シェブロン、送信、返信、元に戻す/やり直し、進行方向は反転。再生/一時停止、メディアコントロール、チェックマーク、時計、検索、ロゴ、ブランドマーク、数字は反転しない。
6. タイポグラフィ： アラビア語用にデザインされたフォントを使用し（リストはreferences/typography.md）、本文の行間は1.6以上にし、タシュキールのための上下のスペースを確保する。アラビア語にletter-spacing/tracking-*、uppercase、italic、または狭いoverflow:hiddenの高さを決して適用しない。
7. 文字整形：生のテキストは整形レンダラーに、整形済みテキストはそれ以外に。両方を混在させない。 ブラウザ、Word、LibreOffice、PowerPoint、WeasyPrint、Chromium PDF、matplotlib ≥ 3.11、libraqmを使用したPillow、fpdf2（set_text_shaping()使用） はアラビア語を自動整形する：生の文字列を渡す。 reportlab、PyMuPDF insert_text、OpenCV、matplotlib ≤ 3.10、raqmなしのPillowはグリフ単位で描画する：scripts/shape_text.pyからprepare(text)を渡す。 すでに整形するレンダラーに対してテキストを再整形すると、再び逆に戻ってしまう（matplotlib 3.11とPillow+raqmで確認済み）。
8. アラビア語の句読点： ،（コンマ）、؛（セミコロン）、؟（疑問符）、«»（引用符）を使用する。.と!はそのまま維持する。句読点の前にスペースを入れず、後に1つスペースを入れる。
9. アラビア語をネイティブに書く。逐語訳しない。 ボタンには命令形動詞（أرسل「送信」、احفظ「保存」、ابدأ الآن「今すぐ始める」）を使用し、英語の語順を使わない。references/writing.mdを参照。
10. 数字/日付/通貨は文字列連結ではなく、ロケールを使用してフォーマットする。 Intl.NumberFormat('ar-SA', ...) / Intl.DateTimeFormat('ar-EG-u-nu-latn', ...)を使用し、常にnu（数字）とca（暦）を明示的に設定する。

3. 出力タイプに応じたリファレンスを読み込む

タスクに必要なものだけを読む：

出力	読むもの
HTML、CSS、Tailwind、React、Next.js、Vue、React Native、Flutter、メールHTML	references/web.md + references/bidi.md
アラビア語 + 英語/数字の混在（マークダウン、プレーンテキスト、SMS、JSON文字列を含む）	references/bidi.md
フォント、行間、タシュキール、ウェイト、両端揃え	references/typography.md
Word（.docx）、PowerPoint（.pptx）、PDF	references/documents.md
matplotlib、Pillow、SVG、canvas、OpenCV、Plotly、テキストを含む画像	references/charts-images.md
コピーライティング、翻訳、方言、数字、日付、通貨、名前、ヒジュラ暦	references/writing.md

4. RTLで反転するものとしないもの

反転するもの（レイアウトをミラーリング）	変わらないもの
読み方向、テキスト配置、ナビゲーション順序、サイドバーの位置	電話番号、クレジットカード番号、IBAN（常にLTR）
パンくずリスト、ページネーション、ステッパー：「次へ」は左を指す。テキストの› > (は自動的に反転するが、→やSVGアイコンは反転しない	コードブロック、ターミナル出力、URL、メールアドレス
戻る/次へ矢印、シェブロン、カルーセル/スライダーのスワイプ方向	時系列チャートのx軸（時間は左→右に進む）。カテゴリ軸は反転する場合がある
テーブルの列順序（最初の列が右側）	メディアコントロール（再生▶、早送り）、時計、チェックマーク
プログレスバーとレンジスライダーは右から満たされる	ロゴ、ブランドマーク、写真、地図
フォームラベルは右側、ダイアログの閉じるボタン×は左側	数式と数字自体（1,234.5は1,234.5のまま）
トースト/ドロワーのスライドイン方向、アバターのバッジ、リストの箇条書き	キーボードショートカット（Ctrl+S）

5. 終了前に行うこと

1. リンターを実行する 生成したコードに対して（Python標準ライブラリのみ必要）： python <skill-dir>/scripts/rtl_check.py <file-or-folder> すべてのerrorを修正する。warningは意図的なものでない限り修正し、意図的なものにはrtl-okコメントを付ける。
2. 可能な場合はレンダリングして確認する。その後、文字が連結されていること、最初の単語が右側にあること、句読点が左端にあること、数字が正しい順序で読めることを確認する：
   • HTML：python -m playwright screenshot --full-page file://$PWD/index.html shot.png（またはnpx playwright screenshot …）。ブラウザがない場合は、weasyprint index.html out.pdfで静的レンダリングを取得。
   • docx/pptx：soffice --headless --convert-to pdf file.docx、その後PDFをラスタライズ。
   • PDF → PNG：python -c "import pymupdf; pymupdf.open('f.pdf')[0].get_pixmap(dpi=110).save('f.png')"
   • 画像/チャート：書き出したPNGを開く。
3. スクリプトが実行できない場合（Pythonなし、シェルなし）、以下のチェックリストを手動で確認する：
   • ルートのdir="rtl" + lang="ar…"（または該当フォーマットの同等のもの）
   • スペーシング、配置、整列にleft/rightを使用していない
   • 電話番号/メール/URL/コードが分離され、LTRになっている
   • 方向性アイコンは反転、その他はそのまま
   • アラビア語フォントが読み込まれ、行間が1.6以上、letter-spacing、italic、uppercaseがない
   • 画像/PDFテキスト：整形パスがレンダラーと一致している（ルール7）
   • ، ؛ ؟が使用され、数字体系は1つ、自然なMSA（または要求された方言）

スクリプト

• scripts/rtl_check.py <path>：HTML/CSS/Tailwind/JSX/TSX/Vue/Svelte/React Native/FlutterのRTLバグをチェックするリンター。file:line、問題、正確な修正方法を出力する。エラーがある場合、終了コード1。標準ライブラリのみ。
• scripts/shape_text.py：prepare(text, target) - アラビア語を整形しないレンダラー向け。matplotlib/Pillowのネイティブサポートを検出し、整形不要な場合はテキストをそのまま返す。arabic-reshaper + python-bidi（必要に応じてpipインストール）を使用するか、組み込みの標準ライブラリシェーパーにフォールバックする。python shape_text.py --checkでこのマシンに必要なものを報告する。