このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

“CSS Inline Layout Module”

記事Sep.21st, 2021
CSS3でテキストやインライン・レベルのボックスの行の中でのレイアウト方法に関する仕様を定義した“CSS Inline Layout Module”について。

仕様書の概要

概要

CSS Inline Layout Module”はテキストやインライン・レベルのボックスのレイアウト方法について定義している仕様書です。

テキストやインライン・レベルのボックスの行の中でのブロック軸方向の整列や大きさの計算の方法とドロップキャップなどの頭文字の特別なレイアウトについて定義しています。

用語など

インライン・レイアウト

インライン・ボックスアトミック・インラインなどのインライン・レベルのコンテンツを直接内包するブロック・コンテナはそのコンテンツを配置するためのインライン整形コンテキストを生成します。ブロック・コンテナコンテント・ボックスの縁はこのインライン整形コンテキストに参加しているインライン・レベルのボックスの包括ブロックとなります。

ブロック・コンテナはすべてのインライン・レベルのコンテンツを内包するインライン・レベルアノニマス・ボックスである“ルート・インライン・ボックス(Root Inline Box)”を生成します。これによってテキストはルート・インライン・ボックスに直接内包されるか、もしくはルート・インライン・ボックスの子孫となるボックスのどちらかに必ず内包されます。ルート・インライン・ボックスのスタイルはその親となるブロック・コンテナから継承されますが、直接スタイルを適用することはできません。

インライン・レイアウトのイメージ

インライン整形コンテキストの中ではコンテンツはインライン軸に沿ってユニコードの双方向(BiDi)アルゴリズムに制御される順序で並べられ、“CSS Text Module”に定義された方法で配分されます。ボックスを配置する際にはインライン軸方向のマージンボーダーパディングが考慮され、マージンの折り畳みは起こりません。インライン・レベルのコンテンツを配列した時に一つ一つの行を形成する長方形上の領域は“行ボックス(Line Box)”と呼ばれます。

行ボックス

行ボックス(Line Box)”はインライン整形コンテキストの中でインライン・レベルのコンテンツを内包するために生成されます。

行ボックスのイメージ

インライン・ボックスが行ボックスの長さよりも長い場合や、強制ライン・ブレイクがある場合にはインライン・ボックスは分割され、複数の行ボックスに分配されます。行ボックスはマルチカラム・レイアウトにおけるカラム・ボックスと同じように断片化コンテナであり、CSSのボックス・ツリーの一部ではありません。

行ボックスはブロック・コンテナに直接内包され、複数の行ボックスがあればブロック軸方向に順番に配置されます。複数の行ボックスは間をあけずに配置され、重なり合うこともありません。ブロック・コンテナでブロック軸方向に空間が余っているようであればalign-content”プロパティで指定された方向へ寄せて配置されます。

通常は行ボックスの始端と終端はそれぞれ包括ブロックの反対の端に接するため、行ボックスの長さは包括ブロックインライン軸方向の大きさと一致します。浮動化されたボックス(float: none;でない)や頭文字ボックス(initial-letter: normal;でない)がある場合にはこれらは包括ブロックと行ボックスの間に配置されるので、行ボックスはその分だけ短くなります。

浮動化要素と行ボックスのイメージ

行ボックスのブロック軸方向の大きさは行ボックスに内包されるコンテンツに合うように計算され、line-height”プロパティtext-edge”プロパティによって制御されます。ブロック・コンテナの中で最初もしくは最後の行ボックスはleading-trim”プロパティによって一部を切り取ることができます。

行ボックスの中にあるインライン・レベルのボックスはvertical-align”プロパティの指定に従って行ボックスの中でのブロック軸方向の位置が揃えられ、テキストのベースラインに揃えられたり、ボックスの上端や下端が揃えられたりします。

ホワイトスペースの処理後に残されたホワイトスペースやテキスト、マージンボーダーパディングが“0”ではなくフロー内のコンテンツを含むインライン・ボックス、いずれも含まず、強制ライン・ブレイクで終わらない行ボックスは高さ“0”の行ボックスとなります。このような行ボックスはその中にあるコンテンツの配置位置を計算する際には考慮されますが、それ以外の用途では存在しないように扱われます。

