ビジュアルフォーマットモデル

フロート, 絶対位置指定の要素, ブロックボックスではないブロックコンテナー (インラインブロック, テーブルセル, テーブルキャプションなど), および 'overflow' が 'visible' 以外のブロックボックス (その値がビューポートに伝播されている場合を除く) は、そのコンテンツに対して新しいブロックフォーマットコンテキストを確立します。

親フォーマットコンテキストがブロックフォーマットコンテキストでない場合、ブロックコンテナボックスは新しいブロックフォーマットコンテキストを確立します。それ以外の場合は、ブロックフォーマットコンテキスト自体に参加するときに、そのコンテンツの新しいブロックフォーマットコンテキストを確立するか、他のプロパティの制約によって決定されるように、参加するコンテキストを継続します。

行ボックスの幅は、包含ブロックとフロートの存在によって決まります。行ボックスの高さは、行の高さの計算に関するセクションで示されている規則によって決まります。
行ボックスは常に、その中に含まれるすべてのボックスを収容できる高さです。ただし、その中に含まれる最も高いボックスよりも高くなる場合があります (たとえば、ボックスがベースラインを揃えるように配置されている場合)。ボックス B の高さが、それを含む行ボックスの高さよりも低い場合、行ボックス内の B の垂直方向の配置は、「vertical-align」プロパティによって決定されます。複数のインライン レベル ボックスが 1 つの行ボックス内に水平方向に収まらない場合、それらは 2 つ以上の垂直方向に積み重ねられた行ボックスに分散されます。したがって、段落は行ボックスの垂直方向の積み重ねです。行ボックスは垂直方向に分離されることなく積み重ねられ (他の場所で指定されている場合を除く)、重なり合うことはありません。
一般に、行ボックスの左端は包含ブロックの左端に接し、右端は包含ブロックの右端に接します。ただし、フローティング ボックスは包含ブロックの端と行ボックスの端の間に来ることがあります。したがって、同じインライン書式設定コンテキスト内の行ボックスは一般に同じ幅 (包含ブロックの幅) を持ちますが、フロートによって使用可能な水平方向のスペースが削減されると、幅が変わることがあります。同じインライン書式設定コンテキスト内の行ボックスは一般に高さが変わります (たとえば、1 つの行に背の高い画像が含まれ、他の行にはテキストのみが含まれる場合があります)。
行のインライン レベル ボックスの合計幅が、それらを含む行ボックスの幅よりも小さい場合、行ボックス内でのそれらの水平方向の配置は、「text-align」プロパティによって決定されます。そのプロパティの値が「justify」の場合、ユーザー エージェントは、インライン ボックス内のスペースと単語も伸ばすことができます (ただし、インライン テーブル ボックスとインライン ブロック ボックスは伸ばしません)。

インライン フォーマットコンテキストは、ブロックレベルボックスを含まないブロックコンテナーボックスによって確立されます。

インラインレベルのコンテンツのみを含むブロックコンテナボックスは、新しいインラインフォーマットコンテキストを確立します。次に、要素は、すべてのインラインコンテンツをラップするルートインラインボックスも生成します。
尚、この処理を簡素にする為に、インラインレベルとブロックレベルが混在する場合は、そのインラインレベルのボックスを連続する纏まりで匿名のブロックボックスで囲みます。これにより、この匿名のブロックボックスの外はブロックレベルのみとなり、内はインラインレベルのみとなります。
他にも、インラインレベルのボックスがないブロックコンテナにテキストがある場合に、このテキストを覆う匿名のインラインボックスが生成されます。これにより、このテキストもなんらかの形でインラインフォーマットコンテキストに参加する事になります。

列は明示的に指定されるのではない点がポイントと思います。二列目だけをコピペなど出来ないし、二列目と三列目の入れ替えは個々のセルの順番の入れ替えで行わなければならず大変です。この事からも、事前の設計が大事という事です。

要素の内部表示タイプがルビで、外部表示タイプがインライン以外の場合、必要な外部表示タイプの主ボックスとインラインレベルのルビコンテナーの 2つのボックスが生成されます。 要素で指定されたすべてのプロパティは主ボックスに適用されます(継承可能な場合は、ルビコンテナーボックスに継承されます)。 これにより、内部のルビ構造を正しく維持しながら、要素をブロックとしてスタイル設定できます。

