hebrew-rtl-best-practices

ヘブライ語の RTL に関するベストプラクティス

手順

ステップ 1：ドキュメントの方向を設定する

CSS だけではなく、必ず最初に HTML 属性を設定します。

<html lang="he" dir="rtl">

これにより、ブラウザー、スクリーンリーダー、CSS で RTL が基本の方向として使用されます。

ステップ 2：CSS 論理プロパティを使用する

レイアウトに物理的な方向指定のプロパティを使用しないでください。

物理プロパティ（避ける）	論理プロパティ（使用する）
margin-left	margin-inline-start
margin-right	margin-inline-end
padding-left	padding-inline-start
padding-right	padding-inline-end
border-left	border-inline-start
text-align: left	text-align: start
text-align: right	text-align: end
float: left	float: inline-start
left: 10px	inset-inline-start: 10px

これにより、RTL モードではレイアウトが自動的に反転します。

論理プロパティでは表現できない方向固有のルールが本当に必要な場合は、[dir="rtl"] 属性セレクターよりも :dir() 疑似クラスを優先してください。

/* Modern: matches the resolved direction, including dir="auto" and inheritance */
.chevron:dir(rtl) { transform: scaleX(-1); }

/* Older approach: only matches an explicit dir attribute on/above the element */
[dir="rtl"] .chevron { transform: scaleX(-1); }

:dir() は Selectors Level 4 の一部で、計算後の方向を解決します。そのため、dir="auto" や祖先要素から方向を継承する要素にも適用されますが、属性セレクターではそうした要素を検出できません。ブラウザーの対応状況：Chrome と Edge では 120（2023 年後半）でリリースされ、Firefox では長年対応しており、Safari でも 16.4 で追加されたため、現在は Baseline（広く利用可能）です。古いブラウザーへの対応が必要な場合は、[dir="rtl"] のフォールバックルールを残すか、代わりに論理プロパティを使用してください。最新の対応状況は https://caniuse.com/css-dir-pseudo で確認できます。

ステップ 3：双方向テキストを処理する

ヘブライ語と英語または数字を混在させる場合：

/* Isolate embedded LTR content */
.ltr-content {
  unicode-bidi: isolate;
  direction: ltr;
}

/* Mixed or unknown-direction content: each paragraph picks its own base direction */
.user-content {
  unicode-bidi: plaintext;
}

混在するコンテンツには unicode-bidi: bidi-override を使用しないでください。これは双方向アルゴリズムの暗黙的な処理を無効にし、すべての文字を direction の値に厳密に従って配置するため、RTL オーバーライド内の英語が文字単位で逆順に表示されます。意図的に既知の視覚的順序を強制する場合に限り、これ（または <bdo>）を使用してください。

よくある双方向テキストの問題：

• スペースを含む電話番号（050 321 4450）や +972 で始まる電話番号が乱れて表示される：<bdo dir="ltr"> で囲みます。ハイフン区切りの 050-321-4450 は、数字の間にあるハイフンが 1 つの数値のまとまりとして結合するため、そのままでも順序が保たれます。
• 句読点が文の反対側に表示される：unicode-bidi: isolate を使用します。
• ヘブライ語テキスト内の URL やメールアドレス：<span dir="ltr"> で囲みます。

数字と日付： ヘブライ語テキスト内にある単独の数字や DD/MM/YYYY 形式の日付は、通常、数字が弱い LTR 文字として扱われるため正しく表示されます。ただし、符号、通貨記号、別の数字が直後に続く値は、表示順が逆になることがあります。視覚的な順序を固定する必要がある値は、既定の双方向解決に頼らず、<span dir="ltr"> または unicode-bidi: isolate で分離してください。

