“CSS Inline Layout Module”

概要

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

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

仕様書

定義されているプロパティ

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

インライン・レイアウト

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

ブロック・コンテナはすべてのインライン・レベルのコンテンツを内包するインライン・レベルのアノニマス・ボックスである“ルート・インライン・ボックス(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ではテキストの以下のメトリックをもとにしたベースラインをボックスの整列や大きさの計算、頭文字のレイアウトなどのインライン・レイアウトの基準として使用します。

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

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

文字のベースラインよりも上にある部分の高さは“アセント・メトリック(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”であり、直接テキストやホワイトスペース処理後も残ったホワイトスペースを含まないインライン・ボックスの断片は行ボックスの大きさを計算する際には無視されます。

プロパティ