徹底解説！rtl を理解するための基礎知識

はじめに

Webサイトやアプリケーションを開発する際、私たちは通常、テキストが左から右へ流れることを前提としてデザインし、実装します。これは、日本語、英語、ヨーロッパの多くの言語など、世界中で広く使われている言語の記述方向（Left-to-Right, LTR）に基づいています。

しかし、世界の言語には、右から左へ記述される言語も多数存在します。例えば、アラビア語、ヘブライ語、ペルシャ語、ウルドゥー語などです。これらの言語を母語とするユーザーにとって、LTR前提のデザインは非常に使いにくく、時には全く意味をなさないものとなります。テキストの表示方向はもちろんのこと、レイアウト、UI要素の配置、スクロール方向、画像やアイコンの向きなど、あらゆる要素を右から左に対応させる必要があります。この「右から左」への対応を RTL (Right-to-Left) 対応と呼びます。

グローバル化が進む現代において、多くのユーザーに快適な体験を提供するためには、RTL対応はもはやニッチな技術ではなく、ウェブ開発者やデザイナーが理解しておくべき基本的な知識の一つです。RTL言語を使用するユーザーは数億人に上り、これらのユーザーを無視することは、ビジネスチャンスの損失だけでなく、デジタルインクルージョンの観点からも望ましくありません。

この記事では、RTLとは何かという基礎から、HTML、CSS、JavaScriptといったウェブ開発における具体的な対応方法、UI/UXデザインでの考慮事項、実装テクニック、そしてよくある落とし穴まで、「徹底的」に解説します。この記事を読むことで、あなたはRTL対応の重要性を理解し、自信を持って多言語対応（特にRTL言語）の開発に取り組めるようになるでしょう。

さあ、RTLの世界への第一歩を踏み出しましょう。

RTLとは？基礎の基礎

Left-to-Right (LTR) との違い

私たちが慣れ親しんでいるLTR（Left-to-Right）は、テキストが左から始まり右へ流れる記述方向です。段落は通常左揃えで、リストの項目やUI要素は左から右へ順に配置されます。スクロールバーは通常ウィンドウの右側に表示されます。

一方、RTL（Right-to-Left）は、テキストが右から始まり左へ流れる記述方向です。段落は通常右揃えとなり、リストの項目やUI要素は右から左へ順に配置されます。スクロールバーは通常ウィンドウの左側に表示されます。

最も顕著な違いはテキストの表示方向ですが、それだけではありません。RTL対応では、レイアウト全体の「流れ」がLTRとは逆になります。

RTL言語の例

RTL言語には以下のようなものがあります。

アラビア語 (Arabic)
ヘブライ語 (Hebrew)
ペルシャ語 (Persian/Farsi)
ウルドゥー語 (Urdu)
シリア語 (Syriac)
マルディー語 (Maldivian/Dhivehi)
アラム語 (Aramaic)

これらの言語は、それぞれ独自の文字セットを持ち、記述方向が右から左であるという共通点があります。

記述方向以外の要素への影響

RTLが影響を与えるのは、単にテキストの表示方向だけではありません。ウェブページやアプリケーションのあらゆる要素に影響します。

テキスト揃え: 段落はデフォルトで右揃えになります。
レイアウト: 要素の配置順序やフロー方向が反転します。例えば、LTRで左側にサイドバーがある場合、RTLでは右側に移動するのが自然です。
UI要素:
- ナビゲーション: LTRで左から始まるグローバルナビゲーションは、RTLでは右から始まります。パンくずリストも「ホーム > カテゴリ > 現在のページ」が、RTLでは「現在のページ < カテゴリ < ホーム」のように反転します。
- ボタンやアクション要素: LTRで左から右へ並ぶボタン群（例：「キャンセル」と「保存」）は、RTLでは右から左へ並びます。重要なアクション（例：「保存」）を最後に配置する慣習がある場合、RTLでは一番左に配置されます。
- フォーム: 入力フィールドのラベルが右側に配置されたり、テキスト入力が右から始まるようになります。
- アイコン: 矢印アイコン（進む/戻る、次へ/前へ）など、方向性を持つアイコンは、RTLでは左右反転させる必要があります。
- 画像: 文脈によってミラーリングが必要な場合があります（例：読書の進捗を示すイラスト、手で何かを指し示すイラスト）。
スクロール:
- 垂直スクロール: 通常は変わりません（上から下）。
- 水平スクロール: ウィンドウの左側にスクロールバーが表示されるのが自然です。また、コンテンツがオーバーフローした場合、LTRでは右方向にスクロールして続きを見ますが、RTLでは左方向にスクロールして続きを見ます。
グラフ・チャート: LTRで左から右へ時間経過や数値を表現するグラフは、RTLでは右から左へ表現する必要があります。
数字と単位: 興味深いことに、RTL言語のテキスト中であっても、数字（0-9）やラテン文字、数学記号などは通常LTRのまま記述されます。これは Bi-directional text (BiDi) と呼ばれ、単一の行の中にLTRとRTLの両方の方向を持つテキストが混在する現象です。このBiDiテキストの正しい表示は、RTL対応において重要な課題の一つとなります。

文化的・歴史的な背景

RTL言語は、中東や北アフリカを中心に長い歴史を持つ地域で使われています。これらの地域では、古くから右から左への筆記が伝統的に行われてきました。例えば、アラビア語はコーランの記述に使われるなど、宗教的・文化的に非常に重要な言語です。これらの言語を使用する人々にとって、RTLは単なる記述方向以上の意味を持ち、彼らの文化やアイデンティティの一部となっています。デジタルコンテンツを彼らの母語で提供し、かつ自然なRTL方向で表示することは、ユーザーに敬意を払い、文化的な親近感を醸成するためにも重要です。

ウェブ開発におけるRTL対応の基本

ウェブ開発において、RTL対応は主にHTML、CSS、JavaScriptの3つの側面で考慮する必要があります。

HTMLでの対応: `dir="rtl"` 属性

HTMLにおいて、要素の記述方向を指定する最も基本的な方法は、dir属性を使用することです。dir属性には、ltr (Left-to-Right) または rtl (Right-to-Left) の値を指定します。

最も重要なのは、HTMLドキュメント全体の記述方向を指定するために、<html>要素にdir="rtl"属性を適用することです。

“`html

مرحباً بالعالم

مرحباً بالعالم!

هذه صفحة RTL تجريبية.

مربع 1

مربع 2

مربع 3

البند الأول
البند الثاني
البند الثالث

“`