値をフォーマットしてから分離します。 双方向テキストの分離は、正しい文字列が反転するのを防ぐだけであり、正しい文字列を生成するものではありません。Intl でフォーマットしてから分離します。シェケルの金額には Intl.NumberFormat('he-IL', { style: 'currency', currency: 'ILS' }) を、日付には Intl.DateTimeFormat('he-IL') を使用し、ヘブライ語の文章内にインラインで配置する場合は、出力を <bdi>（または unicode-bidi: isolate）で囲みます。he-IL の出力に dir="ltr" を強制しないでください。通貨文字列には独自の右から左へのマーク（U+200F）が含まれており、RTL コンテキスト向けに配置されるため、LTR を強制すると ₪ が数字の反対側に移動します。違いは次のとおりです。方向マークを持たない電話番号などの生の数字列には dir="ltr" を強制し、方向マークを持つ Intl の出力は分離するだけにします。開発者はこの 2 つを混同して、フォーマットの不具合に双方向テキストの修正を適用したり、その逆を行ったりしがちです。 ヘブライ暦の日付には、カレンダー拡張機能が必要です。 Intl.DateTimeFormat('he-IL') はグレゴリオ暦（resolvedOptions().calendar === 'gregory'）に解決されるため、ヘブライ語ロケールを指定するだけではヘブライ暦の日付になりません。-u-ca- Unicode 拡張機能でカレンダーを指定します。Intl.DateTimeFormat('he-IL-u-ca-hebrew') を使うと、2026 年 9 月 20 日は 9 בתשרי 5787 と表示されます。祝日、ヤールツァイト、二重日付の表示にはこれを使い、ユーザーが公的機関に提出する書類ではグレゴリオ暦の形式を使います。

フォーム入力には dir="auto" が必要です。 すべての <input> と <textarea> に dir="auto" を指定して、各値の基本方向が個別に判定されるようにします。これは、エンドユーザーに最も目立つ RTL の不具合です。これを指定しないと、ヘブライ語フォームに入力したメールアドレスや英単語が反対側に飛んでしまいます。プレースホルダーでは自動判定が行われないため、空欄時の見た目が重要であれば、CSS で初期の方向を指定してください。例外が 2 つあります。type="tel" の入力欄はデフォルトですでに LTR です（HTML 仕様では、dir のない tel 入力欄は LTR の方向性を持ちます）。そのため、dir は指定しないでください。email と url の入力欄では値の大半がラテン文字なので、意図的に dir="ltr" を指定してください。dir="auto" にすると、ヘブライ文字を使うドメイン .ישראל のアドレスのように、ヘブライ文字で始まる値を入力した際に、入力途中で欄が RTL に切り替わります。ただし、その代償も考慮してください。dir="ltr" を指定すると、ヘブライ語のプレースホルダーも左揃えになります。

<bdi> と <bdo>： 方向を強制したい場合に限り、<bdo dir="ltr"> を使います（双方向アルゴリズムを上書きします）。ユーザー生成コンテンツや方向が不明なコンテンツには、<bdi> を推奨します。コンテンツを分離し、方向を自動判定できるようにするとともに、周囲のテキストに影響が及ばないようにします。

<p>שלום, <bdi>{{ userName }}</bdi>, ברוך הבא</p>

埋め込み部分には dir と lang を併用します。 dir で修正できるのは視覚的な並び順だけです。ヘブライ語の文章中の英語の用語には、<span lang="en" dir="ltr"> を指定します。音声合成ソフトや点字翻訳ソフトは、言語モードの切り替えに言語タグを使用し、:lang() によるフォントやハイフネーションの規則もこのタグを基準にします。これがないと、支援技術はその部分でヘブライ語モードを終了する手がかりを得られません。

自由記述欄では、dir="auto"（または CSS の unicode-bidi: plaintext）を指定すると、値ごとにブラウザーが基本方向を選択します。これは、事前に言語がわからないコメント、名前、検索クエリに適したデフォルトです。

シャドウとグラデーションは自動反転しません。 CSS の論理プロパティはレイアウトを反転しますが、box-shadow、text-shadow、linear-gradient のオフセットや角度は物理方向に基づいており、方向を切り替えても固定されたままです。LTR で正しく見える 4px 4px のシャドウのオフセットは、RTL レイアウトでは「反対」方向を向きます。同じように、transform-origin、background-position、translateX ベースのキーフレームアニメーション（スライドインするドロワー、カルーセル、進行状況のシマー）も、物理方向と論理方向の取り違えが起きやすい箇所です。方向が意味を持つ場合は、:dir(rtl)（または [dir="rtl"]）によるオーバーライドで、それぞれ明示的に反転してください。