インライン・レベルのコンテンツは次の手順に沿ってそれぞれ行ボックスの中に配置されます。

  1. 行ボックスの中にあるすべてのインライン・レベルのボックスのレイアウト・バウンドを計算します。
    置換要素やインライン・ブロック(display: inline-block;)のようなアトミック・インライン
    レイアウト・バウンドマージン・ボックスです。
    ルート・インライン・ボックスtext-edge: leading;であるインライン・ボックス
    マージンボーダーパディングをすべて無視したline-height”プロパティ使用値をもとにレイアウト・バウンドを計算します。
    上記以外のインライン・ボックス
    マージンボーダーパディングをすべて含み、text-edge”プロパティで指定されたメトリックをもとにレイアウト・バウンドを計算します。
  2. インライン・レベルのボックスはvertical-align”プロパティdominant-baseline”プロパティの指定に従ってブロック軸方向の位置が揃えられます。baseline-shift”プロパティの値が行相対値である場合は行ボックスの大きさが最小になるように揃えます。
  3. 行ボックスのブロック軸方向の大きさはすべてのインライン・レベルのボックスのレイアウト・バウンドをちょうど内包できるように計算されます。
  4. ルート・インライン・ボックスの整列済サブツリーとvertical-align”プロパティの値が行ボックス相対値であるボックスが行ボックスに合わせて配置されます。

インライン・ボックスの“整列済サブツリー(Aligned Subtree)”はそのインライン・ボックス自身のレイアウト・バウンドalignment-baseline”プロパティ計算値が行相対値でない子孫インライン・ボックスの整列済サブツリーを含みます。整列済サブツリーの上端は整列済サブツリーに含まれる一番高いレイアウト・バウンドの上端と一致し、整列済サブツリーの下端は整列済サブツリーに含まれる一番低いレイアウト・バウンドの下端と一致します。

ベースライン

“ベースライン”とは?

ベースライン(Baseline)”は行ボックスのインライン軸に平行な線で、個々の文字はベースラインに揃えられます。ベースラインはフォントに含まれる文字のデザインの基準になるほか、異なるフォントの文字や大きさが異なる文字を行としてレイアウトする際の基準になります。

ベースラインのイメージ

異なる言語の文字はそれぞれ好ましいベースラインが異なります。

好ましいベースラインのイメージ

フォントにはそのフォントの座標空間の中で1個もしくは複数のベースラインの位置を示す“ベースライン・テーブル(Baseline Table)”があり、フォントに含まれるすべての文字のベースラインの位置が決められています。フォントには横書きや縦書き用に別々のベースライン・テーブルが用意されている場合があります。ユーザー・エージェントは書字方向が縦書きの場合にのみ縦書き用のベースライン・テーブルを使用し、それ以外の場合には横書き用のベースライン・テーブルを使用することが求められています。また、フォントには同じ書字方向用にも複数のベースライン・テーブルがある場合がありますが、font-language-override”プロパティによる設定やコンテンツが記述されている言語に応じて適切なものを選択することが求められています。

ベースライン・テーブルに含まれるベースライン

文字やボックスのベースライン

それぞれのフォント、文字、インライン・レベルのボックスはそれぞれのベースライン・タイプのブロック軸での位置を示す“ベースライン・セット(Baseline Set)”を持ちます。ベースライン・セットの中に含まれるもののうち、文字やボックスを整列するために使用されるベースラインを“アラインメント・ベースライン(Alignment Baseline)”と言います。

個々の文字のベースライン・セットはフォントのベースライン・テーブルから取られます。インライン・ボックスのベースライン・セットは最初の使用可能なフォントから取られます。この時、そのボックスに実際に最初の使用可能なフォントの文字が描画されるかどうかは関係ありません。必要なメトリックが欠落している場合はユーザー・エージェントはベースラインを合成します。