<html>要素にdir="rtl"を指定すると、ブラウザはドキュメント全体のデフォルトの記述方向をRTLとして解釈します。これにより、テキストの流れる方向、段落の揃え方、リストの項目符号の位置などが自動的にRTLに対応します。

また、lang属性で言語コード（例：アラビア語の場合はar、ヘブライ語の場合はhe）を指定することも重要です。これは、ブラウザが適切なフォントを選択したり、スクリーンリーダーが正しく読み上げたりするために役立ちます。

個別の要素への `dir` 属性適用

ほとんどの場合、<html>要素にdir属性を指定すれば十分ですが、特定の要素（例：LTR言語の引用文が混在する場合など）に対してのみ方向を上書きしたい場合は、個別の要素にdir属性を指定することも可能です。

“`html

メインのテキストはアラビア語です。

This is a quote in English (LTR).

続きのアラビア語テキスト。

“`

ただし、可能な限り<html>レベルで方向を指定し、CSSでスタイリングを制御するのが推奨されるアプローチです。BiDiテキスト（LTRとRTLが混在するテキスト）の扱いは複雑であり、単純なdir属性の指定だけでは不十分な場合があります。その際は、後述するCSSのdirectionやunicode-bidiプロパティ、あるいはHTMLの&lrm; (Left-to-Right mark), &rlm; (Right-to-Left mark), <bdi>要素 (Bi-directional isolation) などのUnicode BiDi制御文字や要素の使用を検討する必要があります。

metaタグでの指定

metaタグでドキュメントの文字セットを指定すること（例: <meta charset="UTF-8">）は、RTL言語を含む多言語対応において必須です。文字セットが正しく指定されていないと、文字化けが発生し、テキストが正しく表示されません。しかし、metaタグ自体でdir属性のような記述方向を指定する標準的な方法はありません。記述方向の指定は、あくまでHTML要素のdir属性で行います。

CSSでの対応: ロジカルプロパティと物理プロパティ

CSSでRTL対応を行う際に最も重要な概念は、ロジカルプロパティと物理プロパティの違いを理解することです。

物理プロパティ (Physical Properties): 要素の物理的な位置やサイズに関連するプロパティです。例: margin-left, padding-right, border-top, width, height, top, left, right, bottom。これらのプロパティは、記述方向（ltrまたはrtl）に関わらず、常に要素の物理的な上下左右の位置を参照します。
ロジカルプロパティ (Logical Properties): 要素の「流れ」に基づいて位置やサイズを指定するプロパティです。例: margin-inline-start, padding-block-end, border-start-start-radius, width (多くの場合), height (多くの場合), inset-block-start, inset-inline-end。これらのプロパティは、記述方向や書字方向（横書き/縦書き）に応じて参照する物理的な位置が変わります。

LTRでは、「開始側」が左、「終了側」が右、「上側」が上、「下側」が下に対応します。
RTLでは、「開始側」が右、「終了側」が左、「上側」が上、「下側」が下に対応します。

ロジカルプロパティ	LTRでの対応 (物理)	RTLでの対応 (物理)
`*-inline-start`	`*-left`	`*-right`
`*-inline-end`	`*-right`	`*-left`
`*-block-start`	`*-top`	`*-top`
`*-block-end`	`*-bottom`	`*-bottom`
`inset-inline-start`	`left`	`right`
`inset-inline-end`	`right`	`left`
`text-align: start`	`text-align: left`	`text-align: right`
`text-align: end`	`text-align: right`	`text-align: left`

RTL対応を容易にするためには、可能な限り物理プロパティではなく、ロジカルプロパティを使用することが推奨されます。

ロジカルプロパティの使用例

マージンとパディング:

LTR (物理プロパティ):
css .element { margin-left: 20px; /* 左側にマージン */ padding-right: 15px; /* 右側にパディング */ }

RTL対応のために物理プロパティで書く場合 (非推奨、複雑になる):
“`css
.element {
margin-left: 20px; / LTR /
padding-right: 15px; / LTR /
}

html[dir=”rtl”] .element {
margin-left: 0; / LTRの値を打ち消し /
margin-right: 20px; / RTLの左側（物理的な右）にマージン /
padding-right: 0; / LTRの値を打ち消し /
padding-left: 15px; / RTLの右側（物理的な左）にパディング /
}
“`

ロジカルプロパティを使用した場合 (推奨):
css .element { margin-inline-start: 20px; /* 開始側（LTRでは左、RTLでは右）にマージン */ padding-inline-end: 15px; /* 終了側（LTRでは右、RTLでは左）にパディング */ }
このロジカルプロパティを使ったCSSは、dir="ltr"のHTMLではmargin-left: 20px; padding-right: 15px;として解釈され、dir="rtl"のHTMLではmargin-right: 20px; padding-left: 15px;として解釈されます。方向を意識せずに「開始側」「終了側」として指定できるため、非常に効率的です。

テキスト揃え:

LTRでデフォルトの左揃えを明示的に指定する場合:
css .text { text-align: left; }
RTLでは右揃えにする必要があります:
css html[dir="rtl"] .text { text-align: right; }
ロジカルプロパティを使用した場合:
css .text { text-align: start; /* 開始側（LTRでは左、RTLでは右）に揃える */ }
text-align: start; は、dir="ltr" では text-align: left; と、dir="rtl" では text-align: right; と同じ振る舞いをします。

絶対配置:

LTRで左上隅に要素を配置する場合:
css .positioned-element { position: absolute; top: 10px; left: 10px; }
RTLでは右上隅に移動させる必要がある場合:
css html[dir="rtl"] .positioned-element { left: auto; /* LTRの値を打ち消すか、必要なければ書かない */ right: 10px; /* RTLの左上隅（物理的な右上）に配置 */ }
ロジカルプロパティを使用した場合 (inset プロパティ):
css .positioned-element { position: absolute; inset-block-start: 10px; /* ブロックフロー開始側（横書きでは上）から10px */ inset-inline-start: 10px; /* インラインフロー開始側（LTRでは左、RTLでは右）から10px */ }
inset-inline-start は、dir="ltr" では left と同じ、dir="rtl" では right と同じ効果を持ちます。

角丸 (border-radius):