ステップ 4：方向を示すアイコンを反転する

アイコンの反転は、RTL において最も頻繁に発生するバグの 1 つです。ルールは、読み進める方向に意味が結び付いているアイコンだけを反転し、それ以外はそのままにすることです。

次のアイコンは反転します（読み順に対する「進む／戻る／次へ／前へ」を方向で表しています）。

• ナビゲーション矢印、戻る／進むボタン、パンくずリストの山形記号
• 「送信」／送信矢印、カルーセルとページネーションの矢印
• インデント、リストのネスト、返信の矢印
• 前進を示すプログレスインジケーター

次のアイコンは反転しないでください（反転すると意味が間違ったり、判別できなくなったりします）。

• ロゴとブランドマーク
• チェックマークと X ／閉じるアイコン
• メディアの再生ボタン（再生ボタンは常に右を向きます。読み進める方向ではなく、タイムラインを示すためです）
• 時計とアナログ時計のアイコン（時計回りは普遍的です）
• 向きが固定された現実世界の物体を表すアイコン（受話器、持ち手の付いた虫眼鏡、ほとんどの製品アイコンなど）

手法として、水平方向に反転する変換を適用します。

/* Flip only when the document direction is RTL */
.icon-directional:dir(rtl) { transform: scaleX(-1); }

<button class="rtl:-scale-x-100">
  <ArrowLeftIcon />
</button>

Material Symbols など、多くのアイコンセットには RTL 対応のバリエーションが用意されています。利用できる場合は、反転すると細部や埋め込みテキストが正しく表示されないことがあるため、反転するよりもそうしたバリエーションを優先してください。

ステップ 5：ヘブライ語のタイポグラフィ

推奨フォントスタック：

font-family: 'Heebo', 'Assistant', 'Rubik', 'Noto Sans Hebrew', sans-serif;

タイポグラフィの設定：

html[dir="rtl"] body {
  line-height: 1.7;
  letter-spacing: normal; /* no tracking on running text */
}

ヘブライ語では、文字間隔を強調表現として使うため、全体で禁止しないでください。 通常の文章では letter-spacing: normal を維持しますが、ヘブライ語のタイポグラフィでは、名前、用語、概念を強調するために文字間隔（トラッキング）を意図的に使います。RTL テーマで一律に letter-spacing: 0 !important とリセットすると、正当な強調表現が失われます。

ヘブライ語には大文字と小文字の区別がありません。 大文字と小文字の区別がある、広く使われている現代の文字体系はラテン文字、ギリシャ文字、アルメニア文字、キリル文字であり、ヘブライ語はその中に含まれません。そのため、text-transform: uppercase ／ capitalize や font-variant: small-caps はヘブライ語の文字には何も作用しません。ところが、同じ要素に含まれるラテン文字の単語には作用します。ラベルを大文字に変換する共通デザインシステムのボタンや見出しでは、ヘブライ語はそのままなのに、その横の「GMAIL」や「PDF」だけが大文字になります。何も起こらないだろうと考えるのではなく、RTL テーマから大文字・小文字の変換を削除してください。

ニクダーと詠唱記号には、縦方向の余白が必要です。 母音記号は結合文字であり、基底文字の下または上に配置されるため、グリフの実質的な領域が大きくなります。line-height が小さい（1.2 以下）と、これらが切り取られたり、直上の行とぶつかったりします。ここで 1.7 を推奨する実用上の理由はこれです。ラテン文字を優先するウェブフォントの中には、ニクダーのグリフを含まないヘブライ文字を収録しているものもあるため、母音記号付きのテキスト（典礼文、子ども向けコンテンツ、辞書など）は、リリース前に実際のフォントでテストしてください。

ステップ 6：フレームワーク固有のセットアップ

Tailwind CSS の RTL 対応（v4、現行版。v3.3 以降は論理ユーティリティを使用）：

rtl:／ltr: バリアントよりも、論理プロパティのユーティリティを優先してください。

物理クラス	論理クラス	CSS プロパティ
ml-4	ms-4	margin-inline-start
mr-4	me-4	margin-inline-end
pl-4	ps-4	padding-inline-start
pr-4	pe-4	padding-inline-end
left-4	inset-s-4（以前は start-4）	inset-inline-start
right-4	inset-e-4（以前は end-4）	inset-inline-end
rounded-l-lg	rounded-s-lg	border-start-start-radius + border-end-start-radius
rounded-r-lg	rounded-e-lg	border-start-end-radius + border-end-end-radius

<div class="ltr:ml-4 rtl:mr-4">...</div>


<div class="ms-4">...</div>

rtl:／ltr: バリアントは、論理プロパティで対応できない場合（方向を持つアイコンや変形など）に限って使用してください。

論理形式がなく、v4 でも物理指定のままとなるユーティリティもあります。translate-x-*（スライドインするドロワーやシート）、origin-left／origin-right、bg-linear-to-r／bg-linear-to-l です。これらには rtl: による上書きを組み合わせてください。たとえば、開始端から入るドロワーには -translate-x-full rtl:translate-x-full を使用します。

Tailwind v4 に関する注記： v4（2025 年初頭から GA、現在は v4.3）では、tailwind.config.js の代わりに CSS ファーストの設定（CSS 内の @import "tailwindcss"）を使用します。論理ユーティリティは v3 と v4 のどちらでも同じように動作します。v4.2（2026 年 2 月）時点で、論理 inset ユーティリティの start-*／end-* は、inset-s-*／inset-e-* が推奨されるようになり非推奨となっています（旧名称も引き続き機能し、削除時期は発表されていません）。margin／padding ユーティリティの ms-*／me-*／ps-*／pe-* に影響はありません。

Next.js App Router：

// app/[locale]/layout.tsx (a plain app/layout.tsx receives no locale param)
import { Heebo } from 'next/font/google';

const heebo = Heebo({
  subsets: ['hebrew', 'latin'],
  weight: ['400', '500', '700'],
});

export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const isRTL = locale === 'he';

  return (
    <html lang={locale} dir={isRTL ? 'rtl' : 'ltr'}>
      <body className={heebo.className}>{children}</body>
    </html>
  );
}

next/font はフォントをセルフホストします（外部の Google Fonts へのリクエストがなく、レイアウトシフトも発生しません）。

MUI を使った React：

現行の MUI（2026 年時点で v9）では、以前のコミュニティ製パッケージ stylis-plugin-rtl ではなく、公式フォークの @mui/stylis-plugin-rtl を使用します。公式フォークは CSS レイヤーの問題を修正し、現行の Stylis バージョンをサポートしています。これは MUI v6 以降に推奨されているセットアップです。

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import rtlPlugin from '@mui/stylis-plugin-rtl';
import { prefixer } from 'stylis';

const cacheRtl = createCache({
  key: 'muirtl',
  stylisPlugins: [prefixer, rtlPlugin],
});

const theme = createTheme({ direction: 'rtl' });

Next.js App Router では、別個のキャッシュを作成する代わりに、同じオプションを MUI の AppRouterCacheProvider（@mui/material-nextjs/v16-appRouter からインポートし、Next.js のメジャーバージョンに合わせます）に渡してください。指定例は <AppRouterCacheProvider options={{ key: 'muirtl', stylisPlugins: [prefixer, rtlPlugin] }}> で、その内部に <ThemeProvider theme={theme}> を配置します。options プロパティは Emotion の createCache にそのまま渡されます。

@mui/stylis-plugin-rtl が公開しているのは default エクスポートのみです。そのため、名前付きの import { rtlPlugin } はコンパイルされても値が undefined となり、Emotion はプラグインを何も通知せずにスキップします。その結果、エラーは出ず、アプリは LTR に見えます。MUI のバージョンに対応した RTL ガイド（https://mui.com/material-ui/customization/right-to-left/）を参照し、正確なインポート名とセットアップを確認してください。

ポータル経由でレンダリングされる UI（モーダル、ドロップダウン、ツールチップ、トースト）。 ポータル（React の createPortal、Radix、MUI Menu、Floating UI）経由でレンダリングされるコンポーネントは document.body にマウントされ、そこから方向を継承しますが、多くのライブラリは LTR を前提としています。<html> に dir を設定したうえで、ライブラリ独自の方向設定も渡してください。Radix では <DirectionProvider dir="rtl"> でラップし、MUI ではテーマに direction: 'rtl' を設定する必要があります。そうしないと、ページの他の部分が正しく表示されていても、ポップオーバーが反対側に開きます。

ステップ 7：よくある落とし穴を確認する

1. 方向を示すアイコン — 反転します（反転するアイコンとそのままにするアイコンについては、ステップ 4 を参照してください）
2. プログレスバー — 右から左へ進むようにします
3. スライダー／カルーセル — スワイプする方向を反転します
4. フォームのラベル — 右揃えにします
5. パンくずリスト — 区切り文字の方向を反転します
6. テーブル — 列は自動的に並べ替えられますが、数値、コード、日付のセルには <td dir="ltr"> を指定して LTR に戻し、一貫した配置にします（例：text-align: end。配置だけでは方向は変わりません）
7. グラフ — ヘブライ語の読者向けに x 軸を反転する必要がある場合があります（SVG には論理プロパティがないため、CSS ではなくグラフライブラリの reversed／rtl オプションを使ってください）
8. 影とグラデーション — 物理的なオフセットや角度は自動的には反転しません（ステップ 3 を参照してください）
9. 固定表示およびスティッキー表示の UI 要素（ヘッダー、トースト、FAB、ドロワー） — ハードコードされた left: 0／right: 0 は反転しません。inset-inline-start／inset-inline-end を使ってください
10. RTL ではスクロールバーが左側に表示されます — 再レイアウトを防ぐため、scrollbar-gutter: stable（Tailwind v4.3 以降では scrollbar-gutter-stable）でスペースを確保します。text-wrap: balance を使うとヘブライ語の見出しが読みやすくなります

ステップ 8：RTL レイアウトを検証する

記述ルールだけでは十分ではありません。リリース前に検証してください。

• アプリ全体を dir="rtl" に切り替え、移動しなかった要素がないか確認します（物理プロパティがまだ使われています）。
• すべてのテキスト領域で、次の標準的な混在文字列をテストします：שלום John +972 50-123-4567 ₪1,234。ヘブライ語、ラテン文字、国際電話番号、通貨金額を一度に確認できます。
• すべてのモーダル、ドロップダウン、ツールチップ、トーストを開きます（ポータルを使った UI は、RTL の見落としが最もよく起こる箇所です）。
• 固定表示／スティッキー表示の UI 要素、グラフ／SVG、dir="auto" を指定したフォームフィールドを確認します。
• 自動化します。Playwright で同じページを dir="rtl" と dir="ltr" の両方でレンダリングし、スクリーンショットを比較します。手動での切り替えは、チームが最初に省略しがちなステップです。また、物理プロパティが再び入り込んでも、ユーザーから報告されるずっと前にピクセル差分で検出できます。

例

例 1：LTR コンポーネントを RTL に変換する

ユーザーの依頼：「このカードコンポーネントをヘブライ語で使えるようにしてください」

変更前（LTR 専用）：

.card {
  margin-left: 16px;
  padding-right: 12px;
  text-align: left;
  border-left: 3px solid blue;
}

変更後（RTL 対応）：

.card {
  margin-inline-start: 16px;
  padding-inline-end: 12px;
  text-align: start;
  border-inline-start: 3px solid blue;
}

Tailwind では、ml-4 pr-3 text-left border-l-4 を ms-4 pe-3 text-start border-s-4 に置き換えます。

例 2：双方向テキストの問題

ユーザーの依頼：「ヘブライ語のテキストで数字が逆向きに表示されます」

<p>התקשרו אלינו: 050 321 4450</p>


<p>התקשרו אלינו: +972 50-321-4450</p>


<p>התקשרו אלינו: <span dir="ltr">+972 50-321-4450</span></p>

050-321-4450 のようにハイフンだけで区切られた数字は、特別な指定をしなくても正しく表示されるため、双方向テキストを原因と決めつける前に、実際の形式を確認してください。CSS だけで解決する場合は、親となる span に direction: ltr と unicode-bidi: isolate を指定します。

