Inner and outer display typesにて、inner display type はformatting contextについて定義し、子孫となるboxがどのように配置されるかを決める、と書いた。今回はformatting contextについて確認する。
先にまとめ。
- boxは画面上に要素（または擬似要素）を表現するもの。
- formatting contextはboxをどう配置するかを決定づける。fomatting contextのタイプによってどう配置するかは変わってくる。
- boxは包含（親）ブロックのformatting contextに入るか、floatみたいに独自のformatting contextを作る場合もある。
- inner display typeで配下のboxをどのように配置するか（formatting context）を決定する。inner display typeには、flow、flow-root、table、flex、grid、rubyみたいな値がある。
Formatting Contextについて、以下に適当な訳と一緒に記載する。適当な訳で抜け落ちたり間違っているかもしれないけど、後でどう読んだかを思い出すために残しておく。
A formatting context is the environment into which a set of related boxes are laid out. Different formatting contexts lay out their boxes according to different rules. For example, a flex formatting context lays out boxes according to the flex layout rules [CSS3-FLEXBOX], whereas a block formatting context lays out boxes according to the block-and-inline layout rules [CSS2]. Additionally, some types of formatting contexts interleave and co-exist: for example, an inline formatting context exists within and interacts with the block formatting context of the element that establishes it, and a ruby container overlays a ruby formatting context over the inline formatting context in which its ruby base container participates.
A box either establishes a new independent formatting context or continues the formatting context of its containing block. In some cases, it might additionally establish a new (non-independent) co-existing formatting context. Unless otherwise specified, however, establishing a new formatting context creates an independent formatting context. The type of formatting context established by the box is determined by its inner display type. E.g. a grid container establishes a new grid formatting context, a ruby container establishes a new ruby formatting context, and a block container can establish a new block formatting context and/or a new inline formatting context. See the display property.
formatting contextは関連するboxを配置するための環境である。異なるformatting contextでは異なるルールでboxを配置する。たとえば flex formatting contextはflexレイアウトのルールにしたがってboxを配置するし、block formatting contextはblock-and-inlineレイアウトのルールにしたがってboxを配置する。さらに、いくつかのformatting contextでは、不連続な形で配置（interleave）したり、同じ場所に同時に存在させたり（co-exist）する。たとえば、inline formatting contextは、その要素のblock formatting contextの内部に存在し、かつblock formatting textと相互に作用する。また、ruby containerは、ruby base containerの中にあるinline formatting contextの上のruby formatting contextの上に置かれる。
boxは新しいindependent formatting contextを生成するか、boxが含まれるブロックのformatting contextを継続する。ケースによってはさらに新しい（独立していない）co-existing formatting context を生成するかもしれないが、そうした特定のケースを除いては新しいformatting contextはindependent formatting contextを生成する。boxによって生成されたformatting contextのタイプはinner displayのタイプによって決定される。たとえばgrid containerは新しいgrid formatting contextを生成する。ruby containerは新しいruby formatting contextを生成する。block containerは新しいblock formatting contextや新しいinline formatting contextを生成する。