LTRで左上隅に角丸を適用する場合:
css .box { border-top-left-radius: 10px; }
RTLでは右上隅に角丸を適用する必要がある場合:
css html[dir="rtl"] .box { border-top-left-radius: 0; /* LTRの値を打ち消す */ border-top-right-radius: 10px; /* RTLの左上隅（物理的な右上）に適用 */ }
ロジカルプロパティを使用した場合:
css .box { border-start-start-radius: 10px; /* ブロックフロー開始側 + インラインフロー開始側の角 */ }
border-start-start-radius は、LTRでは border-top-left-radius と同じ、RTLでは border-top-right-radius と同じ効果を持ちます。同様に、border-start-end-radius, border-end-start-radius, border-end-end-radius があります。

フロー方向 (flow-rootなど):

CSS FlexboxやGridなどのレイアウトシステムでは、コンテナのdirectionプロパティが子要素の配置順序や方向（flex-direction, grid-auto-flowなど）に影響を与えます。justify-content: flex-startは、LTRでは左端寄せ、RTLでは右端寄せとなります。ロジカルキーワードである start, end, center などを使用することで、記述方向に応じた配置を指定できます。

例えば、要素をインラインフローの開始側に寄せたい場合は justify-content: start; を使用します。これは dir="ltr" の場合は justify-content: flex-start; と、dir="rtl" の場合は justify-content: flex-end; と同じ意味になります。

物理プロパティを使うべきケース:

常に物理的な位置を参照する必要がある場合、例えば背景画像の位置を絶対的なピクセル値で指定する場合や、特定のアニメーションで要素を物理的に右へ動かす場合などは、物理プロパティを使用します。しかし、レイアウトやUI要素の配置に関するスタイリングでは、可能な限りロジカルプロパティを使用するのがベストプラクティスです。

CSSでのRTLスタイル定義方法

CSSでRTL固有のスタイルを定義するには、主に2つのアプローチがあります。

.rtl クラスを使用する方法:
HTMLの<html>要素にdir="rtl"と同時にカスタムクラス（例: rtl）を付与し、CSSでそのクラスを使ってスタイルを定義します。
html <html lang="ar" dir="rtl" class="rtl">
“`css
/ LTR のスタイル /
.element {
margin-left: 20px;
}

/ RTL のスタイル（.rtl クラスの下で上書き） /
.rtl .element {
margin-left: 0; / LTR のスタイルをリセット /
margin-right: 20px;
}
`` この方法はシンプルですが、全てのRTL固有スタイルに対して上書きが必要になり、CSSファイルが冗長になりがちです。また、dir属性が指定されているのに.rtl`クラスが指定されていないといったミスが発生する可能性もあります。
属性セレクタ [dir="rtl"] を使用する方法 (推奨):
HTMLのdir属性を直接セレクタとして利用します。
html <html lang="ar" dir="rtl">
“`css
/ LTR のスタイル /
.element {
margin-left: 20px;
}

/ RTL のスタイル（属性セレクタで指定） /
[dir=”rtl”] .element {
margin-left: 0; / LTR のスタイルをリセット /
margin-right: 20px;
}
または、より効率的にロジカルプロパティと組み合わせる方法:css
/ LTR/RTL 共通（ロジカルプロパティ使用）/
.element {
margin-inline-start: 20px; / ほとんどのケースでこれで十分 /
}

/ ロジカルプロパティでは対応できない、RTL固有のスタイル /
[dir=”rtl”] .specific-rtl-style {
/ RTLでのみ適用したい物理的なスタイルなど /
background-image: url(‘rtl-specific-background.png’); / 例: 背景画像 /
transform: scaleX(-1); / 例: 要素を物理的に反転 /
}
`` この方法が最も推奨されます。ロジカルプロパティを主に使用し、物理プロパティが必要な場合や、ロジカルプロパティだけでは対応できない特別なRTL固有スタイルが必要な場合に、[dir=”rtl”]` 属性セレクタでスタイルを上書きまたは追加します。これにより、CSSの記述が簡潔になり、保守性も向上します。

JavaScriptでの対応

JavaScriptでも、現在のドキュメントの記述方向を取得したり、動的に方向を変更したり、RTL環境での位置計算やアニメーションを考慮する必要があります。

方向の取得

現在のドキュメントの記述方向は、document.dir プロパティで取得できます。

``javascript const currentDir = document.dir; // "ltr" または "rtl" console.log(現在の方向は: ${currentDir}`);

if (currentDir === ‘rtl’) {
console.log(‘RTLモードです’);
// RTL固有のJavaScript処理を実行
} else {
console.log(‘LTRモードです’);
// LTR固有のJavaScript処理を実行
}
“`

動的な方向変更への対応

ユーザーが言語設定や方向設定を変更した場合など、ページのロード後に動的にdir属性が変更される可能性があります。このような変更を検知するには、MutationObserverを使用するか、フレームワークのライフサイクルイベントを利用します。

``javascript // HTML要素のdir属性の変更を監視 const htmlElement = document.documentElement; const observer = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { if (mutation.type === 'attributes' && mutation.attributeName === 'dir') { const newDir = htmlElement.getAttribute('dir'); console.log(Direction changed to: ${newDir}`);
// 方向変更に応じたJavaScript処理を呼び出す
handleDirectionChange(newDir);
}
}
});

// 監視を開始
observer.observe(htmlElement, { attributes: true });

function handleDirectionChange(newDir) {
console.log(方向変更ハンドラーが呼び出されました: ${newDir});
// 例えば、特定のJavaScriptウィジェットを再初期化したり、
// 方向に応じたアニメーションや位置計算を調整したりする
// 例: マップの中心座標を調整するなど
}

// 必要に応じて監視を停止
// observer.disconnect();
“`

ReactやVueなどのフレームワークを使用している場合は、stateやpropsとして方向情報を管理し、コンポーネントの再描画や更新時に方向に応じた処理を行うのが一般的です。

位置計算やアニメーションでの注意点

JavaScriptで要素の物理的な位置（element.offsetLeft, element.getBoundingClientRect().leftなど）を取得したり、物理的な位置（element.style.left, element.style.rightなど）を操作したりする場合、RTLモードではその意味合いが反転することに注意が必要です。

例えば、要素をコンテナの端から20pxの位置に配置したい場合：

LTR: element.style.left = '20px';
RTL: element.style.right = '20px';

単純にelement.style.left = '20px'; と書いていると、LTRでは左から20px、RTLでも左から20pxとなり、期待するレイアウト（右から20px）になりません。

このような場合、現在の方向を確認して処理を分岐させる必要があります。

“`javascript
const element = document.getElementById(‘my-element’);
const offset = 20; // px