例 3：Tailwind の RTL ナビゲーション

ユーザーの依頼：「ヘブライ語でサイドバーが反対側に表示されます」

<aside class="fixed left-0 w-64">...</aside>


<aside class="fixed inset-s-0 w-64">...</aside>


<button class="rtl:-scale-x-100">
  <ArrowLeftIcon />
</button>

同梱リソース

参考資料

• references/css-logical-properties.md - 物理プロパティから論理プロパティへの CSS 対応表（マージン、パディング、ボーダー、配置、テキストの配置、サイズ指定）と、サンセリフ、セリフ、等幅フォント向けのヘブライ語フォントスタックの推奨事項をまとめています。LTR のスタイルシートを RTL 対応の論理プロパティに変換する場合や、ヘブライ語の Web フォントを選ぶ場合に参照してください。

注意点

• CSS の text-align: left はヘブライ語では誤りです。ドキュメントの方向を尊重する text-align: start を使用してください。エージェントは CSS で left の配置をハードコードしがちです。
• margin-left と padding-right は RTL モードでは反転しません。代わりに CSS の論理プロパティである margin-inline-start と padding-inline-end を使用してください。LTR の CSS で学習したエージェントは、物理プロパティを生成します。
• Flexbox の row 方向は RTL で自動的に反転しますが、row-reverse も反転するため、二重に反転して LTR の順序に戻ります。エージェントは RTL にするために row-reverse を追加することがありますが、実際には RTL コンテキスト内で LTR を作成します。
• 電話番号、クレジットカード番号、コード、ファイルパス、CLI コマンドは、RTL コンテナ内でも LTR のままにする必要があります。インラインの値は <bdo dir="ltr"> で囲み、RTL テーマで一度 code, pre, kbd, samp { direction: ltr; unicode-bidi: isolate; } を設定すれば、すべてのコードブロックとキーボードショートカットに適用されます。エージェントはこれらを RTL に継承させがちで、その結果、末尾のスラッシュやフラグが逆側に移動します。
• RTL のスクロールコンテナでは、scrollLeft は開始位置（最も右）で 0 となり、末尾に向かうにつれて負の値が大きくなります。el.scrollLeft += 300 のように記述したり、Math.max(0, ...) でクランプしたりするカスタムカルーセルや「次へ」ボタンは、逆方向にスクロールするか、開始位置で止まります。el.scrollBy({ left: isRtl ? -300 : 300 }) を使用し、scrollLeft <= 0 を RTL の通常の範囲として扱ってください。

参考リンク

ソース	URL	確認する内容
MDN CSS 論理プロパティ	https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Logical_properties_and_values	プロパティ一覧、ブラウザーサポート表
MDN :dir() 疑似クラス	https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:dir	構文、[dir] 属性セレクターとの動作の違い
Can I use: :dir()	https://caniuse.com/css-dir-pseudo	現在のブラウザーサポート表
MDN <bdi> 要素	https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/bdi	ユーザー生成の双方向テキストコンテンツの分離
Tailwind CSS RTL サポート	https://tailwindcss.com/docs/hover-focus-and-other-states#rtl-support	rtl: / ltr: バリアントの構文
Tailwind 論理プロパティ	https://tailwindcss.com/docs/margin	ms-*、me-*、ps-*、pe-* ユーティリティ
MUI の右から左への表示	https://mui.com/material-ui/customization/right-to-left/	現行 MUI の @mui/stylis-plugin-rtl のセットアップ
Google Fonts ヘブライ語	https://fonts.google.com/?lang=he_Hebr	利用可能なヘブライ語フォントファミリー
W3C 国際化	https://www.w3.org/International/articles/inline-bidi-markup/	Unicode 双方向アルゴリズム、マークアップのベストプラクティス

トラブルシューティング

エラー：「テキストの配置がおかしい」

原因：text-align: start ではなく text-align: left を使用しています。 解決策：text-align 内の left／right をすべて start／end に置き換えてください。

エラー：「レイアウトが反転しない」

原因：論理プロパティではなく、物理的な margin／padding を使用しています。 解決策：margin-left／margin-right をすべて margin-inline-start／margin-inline-end に置き換えてください。