アトミック・インラインの場合はインライン整形コンテキストのインライン軸方向のベースライン・セットがなければアラインメント・ベースラインはマージン・ボックスから合成されます。

他のボックスの場合はベースライン・セットはalignment-baseline”プロパティや参加する整形コンテキストの規則に従ってボックスのコンテンツから取られます。

メトリック

ベースライン・タイプ

CSSではテキストの以下のメトリックをもとにしたベースラインをボックスの整列や大きさの計算、頭文字のレイアウトなどのインライン・レイアウトの基準として使用します。

ベースライン・タイプ 説明
alphabetic ラテン文字やキリル文字、ギリシャ文字など多くの文字で使用され、多くの字の下端に対応します。 (フォントをデザインする時の座標系で多くの場合に“0”となり、OpenTypeフォントでは“romn”で指定されます。)
cap-height ラテン文字やキリル文字、ギリシャ文字などの文字で大文字の上端に対応します。 (OpenTypeフォントでは“sCapheight”で指定されます。)
x-height ラテン文字やキリル文字、ギリシャ文字などの文字で小文字の上端に対応します。 (OpenTypeフォントでは“sxheight”で指定されます。)
x-middle alphabetic”と“x-height”の中間線に対応します。
ideographic-over 漢字、仮名、ハングルの仮想ボディの上端に対応します。 (OpenTypeフォントでは“idtp”で指定されます。)
ideographic-under 漢字、仮名、ハングルの仮想ボディの下端に対応します。 (OpenTypeフォントでは“ideo”で指定されます。)
central ideographic-under”と“ideographic-over”の中間線に対応します。
ideographic-ink-over 漢字、仮名、ハングルの平均字面の上端に対応します。 (OpenTypeフォントでは“icft”で指定されます。)
ideographic-ink-under 漢字、仮名、ハングルの平均字面の下端に対応します。 (OpenTypeフォントでは“icfb”で指定されます。)
hanging チベット文字、デーヴァナーガリー、ベンガル文字、グルムキー文字のような横線からぶら下がっているような文字のベースラインに対応します。 (OpenTypeフォントでは“hang”で指定されます。)
math 数学の記号が配置される中央のベースラインに対応します。 (OpenTypeフォントでは“math”で指定されます。)
text-over インライン・ボックスコンテント・ボックスの上縁に対応します。
text-under インライン・ボックスコンテント・ボックスの下縁に対応します。
em-over em-over”と“em-under”が1emになるように算出された仮想のアセント・メトリックに対応します。
em-under em-over”と“em-under”が1emになるように算出された仮想のディセント・メトリックに対応します。
CSSのベースライン・タイプのイメージ

これらのメトリックは適切なフォントのものが使用されますが、メトリックが欠落している場合やテキストではなくボックスから取らなければならない場合はユーザー・エージェントはベースラインを合成します。

アセント・メトリックとディセント・メトリック

文字のベースラインよりも上にある部分の高さは“アセント・メトリック(Ascent Metric)”、文字のベースラインよりも下にある部分の高さは“ディセント・メトリック(Descent Metric)”とそれぞれ呼ばれ、インライン整形コンテキストでテキストやボックスをレイアウトするために使用されます。アセント・メトリックとディセント・メトリックはフォントに含まれるすべての文字に共通であり、個々の文字の高さの違いには対応しません。

アセント・メトリックとディセント・メトリックのイメージ

ユーザー・エージェントはOpenTypeやTrueTypeのOS/2テーブルに含まれる“sTypoAscender”と“sTypoDescender”をもとにアセント・メトリックとディセント・メトリックを求めることが推奨されています。また、これらのメトリックが欠落している場合は代わりにHHEAテーブルの“ascender”と“descender”を使用されるべきだとしています。

ラインギャップ・メトリック

フォントには好ましい行間の大きさの情報が含まれることがあり、“ラインギャップ・メトリック(Line gap metric)”と呼ばれます。ラインギャップ・メトリックはline-height: normal;の場合に行ボックスのブロック軸方向の大きさを計算する際に使用されます。OpenTypeではラインギャップ・メトリックはOS/2テーブルの“sTypoLineGap”かHHEAテーブルの“lineGap”で指定されます。