CSSモデルでは、ドキュメント言語にこれらの各コンポーネントに対応する要素が含まれている必要はありません。 構造の欠落部分は、表の正規化に使用されるものと同様の匿名ボックス生成ルールによって暗示されます。

ルビコンテナボックス(ruby container box.)

displayプロパティが、ruby の時、要素がルビコンテナボックスを生成します。

ruby要素のdisplayプロパティの既定値が、rubyです。

ルビコンテナは非アトミックなインラインレベルボックスです。通常のインラインボックスと同様に、ルビコンテナは行をまたいで分割され、その包含ブロックは最も近いブロックコンテナの祖先です。インラインボックスのコンテンツがインラインボックス自体を含む同じインラインフォーマットコンテキストに参加するのと同様に、ルビコンテナとその基本レベルのコンテンツはルビコンテナ自体を含む同じインラインフォーマットコンテキストに参加します。

ただし、ルビコンテナは、注釈をホストするために、インラインフォーマットコンテキストのセグメントの周りにさらに構造を構築するルビフォーマットコンテキストも確立します。注: このフォーマットコンテキストは独立したフォーマットコンテキストではありません。ルビベース, ルビ注釈, ルビベースコンテナー, およびルビ注釈コンテナーは、内部ルビボックスです。内部テーブル要素と同様に、ルビレイアウトで特定の役割を持ち、ルビコンテナーのルビ書式設定コンテキストに参加します。ルビ書式設定コンテキストでの役割に加えて、ルビベースはルビコンテナーと同じベースレベルのインライン書式設定コンテキストに同時に参加しますが、ルビ注釈はルビコンテナーによって確立された別の注釈レベルのインライン書式設定コンテキストに参加します。

インラインボックスの内容と同様に、ルビコンテナー(およびそのすべての内部ルビボックス) の内容の包含ブロックは、ルビコンテナーの包含ブロックです。したがって、たとえばフロートは、ルビボックスタイプではなく、ルビコンテナーの包含ブロックによってトラップされます。

ルビベースボックス(ruby base box.)

displayプロパティが、ruby-base の時、要素がルビベースボックスを生成します。

ルビベースボックスは、内部ルビボックスです。ルビレイアウトで特定の役割を持ち、ルビコンテナのルビフォーマットコンテキストに参加します。ルビフォーマットコンテキストでの役割に加えて、ルビベースは、ルビコンテナと同じベースレベルのインラインフォーマットコンテキストに同時に参加します

rb要素のdisplayプロパティの既定値が、ruby-baseです。ただ、HTML Living Standard ではこの要素は採用されていません。 構造の欠落部分は、匿名ボックス生成ルールによって暗示されます。この場合は、匿名のルビベースでラップされます。

ルビ注釈ボックス(ruby annotation box.)

displayプロパティが、ruby-text の時、要素がルビ注釈ボックスを生成します。

ルビ注釈ボックスは、内部ルビボックスです。ルビレイアウトで特定の役割を持ち、ルビコンテナのルビフォーマットコンテキストに参加します。ルビフォーマットコンテキストでの役割に加えて、ルビ注釈は、ルビコンテナによって確立された別の注釈レベルのインラインフォーマットコンテキストに参加します。

rt要素のdisplayプロパティの既定値が、ruby-textです。

ルビベースコンテナボックス(ruby base container box.)

displayプロパティが、ruby-base-container の時、要素がルビベースコンテナボックスを生成します。

ルビベースコンテナボックスは、内部ルビボックスです。ルビレイアウトで特定の役割を持ち、ルビコンテナのルビフォーマットコンテキストに参加します。

rbc要素のdisplayプロパティの既定値が、ruby-base-containerです。ただ、HTML Living Standard ではこの要素は採用されていません。 構造の欠落部分は、匿名ボックス生成ルールによって暗示されます。この場合は、匿名のルビコンテナでラップされます。

ルビ注釈コンテナボックス(ruby annotation container box.)

displayプロパティが、ruby-text--container の時、要素がルビ注釈コンテナボックスを生成します。

ルビ注釈コンテナボックスは、内部ルビボックスです。ルビレイアウトで特定の役割を持ち、ルビコンテナのルビフォーマットコンテキストに参加します。

rtc要素のdisplayプロパティの既定値が、ruby-text--containerです。ただ、HTML Living Standard ではこの要素は採用されていません。 構造の欠落部分は、匿名ボックス生成ルールによって暗示されます。この場合は、匿名のルビコンテナでラップされます。