RTLサポート
1）原則
1.RTLはテキストの翻訳ではなく、思考のミラーリングです。軸、読み取り順序、フォーカスオーダー、ジェスチャー、ナビゲーションの変更。
2.左/右の代わりに論理CSSプロパティ。'margin-inline-start'、 'inset-inline-end'、' border-start-radius'などに移動します。
3.グローバルに方向をオンにし、局所的にLTRフラグメントを分離します。数字、URL、コード、電子メール、IBANは常に左から右に読み込まれます。
4.意味ではなく、方向に依存するものを鏡。「再生」「、↗」「、↙」とクロック/プロセスアイコンがミラーリングされない場合があります。
5.疑似RTLをテストします。'dir=「rtl「'/'方向：rtl'と擬似翻訳を含めて終了します。
2）方向： 'dir'およびbooleanプロパティ
ドキュメント/ルート上でグローバルに：html
<html lang="ar" dir="rtl"> … </html>css
.card { padding-inline: 16px; margin-inline: 12px; }
.sidebar { inset-inline-start: 0; }
.button { border-start-start-radius: 12px; border-end-end-radius: 12px; }css
:root:dir(rtl). breadcrumb { flex-direction: row-reverse; }
:root:dir(ltr). breadcrumb { flex-direction: row; }html
<p dir="auto">…</p>3） BiDiおよび混合されたテキスト分離
アラビア語/ヘブライ語とラテン語/数字を混合すると、文字の順序が決まります。BiDiの分離を使用して下さい：- タグ：''（方向を分離します）、''（力を上書きします）。
- '\u2066 'LRI/'\u2067' RLI-LTR/RTL絶縁の開始、'\u2069 'PDI-終了、
- '\u200E 'LRM/'\u200F' RLM-短い挿入用のシングルバイトトークン。
html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>4）ナビゲーション、階層、レイアウト
ブレッドクラム： ミラーオーダー：「الصفحة الرئيسية」 الرهان 「التأكيد」
パネル/メニュー：メインナブバー-右側；「back」は左（RTL行の先頭）を指します。
カード/リスト：ヘッダーをインラインスタートに整列します。ステータスアイコン-インラインエンド。
カルーセルとスワイプ：インラインスタートに向かってスクロールします（RTL-右）。ページインジケータもミラーリングされます。
ペジネーション：矢印「next」はインラインスタート、「previous」-インラインエンドに移動します。
5）アイコンと画像
方向アイコンをミラー：矢印、「forward/backward」、再生ヘッド、「expand/collapse」。
ミラーしないでください：テキストのアイコン、グラフ、時間（リアルタイム矢印がある場合）、ブランドロゴ。
css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }SVGの場合：'transform-box： view-box；'を使用します。「浮遊」を避けるために。
イメージ内のテキストを避け、別のレイヤーでローカライズします。
6）フォームと入力
コンテンツアライメント：text-align： start；'textフィールド、数値/量/URL/電子メール-LTR。
属性：html
<input type="email" dir="ltr" inputmode="email" autocomplete="email">
<input type="number" dir="ltr" inputmode="numeric" pattern="[0-9]">
<input type="tel" dir="ltr" inputmode="tel" autocomplete="tel">プレースホルダー/ラベルはローカライズされていますが、数字/コードのキャレットは左から右に移動する必要があります。
マスク：「傍受」厳しく世話をしないでください。挿入および選択を支えて下さい。
リスト/ラジオ/チェックボックス：コントロールの右側にある署名、44 × 44 px ≥領域をクリックします。
min→maxスライダー：RTLでは、少なくとも右端、最大で左端（または反転とLTR番号のないスケールを表示）。
7）数字、日付、通貨
デフォルトでは、アラビア語のロケールはアラビア語-インド球形（٠١٢٣٤٥٦٧٨٩）を使用します。ソリューション-ビジネスポリシー：- 金融UIでは、相互運用性のためにラテン数字（0-9）が表示されることが多いが、フォーマット（スペース/記号）はロケールである。
js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000);
new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());相対時間（'Intl。RelativeTimeFormat'）、方向区切り文字、およびローカルの日/月の略語。
8）タイポグラフィと読みやすさ
良いアラビア語/ヘブライ語のグラフェムと合字（アラビア語形成）を持つフォント。
線の間隔1。4–1.6;狭い追跡を避けて下さい。
アラビア語では、幅を揃えるときにkashida（ロングストローク）が許可されます-慎重にオンにします（'text-justify： inter-word；'/engineサポート）。
アラビア語のライン内のラテン語のイタリック体を禁止します（垂直のリズムを台無しにします）。
9）グラフ、スケール、テーブル
X軸は右から左に移動します。凡例はインラインエンドに整列されます。
テーブル列：「プライマリ」列（名前/ゲーム）-右；数値/金額はLTRのままで、インラインエンドに整列できます。
html
<bdi dir="ltr">+12. 5%</bdi>10） A11yおよびスクリーンリーダー
'lang=「ar「'/'lang=」he」が露出していることを確認してください。TTSエンジンは正しい音声演技を選択します。
慎重に方向の健全な動的変化-不必要にフラグメントの'dir'を切り替えないでください。
ライブアップデート（'aria-live=「polite」）-指示をミックスせずにテキスト。
アイコンはテキストラベルなしで意味を伝えません。'aria-label'を使用します。
11） iGamingの詳細
11.1ベットクーポン（betslip）
フィールド順序：量→比率→潜在的な利益；右の署名、LTRの数/要因。
係数を穏やかに更新して下さい；上矢印/下矢印をミラーする必要はありません（価格方向の意味は普遍的です）。
11.2マッチ/マーケット
リーグ/イベントのリストをインラインスタート（RTL-右側）で整列します。
タイマーとカウント-LTR 'dir=「ltr」（'font-variant-numeric： tabular-nums；').
11.3支払い/ACC
IBAN/BIC/電話フィールドは常にLTRです。
銀行名/住所-RTL。
エラー/バリデータは右側にマーカーを表示します。
11.4トーナメント/リーダーボード
列：位置、ニックネーム、メガネ-右の位置；メガネをインラインエンド（LTR桁）に整列させます。
12）製造業およびテスト
乙女の擬似RTL：css html. debug-rtl { direction: rtl; }css html:dir(rtl). icon-dir { transform: scaleX(-1); }- 'dir=rtl'のスナップショットをレイアウトします。
- CSS （lint）に'left/right'がないかチェックします。
- E2E：タブオーダー、カルーセルスワイプ、スライダー動作。
- アラビアテキスト+LTRインサート（電子メール、合計）によるビジュアルテスト。
13）システムトークンの設計（例）
json
{
"direction": {
"supported": ["ltr", "rtl"],
"rtlLocales": ["ar", "he", "fa", "ur"]
},
"layout": {
"gap": { "sm": 8, "md": 12, "lg": 16 },
"useLogicalProps": true
},
"icons": {
"autoMirror": true,
"exclude": ["logo", "chart", "clock", "play"]
},
"forms": {
"numericDir": "ltr",
"minTap": 44
},
"a11y": { "contrastAA": true, "live": "polite" }
}14）スニペット
アプリケーションの方向を切り替えるには（React）：tsx import { useEffect } from "react";
export function useDirection(locale: string) {
useEffect(() => {
const lang = locale. split("-")[0];
const isRTL = ["ar", "he", "fa", "ur"].includes(lang);
const html = document. documentElement;
html. setAttribute("dir", isRTL? "rtl": "ltr");
html. setAttribute("lang", locale);
}, [locale]);
}css
.breadcrumb { display:flex; gap:8px; }
html:dir(rtl). breadcrumb { flex-direction: row-reverse; }
.breadcrumb__sep { transform: scaleX(var(--dir,1)); }
html:dir(rtl). breadcrumb__sep { --dir: -1; }html
<span>الربح المحتمل: <bdi dir="ltr">2,000. 00 UAH</bdi></span>css html:dir(rtl) input[type="range"] { direction: rtl; }15） Antipatterns
Hard 'left/right' in→stylesはRTLを壊します。
'dir="ltr""→"broken"キャレットとオーダーなしで数字/IBAN/URLを入力します。
ロゴ/チャート/時間をミラーリングします。
同じアイコンのセットは常にミラーします-例外なく意味します。
カルーセル、リーフレット、ペジネーションは逆さまではありません。
BiDi分離→「ダンス」文字なしの混合文字列。
16）メトリクス
RTLカバレッジ：RTLレビューを受けたスクリーンの割合。
BiDiの欠陥/リリース：混合テキストのバグの数。
調達期間（LTRとRTL）：> 5-10％異なってはなりません。
番号フォームの入力エラー-誤ったキャレット/マスクを持つイベントの割合。
CLS/perf： 'dir'スイッチ時にレイアウトがジャンプしない。
17） QAチェックリスト
方向とレイアウト
- '' RTLロケール；'：dir （rtl）'スタイルが適用されます。
- 'left/right'の代わりにブール型プロパティ。
- ナビゲーション/bredkramby/carousels/pagination zerkalitsya正しく。
テキストとBiDi
- 数字/通貨/URL/電子メール-'dir=「ltr」または''。
- 混合文字列に「反転」文字はありません。
- 'Intl経由でローカライズされた日付/通貨。'.
フォーム
- 右のラベル；領域≥ 44 × 44 pxをクリックします。
- 電話/IBAN/金額-LTRキャレット、正しいマスク。
- スライダー/lows/highsは期待どおりに動作します。
アイコン/画像
- 方向のみミラーされます。例外は満たされます。
- ローカルバージョンのない画像のテキストはありません。
А11у/Performance
- 'lang'が公開されました。SRは正しく読み取ります。
- 'dir'を変更するときに不要な再描画はありません。
- コントラスト/フォーカスリングはAAに対応しています。
18）設計システムにおけるドキュメンテーション
方向&BiDiセクション：ミラーリングポリシー、アイコンの例外のリスト。
RTLトークンとスタイルリンタのセット（'left/right'禁止）。
Do/Don 't Gallery：カルーセル、bredcrambs、数字フォーム、スライダー、グラフ。
疑似RTLスクリプトとレビューチェックリスト。
概要
適切なRTLサポートは、論理CSSプロパティ、意識的なミラーリング、および厳密なBiDi分離です。LTR、ミラーナビゲーション、方向アイコンの数字/URLを分離し、形状を予測可能にし、グラフを読み取り可能にします。そのため、アラビア語、ヘブライ語、ファルシ語、ウルドゥ語のインターフェースは、ベットクーポンや支払いフォームからトーナメントテーブル、ライブマッチまで、自然で高速です。