ベースラインやメトリックの合成

テキストのベースライン

フォントにテキストを整列するのに必要なメトリックが含まれていない場合には以下の方法を代わりに使用します。

いくつかのメトリックは関連しているため、その関係性から欠落している仮定的にメトリックを求めることができる場合があります。フォント自体に算出方法が定義されていない場合には以下の手順で算出することができます。

  1. central”ベースラインは“ideographic-under”ベースラインと“ideographic-over”ベースラインの中間なので、3つのうちのいずれかが欠落している場合は他の2つを使用して残りを算出します。
  2. ideographic-under”ベースラインと“ideographic-over”ベースライン、“central”ベースラインのうちいずれか1つしか設定されていない場合には“ideographic-under”ベースラインと“ideographic-over”ベースラインの間が1emだと仮定して他の2つを算出します。
  3. descent”ベースラインと“ascent”ベースラインが設定されていない場合はそれぞれ“ideographic-under”ベースラインと“ideographic-over”ベースラインと同じと仮定してこれら2つを算出します。

メトリックは文字の形状から算出することもできます。

  1. マイナス記号(U+2212、“−”)の中央は“math”ベースラインを算出するのに使用できます。
  2. 小文字の“o”の“alphabetic”ベースラインよりも下の部分の高さを“o”の上端から引くことで“x-height”ベースラインを算出できます。
  3. 大文字の“O”の“alphabetic”ベースラインよりも下の部分の高さを“O”の上端から引くことで“cap-height”ベースラインを算出できます。
  4. 漢字の“永(U+6C38)”のバウンディング・ボックスは“ideographic-under”ベースラインと“ideographic-over”ベースラインを算出するのに使用できます。
  5. ヘブライ文字の“ה(U+05D4)”の上縁はヘブライ文字の“hanging”ベースラインを算出するのに使用できます。
  6. デーヴァナーガリーの“क(U+0915)”、ベンガル文字の“ক(U+0995)”、グルムキー文字の“ਕ(U+0A15)”、チベット文字の“ཀ(U+0F40)”の上縁はそれぞれの文字の“hanging”ベースラインを算出するのに使用できます。

他に以下の代替値を使用することもできます。

  1. x-height”ベースラインは0.5emの位置と仮定できます。
  2. cap-height”ベースラインは0.66emの位置と仮定できます。
  3. hanging”ベースラインは0.6emの位置と仮定できます。

アトミック・インラインのベースライン

置換要素やインライン・ブロック(display: inline-block;)、インライン・テーブル(display: inline-table;)のようなアトミック・インラインの場合はインライン整形コンテキストのインライン軸方向のベースライン・セットがなければアラインメント・ベースラインは以下のようにそのマージン・ボックスから合成されます。

次のベースラインはマージン・ボックスのライン・オーバー側の縁にあると仮定します。

  • text-under”ベースライン
  • ideographic-under”ベースライン
  • ideographic-ink-under”ベースライン
  • alphabetic”ベースライン

次のベースラインはマージン・ボックスのライン・アンダー側の縁とライン・オーバー側の縁の中間にあると仮定します。

  • central”ベースライン
  • math”ベースライン
  • x-middle”ベースライン

次のベースラインはマージン・ボックスのライン・アンダー側の縁にあると仮定します。

  • text-over”ベースライン
  • ideographic-over”ベースライン
  • ideographic-ink-over”ベースライン
  • cap-height”ベースライン
  • hanging”ベースライン
  • x-height”ベースライン

em-over”ベースラインと“em-under”ベースライン

central”ベースライン、“ideographic-under”ベースライン、“ideographic-over”ベースラインのいずれかが設定されていれば“em-over”ベースラインは“central”ベースラインの0.5em上、“em-under”ベースラインは“central”ベースラインの0.5em下の位置です。 そうでなければ、