if (document.dir === ‘rtl’) {
element.style.right = ${offset}px;
element.style.left = ‘auto’; // 物理プロパティを混在させないように
} else {
element.style.left = ${offset}px;
element.style.right = ‘auto’;
}
“`

より抽象化して、方向に応じて物理プロパティを切り替えるヘルパー関数を作成するのも良い方法です。

また、要素の幅や高さは通常RTLの影響を受けませんが、スクロール位置（element.scrollLeft）はRTLで振る舞いが変わることがあります。ブラウザによっては、RTLモードでのscrollLeftの値がLTRとは逆になったり、基準点（左端または右端）が異なったりします。スクロール位置に基づく複雑な処理を行う場合は、各ブラウザでの動作を確認し、適切な対策を講じる必要があります。

アニメーションにおいても、物理的な位置を操作するアニメーション（例：要素を左から右へスライドさせる）は、RTLでは逆に右から左へスライドさせるのが自然です。CSSアニメーションやJavaScriptアニメーションライブラリを使用する場合も、方向に応じてアニメーションのパラメータや種類を切り替える必要があります。CSSのロジカルプロパティに対応したアニメーションプロパティ（例: inset-inline-start のアニメーション）を利用できる場合もありますが、互換性や複雑さに注意が必要です。

UI/UXデザインにおけるRTL対応の考慮事項

RTL対応は単なる技術的な実装だけでなく、デザインの段階から考慮されるべき重要な要素です。LTR向けにデザインされたUIを単に左右反転させるだけでは不十分な場合が多く、RTLユーザーにとって自然で直感的な体験を提供するためには、いくつかの重要な考慮事項があります。

レイアウトのミラーリング (左右反転)

最も基本的な対応は、レイアウト全体の左右反転です。

ページの全体構造: サイドバー、メインコンテンツ、フッターなどの全体的な配置は左右反転します。
ヘッダーとフッター: ロゴの位置（通常左→右）、ナビゲーションメニューの順序、検索バーの位置などが反転します。
サイドバー: LTRで左にあったサイドバーは右に移動します。
コンテンツエリア: 複数カラムのレイアウトでは、カラムの順序が反転します。

単にCSSでtransform: scaleX(-1)のように全体を物理的に反転させるのは避けましょう。テキストが鏡像になって読めなくなるだけでなく、インタラクティブな要素の挙動も不自然になります。各要素に対して論理的に方向を反転させる必要があります。

ナビゲーション要素

グローバルナビゲーション: LTRで左から右へ並ぶメニュー項目は、RTLでは右から左へ並びます。重要度や出現頻度に応じて項目の順序を検討します。
パンくずリスト: LTRの「ホーム > カテゴリ > 現在のページ」は、RTLでは「現在のページ < カテゴリ < ホーム」のように、項目の順序と区切り記号の向きを反転させます。
ページネーション: 「前へ」「次へ」のリンクや矢印アイコン、ページ番号の並び順を反転させます。LTRの [1][2][3] > は、RTLでは < [3][2][1] のようになります。

フォーム入力フィールドとラベル

ラベル: 入力フィールドのラベルは、LTRでは通常フィールドの左側に配置されますが、RTLでは右側に配置するのが一般的です。
入力方向: テキスト入力フィールドは、dir="rtl"属性が適用されていれば自動的に右から入力が始まりますが、数字や英語などLTRで記述される内容を入力する場合にBiDiテキストとして正しく表示されるか確認が必要です。
プレースホルダー: プレースホルダーテキストもRTL方向で表示されます。
フォーム要素の並び: 複数の入力フィールドやボタンが横一列に並ぶ場合、RTLでは右から左への順序になります。

アイコンと画像

方向性を持つアイコン（矢印、再生/停止、進む/戻るなど）は、RTLでは左右反転させる必要があります。

矢印アイコン: 「進む」を表す右向き矢印は左向きに、「戻る」を表す左向き矢印は右向きに反転させます。
再生/停止アイコン: 再生ボタン（右向き三角形）は左向き三角形に反転させるのが自然です。
リストの項目符号/チェックボックス/ラジオボタン: これらは通常、LTRではテキストの左側に表示されますが、RTLでは右側に表示されます。アイコンそのもの（チェックマークなど）は反転させる必要はありません。

方向性のないアイコン（歯車アイコン、ホームアイコン、検索アイコンなど）は、通常反転させる必要はありません。ただし、レイアウトに合わせて配置位置は変更します（例: LTRで左上に置くならRTLでは右上に置く）。

画像については、文脈によって判断が必要です。

純粋な写真やイラスト: 左右反転の必要はありません。
テキストを含む画像: テキストがRTL言語で書かれている場合は反転不要です。LTR言語の場合は反転すると読めなくなるため、反転しません。
方向性を持つ画像: 地図、グラフ、手で何かを指し示しているイラスト、読書の進捗を示すイラストなど、方向や順序を示す画像は、RTLに合わせてミラーリングが必要な場合があります。

アイコンや画像のミラーリングは、CSSのtransform: scaleX(-1)を使用するか、RTL専用の画像アセットを用意するかのどちらかで行います。CSSでのtransformは実装が容易ですが、画像がぼやけたり、複雑なSVGで問題が発生したりする可能性もあります。RTL専用アセットは品質が高い反面、管理の手間が増えます。

テーブルとリスト

テーブル: LTRでは通常左上からデータが始まりますが、RTLでは右上から始まります。列の順序は反転します。
リスト: 箇条書きや番号付きリストの項目符号/番号は、テキストの右側に表示されます。項目自体の順序は、LTRと同様に上から下へ流れます。

グラフとチャート

時間経過や順序を表現するグラフ（折れ線グラフ、棒グラフなど）は、通常LTRでは左から右へ時間軸が進みますが、RTLでは右から左へ時間軸が進むようにミラーリングする必要があります。円グラフや散布図など、明確な方向性を持たないグラフは、通常ミラーリングの必要はありません。

進捗バーやタイムライン

進捗バーは、LTRでは左から右へ進みますが、RTLでは右から左へ進むように表示する必要があります。タイムラインも同様に、時間の流れを右から左へ表現します。

スクロール可能な領域

水平方向にスクロール可能なコンテナ（例: 画像カルーセル、タグリスト）は、RTLではデフォルトのスクロール方向が左向きになるのが自然です。スクロールバーも通常左側に表示されます。

ビデオプレーヤーのコントロール

再生シークバーは、LTRでは左から右へ進捗しますが、RTLでは右から左へ進捗するようにミラーリングします。「早送り」「巻き戻し」ボタンやアイコンも方向を反転させます。

数字と単位

先述の通り、RTLテキスト中でも数字は通常LTR方向で記述されます。したがって、「123」「$100」「5 kg」のような表現はそのままの順序で表示されます。しかし、「本日のお客様: 150 名」のような文脈では、数字の後に続く単位や説明がRTLテキストとして流れるため、数字と周囲のテキストの関係に注意が必要です。金額など桁区切りが必要な場合は、RTL圏で一般的な桁区切り記号や通貨記号の位置を確認しましょう。

混合方向テキスト (Bi-directional text / BiDi) への対応

最も複雑な課題の一つがBiDiテキスト、つまりLTRとRTLのテキストが混在する状況での表示崩れです。例えば、アラビア語の文章中に英語の単語やURL、数字などが含まれる場合です。UnicodeのBiDiアルゴリズムは、テキストの表示方向を自動的に決定しようとしますが、引用符や括弧などの記号の配置、LTR文字列がRTL文字列で囲まれるケースなどで意図しない表示になることがあります。

これを解決するために、CSSのdirectionプロパティやunicode-bidiプロパティ、そしてHTMLのBiDi制御文字や<bdi>要素を使用します。

directionプロパティ: 要素内のテキストおよびインライン要素の方向を強制的に指定します（ltrまたはrtl）。dir属性と同様の効果を持ちますが、CSSで適用できます。
unicode-bidiプロパティ: Unicode BiDiアルゴリズムの動作を制御します。
- normal: デフォルト。アルゴリズムに従う。
- embed: 新しいレベルを開始し、directionプロパティの値に従ってテキストを再順序付けする。
- bidi-override: 双方向アルゴリズムを完全に上書きし、子要素の方向をdirectionプロパティの値に従って強制する。
- isolate: 要素内のテキストを外部のテキストの流れから分離し、その要素内のテキストのみに対してBiDiアルゴリズムを適用する。
- isolate-override: isolateとbidi-overrideを組み合わせた効果。
- plaintext: 要素内のテキストがBiDiアルゴリズムによって完全に分離されるかのように処理される。
  特に、<bdi>要素はCSSの display: inline-block と unicode-bidi: isolate を組み合わせたような効果を持ち、内部のテキストを周囲のテキストの流れから切り離して表示するため、ユーザー生成コンテンツなど、BiDiテキストが混在する可能性のある部分で非常に有用です。

例えば、RTLのコメント欄にユーザーがLTRのURLを貼り付けた場合、URL内のスラッシュやドットなどがRTLのテキストと混ざって表示が崩れることがあります。このような場合に、URL部分を<bdi>タグで囲むことで、URL内部のテキストはLTRとして正しく表示され、かつ周囲のRTLテキストの流れを乱さないようにできます。

“`html

يرجى زيارة الموقع التالي: https://example.com/some/path للمزيد من المعلومات.

“`

この<bdi>要素や、&lrm; (‎), &rlm; (‏) などのBiDi制御文字は、デザイナーやコンテンツ編集者ではなく、開発者が適切な箇所に挿入する必要がある場合があります。特に、動的に生成されるコンテンツ（ユーザーコメント、データベースからのテキストなど）を表示する際には、これらのBiDi制御メカニズムを組み込む設計が必要です。

実装テクニックとベストプラクティス

RTL対応を効率的かつ保守容易に行うための実装テクニックとベストプラクティスを紹介します。

CSSでのRTLスタイル定義方法のまとめ

前述の通り、属性セレクタ [dir="rtl"] とロジカルプロパティを組み合わせるのが最も推奨される方法です。

“`css
/ ロジカルプロパティを使用して方向に関わらず適切に振る舞うスタイル /
.element {
margin-inline-start: 20px; / 開始側にマージン /
padding-inline-end: 15px; / 終了側にパディング /
text-align: start; / 開始側にテキスト揃え /
}

/ ロジカルプロパティでは表現できない、特定のRTLスタイル /
[dir=”rtl”] .element-with-rtl-specific-visual {
/ 例: RTL専用の背景画像や物理的な変形 /
background-image: url(‘path/to/rtl-background.png’);
}

/ 物理プロパティを避けられない場合のRTL上書き /
/ ただし、ロジカルプロパティで実現できないか常に検討すること /
.legacy-element {
left: 10px; / LTR スタイル /
}
[dir=”rtl”] .legacy-element {
left: auto; / LTR の値をリセット /
right: 10px; / RTL のスタイル /
}
“`

このアプローチにより、ベースとなるCSSはLTRとRTLの両方で機能するように記述され、RTL固有の調整だけを[dir="rtl"]ブロック内に記述することになります。これにより、CSSコードの重複を最小限に抑え、保守性を高めることができます。

CSS変数 (カスタムプロパティ) の活用

CSS変数は、RTL対応において非常に役立ちます。方向に応じて異なる値を適用したいプロパティの値をCSS変数に定義し、[dir="rtl"]セレクタ内でその変数の値を上書きすることで、スタイル定義をよりDRY (Don’t Repeat Yourself) に保つことができます。

“`css
/ LTR でのデフォルト値 /
:root {
–spacing-start: 20px;
–spacing-end: 15px;
–text-align-direction: start;
–background-image: url(‘path/to/ltr-background.png’);
}

/ RTL での値を上書き /
[dir=”rtl”] {
–spacing-start: 15px; / 例: RTLではマージンを少し変える場合 /
–spacing-end: 20px;
–text-align-direction: start; / start は RTL でも start に対応するので変更不要 /
–background-image: url(‘path/to/rtl-background.png’);
}

.element {
margin-inline-start: var(–spacing-start);
padding-inline-end: var(–spacing-end);
text-align: var(–text-align-direction);
background-image: var(–background-image);
}
`` この方法では、多くのプロパティに対して[dir=”rtl”]セレクタ内で値を上書きする必要がなくなり、[dir=”rtl”]`ブロックが非常にコンパクトになります。方向によって値が異なるCSS変数をまとめて定義し、各要素のスタイル定義ではその変数を使用するというパターンが有効です。

CSSプリプロセッサ (Sass, Less) でのミックスインや関数を使った自動化

SassやLessのようなCSSプリプロセッサを使用している場合、RTL対応の記述を自動化するためのミックスインや関数を作成できます。

例えば、Sassで物理プロパティを方向に応じて切り替えるミックスイン:

“`scss
@mixin margin-start($value) {
margin-left: $value;
[dir=”rtl”] & {
margin-left: 0; // LTR の値をリセット
margin-right: $value;
}
}

