arabic-rtl-best-practices

アラビア語のRTL対応に関するベストプラクティス

手順

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

CSSだけでなく、必ず最初にHTML属性を設定してください。

<html lang="ar" 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モードではレイアウトが自動的に反転します。

ステップ 3：双方向テキストを扱う

アラビア語と英語／数字を混在させる場合：

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

/* For inline elements with mixed content */
.bidi-override {
  unicode-bidi: bidi-override;
}

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

• 電話番号が逆順で表示される：<bdo dir="ltr"> で囲みます
• 句読点が文の反対側に表示される：unicode-bidi: isolate を使用します
• アラビア語テキスト内のURL／メールアドレス：<span dir="ltr"> で囲みます

ステップ 4：アラビア語のタイポグラフィ

推奨フォントスタック：

font-family: 'Tajawal', 'Assistant', 'Rubik', 'Noto Sans Arabic', sans-serif;

タイポグラフィ設定：

body[dir="rtl"] {
  font-size: 16px; /* Arabic needs slightly larger than Latin */
  line-height: 1.7;
  letter-spacing: normal; /* NEVER add letter-spacing for Arabic */
  word-spacing: 0.05em; /* Slight word spacing improves readability */
}

ステップ 5：フレームワーク固有の設定

Tailwind CSSのRTL対応（v3.3+ / v4）：

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	start-4	inset-inline-start
right-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: バリアントを使用してください。

Tailwind v4に関する注意： v4ではtailwind.config.jsの代わりに、CSSファーストの設定（CSS内の@import "tailwindcss"）を使用します。論理プロパティのユーティリティはv3とv4のどちらでも同じように動作します。

Next.js App Router：

// app/layout.tsx
import { Tajawal } from 'next/font/google';

const tajawal = Tajawal({
  subsets: ['arabic', '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={tajawal.className}>{children}</body>
    </html>
  );
}

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

MUIを使用したReact：

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

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

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

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

1. 方向を示すアイコン（矢印、戻るボタン）——反転させます
2. プログレスバー——右から左に進むようにします
3. スライダー／カルーセル——スワイプ方向を逆にします
4. フォームラベル——右揃えにします
5. パンくずリスト——区切り記号の方向を逆にします
6. テーブル——ヘッダーとセルの配置を確認します
7. グラフ——アラビア語の読者向けにx軸を反転させる必要がある場合があります

例

例 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>התקשרו אלינו: <span dir="ltr">050-321-4450</span></p>

CSSのみで解決する場合は、親のspanにunicode-bidi: isolateを指定してください。

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

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

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


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


<button class="rtl:rotate-180">
  <ArrowLeftIcon />
</button>

同梱リソース

参考資料

• references/css-logical-properties.md — CSSの物理プロパティから論理プロパティへの完全な対応表（margin、padding、border、配置、テキスト揃え、サイズ設定）と、サンセリフ、セリフ、等幅フォント向けのアラビア語フォントスタックの推奨事項を掲載しています。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 になります。
• 電話番号、クレジットカード番号、コードスニペットは、RTL コンテナ内でも LTR のままにする必要があります。<bdo dir="ltr"> で囲むか、包含要素に direction: ltr を指定してください。エージェントはこれらに RTL を継承させがちです。

参考リンク

出典	URL	確認する内容
MDN CSS 論理プロパティ	https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values	プロパティの全一覧、ブラウザー対応表
Tailwind CSS の RTL サポート	https://tailwindcss.com/docs/hover-focus-and-other-states#rtl-support	rtl: / ltr: バリアントの構文
Tailwind の論理プロパティ	https://tailwindcss.com/docs/margin#logical-properties	ms-*、me-*、ps-*、pe-* ユーティリティ
Google Fonts のアラビア語フォント	https://fonts.google.com/?subset=arabic	利用可能なアラビア語フォントファミリー
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 に置き換えてください。