アセント・メトリックディセント・メトリックを比率が変わらないようにしながら和が1emになるように増減され、その結果のアセント・メトリックを“em-over”ベースライン、ディセント・メトリックを“em-under”ベースラインの位置とします。

ベースライン基準の整列

CSSの整形コンテキストでは通常はボックスはそのボックスを内包するコンテナの縁に合わせるようにしてレイアウトされますが、インライン・レイアウトではボックスはブロック軸方向にはそれぞれのベースラインが揃うようにレイアウトされます。

文字とインライン・レベルのボックスはまずそれぞれのアラインメント・ベースラインが親ボックスの“ドミナント・ベースライン(Dominant Baseline)”に揃うように配置された後、baseline-shift”プロパティで指定された位置に移動されます。アラインメント・ベースラインalignment-baseline”プロパティによって指定され、既定では親ボックスのdominant-baseline”プロパティで指定されたものと同じベースライン・タイプです。

インライン・ボックスと行ボックスの高さ

行ボックスのブロック軸方向の大きさはその中に含まれるインライン・ボックスの“レイアウト・バウンド(Layout Bounds)”をすべてちょうど含むことができるように計算されます。

レイアウト・バウンドと行ボックスの大きさのイメージ

レイアウト・バウンドは常にインライン・ボックスのコンテンツであるテキストのメトリックをもとに算出され、text-edge”プロパティline-height”プロパティによって制御されます。子ボックスの位置や大きさはレイアウト・バウンドには影響しません。

レイアウト・バウンドを算出するためにはまずそのインライン・ボックスに直接内包される文字をdominant-baseline”プロパティで指定されたドミナント・ベースラインに揃えます。インライン・ボックスに含まれる文字がない場合やフォールバック・フォントの文字しかない場合には最初の使用可能なフォントと同じメトリックを持つ幅が“0”の透明な文字である“ストラット(Strut)”を含むものとして扱います。

ここで、“A”は文字のベースラインより上にある部分の高さ、“D”は文字のベースラインより上にある部分の高さをそれぞれ表します。text-edge”プロパティで他のメトリックが使用されるように指定されていなければ、“A”はアセント・メトリック、“D”はディセント・メトリックをそれぞれ参照します。

line-height: normal;”の場合

line-height”プロパティ計算値が“normal”である場合、レイアウト・バウンドは最も大きい“A”と最も大きい“D”を内包できるように算出されます。

インライン・ボックスルート・インライン・ボックスであるか、text-edge: leading;である場合はライン・ギャップ・メトリックがあればの半分を“ハーフリーディング”として“A”と“D”にそれぞれ付け加えます。

レイアウト・バウンドのイメージ

line-height: normal;”でない場合

line-height”プロパティ計算値が“normal”でない場合にはレイアウト・バウンドは最初の使用可能なフォントのメトリックのみに基づいて算出され、それ以外のフォントのメトリックは考慮されません。また、“リーディング(Leading)”によって“A”と“D”の和がline-height”プロパティ使用値になるように調節されます。

リーディングは“L”として表し、line-height”プロパティ使用値から“A + D”を減算した値です。

リーディングの半分である“L / 2”は“ハーフリーディング(Half-leading)”と呼ばれ、ハーフリーディングを最初の使用可能なフォントの“A”と“D”にそれぞれ付け加えられます。

レイアウト・バウンドはハーフリーディングを付け加えた“A”と“D”をちょうど内包できるように算出されます。

レイアウト・バウンドのイメージ

text-edge: leading;でない場合はマージンボーダーパディングによって拡大されます。

互換モードではボーダーパディングが“0”であり、直接テキストやホワイトスペース処理後も残ったホワイトスペースを含まないインライン・ボックスの断片は行ボックスの大きさを計算する際には無視されます。

定義されているCSSルール

プロパティ

プロパティ 説明
dominant-baseline:
vertical-align:
baseline-source:
alignment-baseline:
baseline-shift:
line-height: 行の高さを指定する
text-edge:
leading-trim:
inline-sizing:
initial-letter:
initial-letter-align:
initial-letter-wrap:
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク