書字方向の概要

ブロックとインライン

様々な文字体系の方向性を検討する前に、「ブロック」と「インライン」という用語を理解することが重要です。インラインとは、文字や単語が 1 行内でどのように流れるかを指します。ブロックとは、行、つまりコンテンツのブロックが互いにどのように積み重なるかを指します。文書の書式モードによって、その文書のブロック方向とインライン方向が決まります。これらは左、右、上、下といった物理的な方向に基づくものではありません。

次元と方向

ウェブページ上のすべての要素は、インラインまたはブロックのどちらかの次元に沿って配置されます。「インライン次元」とは、現在の書字方向においてテキスト行が流れる方向の次元を指し、一方「ブロック次元」とは、段落などのブロックが連続して表示される方向の次元を指します。インライン次元はブロック次元に対して垂直です。

英語の文書では、テキストが水平方向に左から右へ流れ、アラビア語文書では水平方向に右から左へ流れるため、どちらの文書でもインライン方向は水平であり、「インライン方向」はそれぞれ左から右、右から左となります。 どちらの場合も、ブロック方向は垂直であり、「ブロック方向」は上から下となります。日本語などの縦書きモードでは、行が縦方向に流れるためインライン方向は垂直となり、ブロック方向は水平となります。

インラインボックスとブロックボックス

ボックスの「外側の表示型は」、通常のフローレイアウトにおいて、ページ上の他の要素とどのように振る舞うかを決定します。「インラインボックス」はテキストの各行を折り返し、インライン次元に沿って配置されます。

「ブロックボックス」は、ページ上で他のブロック要素やインライン要素を収容できるコンテナーを表します。これらはブロック次元に沿って配置され、インライン次元ではコンテナー内の利用可能な空間をすべて埋めるように拡張されます（inline-size などのプロパティでインライン次元に特定のサイズが設定されていない場合）。ブロックボックスは、英語のようにテキストを水平方向に表示する書字方向を使用している場合にのみ、ページの上から下へと表示されます。

CSS 論理的プロパティと値モジュールでは、CSS の多くの物理的プロパティにおいてフロー関連マッピングを定義しており、これは論理的プロパティと値の基本概念を理解する上で役立ちます。

インライン基本方向とブロックフロー方向

「インライン基本方向」は、行のコンテンツが配置される主要な方向であり、行の「先頭」と「末尾」を定義します。direction プロパティはボックスのインライン基本方向を指定し、unicode-bidi プロパティおよびテキストコンテンツの固有の方向性と合わせて、行内のインラインレベルコンテンツの順序を決定します。

「ブロックフロー方向」とは、ブロックコンテナー内でブロックレベルボックスと行ボックスが積み重ねられる方向を指します。この方向は、writing-mode プロパティによって決定されます。

文字体系の書字方向

文字体系が異なれば、書字方向も異なります。 横書きとは、テキストが水平方向に並ぶ方式、すなわちブロックの流れる方向が下向きまたは上向きの方式です。 縦書きとは、テキストが垂直方向に並ぶ方式、すなわちブロックの流れる方向が左向きまたは右向きの方式です。

ラテン系およびスラブ系の文字体系は、通常、インライン方向が左から右で、ブロック方向が上から下で記述されます。ラテン系言語には英語、スペイン語、ルーマニア語、ポルトガル語があります。スラブ系言語にはウクライナ語、ポーランド語、チェコ語があります。

<p lang="en-US" dir="auto">This is written in English</p>
<p lang="lt-LT" dir="auto">Tai parašyta lietuviu kalba</p>
<p lang="el-GR" dir="auto">Αυτό είναι γραμμένο στα ελληνικά</p>

アラビア文字系の文字体系は、通常、インライン方向が右から左、ブロック方向が上から下となるように記述されます。水平方向の右書き言語には、アラビア語、アラム語、アゼルバイジャン語、ディベヒ語、フラ語、ヘブライ語、クルド語、ンコ語、ペルシア語、ロヒンギャ語、シリア語、ウルドゥー語などがあります。

<p lang="ur-PK" dir="auto">یہ اردو میں لکھا ہے۔</p>
<p lang="ku-CRB" dir="auto">ئەمە بە کوردی نووسراوە</p>

漢字系の文字体系は、一般的にインライン方向は左から右で、ブロック方向は上から下へ、あるいはインライン方向は上から下で、ブロック方向は右から左へと記述されます。伝統的に、中国語、ベトナム語、韓国語、日本語は縦書きで列ごとに上から下へ、ブロック方向は右から左へと記述されますが、オンラインでは横書きで左から右へと表示されることがよくあります。

<p lang="ja-JP" dir="auto">これは日本語で書かれています</p>

モンゴル語系の文字体系は通常、上から下へ縦書きで、左から右へ流れる列で記述されます。つまり、上から下へのインライン方向と左から右へのブロック方向の組み合わせです。これは中国語、日本語、韓国語の縦書きテキストが右から左へ読むのとは異なります。この特徴は、モンゴル文字が左から右へ書かれた古ウイグル文字から派生したことに由来します。

<p lang="mn-MONG" dir="auto">Үүнийг монгол хэлээр бичжээ</p>

書字方向を正しく表現するために、HTML のグローバル属性 dir を使用します。ブラウザーは CSS スタイルを無効にできるため、スタイルシートが存在しない場合に正しい双方向レイアウトを確保するには、CSS の direction プロパティよりも、dir 属性と <bdo> 要素の使用が推奨されます。

縦書きの言語では、writing-mode および text-orientation プロパティを使用します。

[lang|="ja"] {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
[lang|="mn"] {
  writing-mode: vertical-lr;
  text-orientation: sideways;
}

[lang|="ja"],
[lang|="mn"] {
  float: left;
}

書字方向の混在

これらの異なる言語はそれぞれ異なる書字方向を有しますが、主に一つの書字方向を使用するサイトでも、別の言語や書字方向のコンテンツを含む場合があります。例えば、アラビア語（右から左へ書く言語）のニュースサイトの記事には、左から右へ書くラテン数字が含まれることがあります。多くの雑誌や新聞では、同一ページ上で異なる書字方向が混在しています。異なる書字方向を示すこのガイドも同様です。

組版モードは、縦書き文字に対して縦書き専用の組版規則を使用するか（縦書き組版モード）、横書きモードの組版規則を使用するかを決定します。この概念により、縦書き組版と回転した横書き組版が区別されます。

書字方向の text-orientation 成分は、縦書きの組版モードにおける文字の向きを制御し、特定の組版文字単位を縦書きで組版するか横書きで組版するかを決定します。

関連情報

• CSS 書字方向モジュール