RTL デザイン: アラビア語とヘブライ語の Web サイトの 7 つのルール

右から左への Web デザインの 7 つの実用的なルール: HTML 方向、CSS 論理プロパティ、ミラーリングするものとミラーリングしないもの、数字、フォント、アラビア語とヘブライ語のサイトのテスト。
始める
ツアーに参加してください
クレジットカード不要 契約義務なし

・ 更新 · アレックスB · ブログ

この投稿を次のように要約します: 10分で読めます
ChatGPT チャットGPT Perplexity 困惑 Grok グロック Google AI Google AI

優れた RTL（右から左）デザインは、スタイルシートではなくマークアップから始まります: set dir="rtl" そして右 lang オン ザ <html> アラビア語、ヘブライ語、ペルシア語、ウルドゥー語のページの要素。次のような論理プロパティを使用して CSS を構築します margin-inline-start したがって、レイアウトはそれ自体をミラーリングし、何を反転するかを要素ごとに決定します。ナビゲーション、戻る矢印と次の矢印、プログレス バー、テキスト配置アイコンはミラーリングされます。ロゴ、チェックマーク、時計、メディア再生コントロール、写真、数字内の数字はミラーリングされません。

主なポイント

  • HTMLに方向を入力する(<html dir="rtl" lang="ar">)、CSS だけに限ったことではありません。W3C では、ベース方向を設定するために CSS を使用しないように指示されています。
  • 置き換える left そして right CSSで論理的に start そして end プロパティ。1 つのスタイルシートが両方向に機能します。
  • 読み取り順序、ナビゲーション、または進行状況を示すものをミラーリングします。ロゴ、ユニバーサルシンボル、現実世界のオブジェクト、写真をそのままにしておきます。
  • 数字は RTL テキスト内でも数字の順序を維持します。ヘブライ語では西洋の数字が使用されます。アラビア語では西洋または東洋のアラビア数字が使用される場合があります。
  • 発売前に、アラビア語と英語の混合文字列を含む実際の翻訳テキストを使用してテストします。

RTL設計の意味

右から左へのスクリプトはページの右端から読み取られます。W3Cでは、アドラム、アラビア語、ヘブライ語、ンコ語、シリア語、ターナ語を右から左への文字としてリストしており、アラビア語、ディベヒ語、ヘブライ語、パシュトゥー語、ペルシア語、シンド語、ウルドゥー語、イディッシュ語などの言語を書くために使用されています(W3C 国際化).

RTL デザインは “すべてを右揃え” ではありません。これらの言語の読者は、右側のロゴとメイン ナビゲーション、交換されたサイドバー、右を指す戻る矢印など、インターフェイス全体が自分の読み取り方向に従うことを期待しています。また、電話番号、ブランドロゴ、ビデオの再生ボタンなど、変わらないものも期待しています。その分割を正しく行うことが、翻訳されたページとローカライズされたページを区別するものです。

1。HTMLで方向と言語を設定する

基礎は 1 つの属性です。W3Cの簡単な答え: “ドキュメント全体の方向が右から左の場合は、 dir="rtl" htmlタグへ” (W3C).

<!DOCTYPE html>
<html dir="rtl" lang="ar">
  <head>
    <meta charset="utf-8" />
  </head>
</html>

W3C によると、この単一の属性により、段落が右揃えになり、テーブル列が右から左に実行され、フォーム入力が右から開始され、句読点が正しく配置され、スタイルシートが適切に記述されている場合は、CSS がレイアウトをミラーリングできるようになります。

同じガイダンスからの 3 つのルール:

  • 基本方向に CSS を使用しないでください。 方向は意味に影響を与えるため、マークアップに属し、CSS の読み込みに失敗した場合でも機能します。
  • 宣言する lang 別途。 lang="ar" 暗示するものではありません dir="rtl"、 そしてその逆も同様です。両方を設定します。
  • 使用 dir="auto" ユーザー入力時。 フォーム フィールドと挿入された方向不明のテキスト（ユーザー名、コメント）は、実行時にその方向を検出する必要があります。

ページが LTR のままである間に、個々のブロックのみを RTL としてマークアップすると、あらゆる場所で位置合わせ、句読点、テーブルの順序と戦うことになります。上部に1 回設定します。

2。論理プロパティを持つCSSを書き込む

ほとんどの RTL バグは、“左” または “右” と表示される CSS から発生します。とカード padding-left: 24px アラビア語で左側にパッドを置き続け、それが端になります。

CSSの論理プロパティは、代わりにテキストの方向を基準としたレイアウトを記述します(MDN)。W3C はまさにこの理由でそれらを推奨しています: 使用 start そして end マージン、パディング、アライメント “ローカリゼーション中の方向変更の管理を容易にするため”。

物理的（避ける）論理（使用）
margin-leftmargin-inline-start
padding-rightpadding-inline-end
left: 0inset-inline-start: 0
text-align: lefttext-align: start
border-leftborder-inline-start
float: leftfloat: inline-start

Flexbox とグリッドはすでにドキュメントの方向に従っています。RTL ページの右側からフレックス アイテムの行が始まります。そのため、フレックスまたはグリッドと論理間隔を使用して構築されたレイアウトは、通常、追加の CSS をまったく使用せずに正しくミラーリングされます。

論理プロパティでは処理できないもの:

  • 変形し、装飾を配置します。 transform: translateX(10px) 両方向に右に移動します。
  • 背景の位置と勾配 を設定する left または right.
  • CSS シェイプまたは単一の SVG として描画されるアイコン それは方向を指します（ステップ 4 を参照）。

それらの場合は、方向セレクターを使用します:

[dir='rtl'] .chevron {
  transform: scaleX(-1);
}

3。コンテンツではなくレイアウトをミラーリングする

ページが反転すると、これらは反対側に移動します:

  • ロゴとプライマリ ナビゲーション（通常は右上）。
  • サイドバーとセカンダリコラム。
  • パンくずは右から左に読み取られ、区切り文字は左を向いています。
  • フォームラベル、必要なマーカー、検証アイコン。
  • 右から始まるテーブル列。
  • 左に進むカルーセルとページネーション。

これらはそのまま残ります:

  • 写真とイラスト。 Apple のヒューマン インターフェイス ガイドラインでは、写真やアートワークを反転しないようアドバイスしています。これは、“画像を反転すると画像の意味が変わることが多い”著作権の問題が発生する可能性があるためです。画像の内容が読み取り方向に依存する場合（インターフェースのスクリーンショットなど）、代わりにローカライズされたバージョンを作成します(アップルHIG).
  • ビデオおよびオーディオプレーヤー。 再生とは言語ではなくメディアの方向性を指します。
  • スクロールバー。 W3C ノートのスクロールバーの位置はブラウザの一部であり、ページではなくユーザーによって制御されます。

画像がタイムラインやランク付けされたリストなど、意味のある順序で表示されている場合は、各画像を反転するのではなく、順序を逆にしてください。

4。どのアイコンが反転するかを決定します

Appleのガイドラインは最も明確なルールを示しており、ウェブサイトでも同様に機能します(アップルHIG):

フリップ:

  • 戻る、次と前の矢印、およびアイテムを固定順序でナビゲートするもの。“RTL では、戻るボタンは右を指す必要があります”。
  • プログレスバーとスライダー。右から左に埋める必要があります。それに沿った数字の順序を逆にしますが、数字を反転することはありません。
  • テキストの位置合わせやリスト アイコンなど、テキストまたは読み取り方向を表すアイコン。
  • 前方または後方の動きを示すアイコン。

ひっくり返さないでください:

  • ロゴ、テキストを含むものでも。Apple は、ロゴが反転すると “人々を混乱させ、法的影響を与える可能性があります” と警告しています。
  • チェックマークなどのユニバーサルマーク。
  • 時計などの現実世界のオブジェクト。“どこでも同じように動作します”。
  • “正しく整列する” などの実際の方向を意味するコントロール。これは依然として右を指す必要があります。

実践的なアプローチ: デザイン システムの各アイコンに次のようにタグを付けます mirror または fixed 一度、単一の CSS ルールでフリップを適用します mirror セット。

5。数字、日付、混合テキストを処理します

数字。 「541」のような特定の数字、電話番号、またはクレジットカード番号の数字は、常に同じ順序で表示されると、Appleのガイダンスには記載されています。ヘブライ語は西暦アラビア数字（0〜9）を使用します。アラビア語のテキストは、西暦アラビア数字または東アラビア数字（٠〜9）を使用する場合があり、国や地域によって使用法が異なります。市場ごとに決定し、価格、日付、フォーム全体でその選択を一貫させてください。

混合方向。 アラビア語の文には、英語の製品名、URL、またはコードが含まれることがよくあります。ブラウザの双方向アルゴリズムではこれらの実行は配置されますが、その横に句読点が置かれると間違った側に配置される可能性があります。ユーザーが指定したフラグメントまたは未知の方向のフラグメントをラップします <bdi> またはそれらを与えます dir="auto"W3C が挿入テキストに対して示唆しているように。

タイトル。 RTL ページ タイトルがラテン文字（頭字語、ブランド）で始まる場合、W3C ノート ブラウザはタブやブックマークで間違った順序で表示する可能性があります。追加する &rlm; タイトルの先頭の（目に見えない右から左へのマーク）がそれを修正します。

6。スクリプトのフォントとサイズを選択します

アラビア文字は単語内の位置に応じて結合して形状が変わり、ヘブライ語とアラビア語には大文字がありません。デザインに対する 2 つの影響:

  • スクリプト用に作成されたフォントを選択します。 ラテン語の Web フォントはアラビア語のシステム フォントに戻りますが、多くの場合、一致していないように見えます。小さなサイズを暗示する専用のアラビア語またはヘブライ語フォントをロードします。
  • バランスサイズ。 Appleは、アラビア語やヘブライ語のテキストは、同じサイズの大文字のラテン語のテキストの隣では小さすぎるように見える可能性があり、RTLフォントサイズを約2ポイント増やすとバランスがとれることが多いと指摘している。
  • アラビア語の文字スペースを使用しないでください。 追加の追跡により、文字間の結合が切断されます。避ける text-transform: uppercase RTL テキストを保持する可能性のある要素については、そこでは効果がないため、強調のためにキャップに依存する設計には別の処理が必要です。
  • 異なるラインの高さを許容します。 アラビア文字ではドットやマークに垂直方向のスペースが多く使用されるため、ボタンで行の高さとクリップされたテキストをテストします。

7。実際のコンテンツと実際の読者とテストする

ラテン語のプレースホルダー テキストで満たされたモックアップは、ほとんどの RTL 問題を非表示にします。打ち上げ前:

  1. 実際の翻訳テキストを読み込む 最長の文字列、エラー メッセージ、電子メールなど、すべてのテンプレートに表示されます。
  2. 混合文字列をテストする: 英語のブランド名、URL、価格を含むアラビア語の文。
  3. フォームを最後までチェックします: 入力方向、プレースホルダーの配置、検証メッセージ、電話とカードのフィールド（左から右のまま）。
  4. モバイルでテストスワイプ ジェスチャとキャンバス外のメニューが右から開く必要があります。
  5. ネイティブの読者に尋ねてください 主な旅程をクリックするには。逆矢印やカンマの配置ミスを数秒で発見します。
  6. SEOの基本を言語ごとに維持する: 各 RTL 言語バージョンは独自の URL にあり、hreflang はそれを他の言語にリンクします。私たちのを参照してください 多言語SEOの概要.

ConveyThis が RTL 言語にどのように役立つか

ConveyThis サイトをアラビア語、ヘブライ語、ペルシア語、ウルドゥー語、およびサポートされている残りの 210 言語に翻訳し、各言語を独自の URL で提供します。右から左への言語の場合、ヘルプ記事に示すように、翻訳されたページを右から左に切り替える設定をオンにすることができます テキストの方向を変更する。オンにすると、翻訳されたページは次のように設定されます dir="rtl" 右揃えのテキストを使用しますが、元の言語のページは構築時に残されます。

その設定ではできないことは、スタイルシートがいっぱいになっていることを修正することです left そして right。CSS がクリーンであればあるほど（ステップ 2 から 4)、自動スイッチの動作が向上します。言語作業自体については、ビジュアル エディターで機械翻訳を改良したり、ブランド用語を用語集と一致させたり、言語ごとに画像を交換したりできます 画像とメディアの翻訳。のステップバイステップガイド ウェブサイトをアラビア語に翻訳する 言語の選択から起動までのプロセスをカバーします ローカリゼーションの概要 ConveyThis が翻訳を超えた部分をどのように処理するかを説明します。

よくある質問

WebデザインにおけるRTLとは何ですか？

RTL（右から左）デザインは、アラビア語やヘブライ語など、右から左に読むスクリプトに合わせて Web サイトを適応させます。これは、ページ上に dir=“rtl”を設定し、レイアウトと方向アイコンをミラーリングし、ロゴ、数字、メディア コントロール、写真を変更しないことを意味します。

RTL の方向を CSS で設定するべきでしょうか、それとも HTML で設定するべきでしょうか？

HTML で。W3C では、方向はコンテンツの意味の一部であり、スタイルシートがなくても機能する必要があるため、HTML 要素に dir=“rtl” を追加し、CSS を使用して基本方向を設定しないことをお勧めします。

RTL でミラーリングすべきではないアイコンはどれですか？

ロゴ、チェックマークなどのユニバーサルマーク、時計などの現実世界のオブジェクトのアイコン、実際の方向を示すコントロール、メディア再生コントロール。ナビゲーションと進行状況の矢印をミラーリングする必要があります。

数字はアラビア語で右から左に書かれていますか？

いいえ。アラビア語とヘブライ語のテキストでは、数字内の数字の順序は同じままです。アラビア語では国に応じて西アラビア数字または東アラビア数字が使用される場合がありますが、数字の順序が逆転することはありません。

CSS の論理プロパティは、すべての最新のブラウザで動作しますか？

はい、margin-inline-start、padding-inline-end、text-align: start などのコア論理プロパティは、現在のすべての主要ブラウザでサポートされています。MDN に依存する前に、MDN 上の新しいプロパティまたはあまり一般的ではないプロパティを確認してください。

翻訳から始めましょう

クリーンな RTL レイアウトには、その背後に正確なアラビア語またはヘブライ語のコンテンツが必要です。できる ConveyThis アカウントを作成します右から左への言語を追加し、自分のページで結果を確認します。

シェア:
G2 High Performer Spring 2023
G2 Easiest Setup Fall 2024
G2 Best Support Spring 2025