@mixin margin-end($value) {
margin-right: $value;
[dir=”rtl”] & {
margin-right: 0; // LTR の値をリセット
margin-left: $value;
}
}

// 使用例
.element {
@include margin-start(20px);
@include margin-end(15px);
}
“`
これは物理プロパティを使いつつも、記述をDRYにするアプローチですが、現代ではロジカルプロパティが推奨されるため、ロジカルプロパティを積極的に使用し、プリプロセッサはそれを補完する形で使用するのが良いでしょう。

より高度な例としては、物理プロパティで書かれたスタイルシートをRTL向けに自動変換するミックスインや関数を作成することです。例えば、ltr-rtl($ltr-value, $rtl-value: null) のような関数を作成し、margin-left: ltr-rtl(20px, 0); margin-right: ltr-rtl(0, 20px); のように記述することで、ミックスイン内で[dir="rtl"]ブロックを自動生成させることができます。しかし、これも複雑になりがちです。

ロジカルプロパティのサポートが進んでいる現代では、手動でロジカルプロパティを記述するか、後述の自動ミラーリングツールを利用する方が効率的な場合が多いです。

自動ミラーリングツールの活用 (PostCSS-rtl, rtlcssなど)

既存のLTR用CSSスタイルシートを、RTL用に変換する自動化ツールが存在します。これらのツールは通常、PostCSSのプラグインやnpmパッケージとして提供されており、ビルドプロセスに組み込むことで利用できます。

RTLCSS: LTR CSSファイルを入力として受け取り、特定のルールに基づいてRTL用のCSSファイルを生成します。プロパティ名の自動変換（left → right, margin-left → margin-rightなど）、値の変換（text-align: left → text-align: right）、特定のCSSセレクタやプロパティの無視/強制変換などが設定可能です。

例えば、以下のようなLTR CSSがある場合:
css .box { float: left; margin-left: 10px; text-align: left; }
RTLCSSを通すと、以下のようなRTL CSSが出力されます（設定による）。
css .box { float: right; /* left が right に変換 */ margin-right: 10px; /* margin-left が margin-right に変換 */ text-align: right; /* text-align: left が text-align: right に変換 */ }
これらのツールは、特に大規模なプロジェクトで既存のCSSをRTL対応させる場合に非常に強力です。ただし、完璧ではないため、出力されたCSSは必ず確認・調整が必要です。特定のスタイル（例: アイコン画像の背景位置）は手動で調整が必要になる場合があります。また、ロジカルプロパティとは異なり、これはLTR用とRTL用の2つのCSSファイル（または、単一ファイル内で[dir="rtl"]セレクタを使って生成されたスタイル）を管理するアプローチになります。

ビルドツール（Webpack, Parcel, Gulpなど）やCSSプリプロセッサ（Sass, Less）の処理パイプラインに組み込んで使用するのが一般的です。

テスト方法

RTL対応が正しく実装されているかを確認するためのテストは非常に重要です。

手動テスト:
- ブラウザ: 主要なブラウザ（Chrome, Firefox, Safari, Edgeなど）で、dir="rtl"属性を適用したページを表示し、全体のレイアウト、テキストの表示方向、UI要素の配置、スクロール方向などを目視で確認します。ブラウザの開発者ツールで要素のdir属性を一時的に変更してテストすることも可能です。
- デバイス: デスクトップだけでなく、タブレットやスマートフォンなど、様々なデバイスと画面サイズで確認します。レスポンシブデザインがRTLで正しく機能するかどうかも重要です。
- コンテンツ: 長いテキスト、短いテキスト、BiDiテキスト（LTR単語や数字、URLなどが混ざったテキスト）、箇条書き、表、フォームなど、様々な種類のコンテンツで表示を確認します。
- インタラクション: ボタンクリック、フォーム入力、要素のドラッグ＆ドロップ、スライダー操作など、インタラクティブな要素がRTLで直感的に操作できるかを確認します。アニメーションやトランジションの方向もチェックします。
自動テスト: RTL対応の自動テストは手動テストほど一般的ではありませんが、一部可能な場合があります。
- ビジュアルリグレッションテスト: LTRとRTLの両方のスクリーンショットを撮影し、デザインの意図しない崩れがないか自動的に比較するツール（例: Percy, Chromatic）を利用できます。ただし、テキストの内容そのものよりも、レイアウトの崩れや要素の配置ミスを検知するのに向いています。
- 単体テスト/統合テスト: 特定のコンポーネントや機能（例: スライダーの左右ボタンの挙動）について、DOMのdir属性がrtlの場合に期待される要素のプロパティ（scrollLeftの値、要素の位置など）が正しいかを確認するテストを記述できます。ただし、これは複雑になる傾向があります。

理想的には、RTL対応のテスト環境を構築し、主要なユーザーシナリオを網羅した手動テストを実施することが、品質を保証する上で最も効果的です。

パフォーマンスへの影響

RTL対応のためのCSSをどのように記述するかは、パフォーマンスに影響を与える可能性があります。

単一のCSSファイル: LTRとRTLのスタイルを一つの大きなCSSファイルにまとめて記述する場合、ファイルのサイズが大きくなります。ユーザーが必要としないスタイル（例えばLTRユーザーにとってのRTLスタイル）もダウンロードされるため、特にモバイル環境などで初期表示速度に影響する可能性があります。
方向別にCSSファイルを分割: LTR用とRTL用でCSSファイルを分け、HTMLのdir属性やJavaScriptで適切なCSSファイルをロードする方法です。
html <link rel="stylesheet" href="style-ltr.css">  <link rel="stylesheet" href="style-rtl.css">
または、JavaScriptで動的に読み込む:
javascript const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = document.dir === 'rtl' ? 'style-rtl.css' : 'style-ltr.css'; document.head.appendChild(link);
この方法では、ユーザーが必要なスタイルだけをダウンロードするため、ファイルサイズは小さくなります。ただし、HTMLまたはJavaScriptでの制御が必要になり、ビルドプロセスも複雑になる場合があります。
ロジカルプロパティを多用し、RTL固有のスタイルが少ない場合は、単一ファイルにまとめる方が管理が容易で、gzip圧縮などを考慮するとファイルサイズの増加も許容範囲内である場合が多いです。大規模なRTL固有スタイルが多い場合は、分割を検討すると良いでしょう。

自動ミラーリングツールを使用する場合、ツールが出力するCSSの効率性も考慮する必要があります。冗長な上書きが多い場合や、最適化されていないCSSが出力される場合は、パフォーマンスに悪影響を与える可能性があります。

よくある落とし穴とトラブルシューティング

RTL対応の実装中に遭遇しやすい落とし穴と、その解決策について解説します。

物理プロパティの誤用

最もよくある問題は、レイアウトやスペーシングに物理プロパティ（left, right, margin-left, padding-rightなど）を、方向を考慮せずに一律で使用してしまうことです。これにより、RTLでレイアウトが崩れたり、要素が重なったり、不自然な隙間ができたりします。

対策:
* 新しいプロジェクトでは、可能な限りロジカルプロパティ（inset-inline-start, margin-inline-end, padding-inline-startなど）を使用する習慣をつけましょう。
* 既存のコードを改修する場合、物理プロパティの使用箇所を特定し、[dir="rtl"]セレクタを使って適切に上書きするか、ロジカルプロパティへの置き換えを検討します。
* 自動ミラーリングツールを導入し、物理プロパティの自動変換を任せることも有効です。

JavaScriptでの位置計算のミス

JavaScriptでoffsetLeft, getBoundingClientRect().left, scrollLeftなどの物理的な位置やオフセットを計算・操作する際に、RTLの方向を考慮せずにLTRと同じロジックで処理してしまうと、予期しない動作を引き起こします。

対策:
* JavaScriptで位置計算を行う際は、必ずdocument.dirや要素のdir属性を確認し、RTLであれば物理的なrightやRTLに対応したscrollLeftの振る舞いを考慮したロジックを記述します。
* 方向に応じた物理プロパティを返す/設定するヘルパー関数を作成し、コードの重複を防ぎます。
* 可能であれば、JavaScriptで物理的な位置を操作するのではなく、CSSのロジカルプロパティやFlexbox/Gridなどのレイアウトシステム、CSSアニメーションを活用することを検討します。

複雑なコンポーネントのミラーリング漏れ

カスタムUIコンポーネントや、複数の要素が組み合わさった複雑なUI（例: スライダー、モーダルウィンドウ、ドロップダウンメニュー）において、一部の要素の方向転換や配置調整が漏れてしまうことがあります。

対策:
* 全てのカスタムコンポーネントについて、LTRとRTLの両方で動作を確認するテストプロセスを確立します。
* デザイン段階からコンポーネントのRTLバージョンを検討し、ワイヤーフレームやモックアップを作成します。
* コンポーネントの実装においては、要素の配置や間隔にロジカルプロパティを積極的に使用し、方向による影響を受けにくくします。
* 必要に応じて、RTL固有のスタイルをコンポーネント内部で管理したり、方向を示すpropをコンポーネントに渡して内部のロジックで処理を分岐させたりします。

テキストの切り詰めや折り返し問題

長い単語やURLなど、折り返しが難しいテキストが含まれる場合に、コンテナの幅によってはRTLで表示崩れ（特に左側へのオーバーフロー）が発生することがあります。

対策:
* CSSのoverflow-wrap: break-word; や word-break: break-all; を使用して、必要に応じて単語の途中で改行できるようにします。
* テキストの最大幅を指定する際は、コンテナのパディングやマージン、兄弟要素との関係をRTLで確認し、十分なスペースが確保されているか確認します。
* BiDiテキストを含む要素では、<bdi>要素やCSSのunicode-bidi: isolate; を使用して、内部のテキストが周囲の流れから分離されるようにします。

BiDiテキストの表示崩れ

LTRとRTLのテキストが混在するBiDiテキストにおいて、括弧、引用符、句読点などの記号が予期しない位置に表示されることがあります。

対策:
* HTMLでBiDi制御文字（&lrm;, &rlm;）や<bdi>要素を適切に挿入します。特にユーザー生成コンテンツを表示する際には、これらの自動挿入ロジックをサーバーサイドやJavaScriptで実装することを検討します。
* CSSのdirectionおよびunicode-bidiプロパティを使用して、特定の要素内のBiDiアルゴリズムの挙動を制御します。特にunicode-bidi: isolate; は、外部の影響を受けずに要素内のBiDiアルゴリズムを適用するのに便利です。
* 複雑なBiDiテキストの表示テストには、実際のRTL言語話者による確認が最も信頼できます。

第三者ライブラリやフレームワークの対応状況

使用しているJavaScriptライブラリやCSSフレームワーク（例: UIコンポーネントライブラリ、データグリッド、リッチテキストエディタ）がRTLに完全に対応していない場合、そのライブラリの機能がRTLで正しく動作しない可能性があります。

対策:
* 新しいライブラリやフレームワークを選定する際、公式にRTL対応を謳っているか確認します。
* 既存のライブラリを使用する場合、RTL環境での動作を入念にテストします。
* ライブラリ側でRTL対応が不十分な場合は、CSSの上書きやJavaScriptでのワークアラウンドが必要になります。可能であれば、ライブラリのGitHubリポジトリなどでRTL関連のIssueやPull Requestを確認し、コミュニティの対応状況を把握します。

これらの落とし穴を事前に理解し、計画的にRTL対応を進めることで、手戻りを減らし、より高品質なRTL体験を提供することができます。

フレームワークやライブラリでのRTL対応

モダンなウェブ開発フレームワークやUIライブラリは、RTL対応のための機能やベストプラクティスをサポートしていることが多いです。これらを活用することで、RTL対応の実装を効率化できます。

React, Vue, Angular: これらのフレームワーク自体は直接的なRTL対応機能を提供していませんが、コンポーネントレベルで方向性（dir propなど）を管理し、それに基づいてCSSクラスを切り替えたり、条件付きでRTL固有のスタイルやロジックを適用したりする構造を容易に構築できます。Context API (React) や Provide/Inject (Vue) を利用して、アプリケーション全体またはサブツリーの方向情報を下位コンポーネントに伝えるといったパターンがよく用いられます。
UIライブラリ (Bootstrap, Material UI, Tailwind CSSなど): 多くの人気UIライブラリは、RTL対応のためのビルド済みCSSを提供したり、設定オプションを提供したりしています。
- Bootstrap: v4以降でRTLを公式にサポートしており、RTL CSSファイルや、Sass変数による簡単なカスタマイズ機能を提供しています。
- Material UI (React): Material Designの仕様に基づき、RTLレイアウトを考慮したコンポーネントを提供しています。テーマ設定で方向を指定することで、コンポーネントが自動的にRTLに対応します。
- Tailwind CSS: ロジカルプロパティをベースにしたユーティリティクラス（例: ml-4 の代わりに ms-4 (margin-inline-start)）を提供しており、rtl: プレフィックスを使ってRTL固有のスタイルを指定することも可能です（例: ltr:float-left rtl:float-right）。これにより、RTL対応が容易になっています。

これらのライブラリやフレームワークのドキュメントを確認し、提供されているRTL対応機能を理解して活用することが重要です。ライブラリのRTLサポートが不十分な場合は、前述のCSSテクニック（属性セレクタ、CSS変数、自動ミラーリングツール）を組み合わせて対応する必要があります。

まとめ

この記事では、RTL（Right-to-Left）言語対応の基礎から、ウェブ開発における具体的な実装方法、UI/UXデザインの考慮事項、そして実践的なテクニックやトラブルシューティングまで、幅広く解説しました。

RTL対応は、アラビア語、ヘブライ語、ペルシャ語などの言語を母語とする数億人のユーザーに、より自然で快適なウェブ体験を提供するために不可欠です。単にテキストを右から左に流すだけでなく、レイアウト、UI要素の配置、インタラクション、さらには画像やアイコンの方向性まで、UIのあらゆる側面を再考する必要があります。

技術的な側面では、HTMLのdir="rtl"属性が基本であり、CSSでは物理プロパティではなくロジカルプロパティを積極的に使用することが推奨されます。[dir="rtl"]属性セレクタやCSS変数、自動ミラーリングツールなどを活用することで、RTLスタイルの記述を効率化し、保守性を高めることができます。JavaScriptにおいては、DOM要素の方向を取得し、位置計算や動的な操作を行う際に方向による影響を考慮する必要があります。また、BiDiテキストの表示崩れを防ぐためには、HTMLの<bdi>要素やCSSのunicode-bidiプロパティの理解が重要です。

UI/UXデザインの観点からは、単なるミラーリングに留まらず、RTLユーザーの読書習慣や文化的な慣習に基づいた自然なレイアウトや要素の配置を検討することが重要です。ナビゲーション、フォーム、アイコン、グラフなど、個々のコンポーネントごとにRTLでの最適な表現をデザインする必要があります。

RTL対応は、プロジェクトの初期段階から計画的に進めることで、手戻りを最小限に抑え、高品質な成果物につながります。デザイン、フロントエンド開発、バックエンド開発（BiDiテキスト処理など）の各チーム間で密に連携し、テスト環境を整備して入念な検証を行うことが成功の鍵となります。

グローバルなデジタル製品を提供する上で、RTL対応はもはや選択肢ではなく、標準的な要件となりつつあります。この記事が、あなたがRTLを理解し、多言語対応（特にRTL言語）の開発に自信を持って取り組むための一助となれば幸いです。

付録/参考情報

主要なRTL言語リスト (再掲)

アラビア語 (Arabic, ar)
ヘブライ語 (Hebrew, he)
ペルシャ語 (Persian/Farsi, fa)
ウルドゥー語 (Urdu, ur)
シリア語 (Syriac, syr)
マルディー語 (Maldivian/Dhivehi, dv)
アラム語 (Aramaic, arc)

(ISO 639-1 または ISO 639-2 コードをカッコ内に記載)

Unicode BiDiアルゴリズムに関する簡単な説明

UnicodeのBiDi (Bi-directional) アルゴリズムは、LTRとRTLが混在するテキスト（BiDiテキスト）を正しく表示するための複雑な規則群です。各Unicode文字には「強い方向性」（LTRまたはRTL）、「弱い方向性」（数字や句読点など）、「方向性のない」といったプロパティが定義されています。アルゴリズムは、これらのプロパティと、テキストの周囲の文脈や明示的な方向制御文字/要素（&lrm;, &rlm;, <bdi>, directionプロパティなど）に基づいて、テキストの表示順序を決定します。

これにより、「ABC 123 XYZ」のようなLTRテキストがRTLの文章中に含まれる場合でも、数字やラテン文字の部分はLTRとして表示され、周囲のRTLテキストの流れに埋め込まれます。しかし、特定の記号や構造（例: 括弧のペア）が予期しない形で扱われることがあるため、開発者による介入（BiDi制御）が必要となる場合があります。

徹底解説！rtl を理解するための基礎知識

はじめに

RTLとは？ 基礎の基礎

Left-to-Right (LTR) との違い

RTL言語の例

記述方向以外の要素への影響

文化的・歴史的な背景

ウェブ開発におけるRTL対応の基本

HTMLでの対応: dir="rtl" 属性

مرحباً بالعالم!

個別の要素への dir 属性適用

metaタグでの指定

CSSでの対応: ロジカルプロパティと物理プロパティ

ロジカルプロパティの使用例

CSSでのRTLスタイル定義方法

JavaScriptでの対応

方向の取得

動的な方向変更への対応

位置計算やアニメーションでの注意点

UI/UXデザインにおけるRTL対応の考慮事項

レイアウトのミラーリング (左右反転)

ナビゲーション要素

フォーム入力フィールドとラベル

アイコンと画像

テーブルとリスト

グラフとチャート

進捗バーやタイムライン

スクロール可能な領域

ビデオプレーヤーのコントロール

数字と単位

混合方向テキスト (Bi-directional text / BiDi) への対応

実装テクニックとベストプラクティス

CSSでのRTLスタイル定義方法のまとめ

CSS変数 (カスタムプロパティ) の活用

CSSプリプロセッサ (Sass, Less) でのミックスインや関数を使った自動化

自動ミラーリングツールの活用 (PostCSS-rtl, rtlcssなど)

テスト方法

パフォーマンスへの影響

よくある落とし穴とトラブルシューティング

物理プロパティの誤用

JavaScriptでの位置計算のミス

複雑なコンポーネントのミラーリング漏れ

テキストの切り詰めや折り返し問題

BiDiテキストの表示崩れ

第三者ライブラリやフレームワークの対応状況

フレームワークやライブラリでのRTL対応

まとめ

付録/参考情報

主要なRTL言語リスト (再掲)

Unicode BiDiアルゴリズムに関する簡単な説明

関連リソースへのリンク

コメントする 返信をキャンセル

RTLとは？基礎の基礎

HTMLでの対応: `dir="rtl"` 属性

個別の要素への `dir` 属性適用

コメントする返信をキャンセル