用語的な理解を得るために、CSS Display Module Level 3 Introductionの部分を読んで簡単にメモる、というメモ。日本語訳も参考にしてる。内容を見直して、変だなと思うところは随時修正してる。
CSS takes a source document, organized as a tree of elements and text nodes, and renders it onto a canvas (such as your screen, a piece of paper, or an audio stream). To do this, it generates an intermediary structure, the box tree, which represents the formatting structure of the rendered document. Each box in the box tree represents its corresponding element (or pseudo-element) in space and/or time on the canvas, while each text run in the box tree likewise represents the contents of its corresponding text nodes.
CSS は受け取った source document（要素とテキストノードのツリー）を画面上に出力するために、その中間となる構造として、box treeを構築する。box tree は rendered document の formatting 構造を表現する。box tree の各 box は画面上に対応する要素（または擬似要素）を表現し、box tree 内の text run は対応するテキストノードの内容を表す。
To create the box tree, CSS first uses cascading and inheritance, to assign a computed value for each CSS property to each element and text node in the source tree. (See [CSS3-CASCADE].)
box tree を作るために、CSS はまずカスケードと継承を利用して、source tree にある各要素とテキストノードに対して、計算したプロパティの値を割り当てる。
Then, for each element, CSS generates zero or more boxes as specified by that element’s display property. Typically, an element generates a single box, the principal box, which represents itself and contains its contents in the box tree. However, some display values (e.g. display: list-item) generate more than one box (e.g. a principal block box and a child marker box). And some values (such as none or contents) cause the element and/or its descendants to not generate any boxes at all. Boxes are often referred to by their display type—e.g. a box generated by an element with display: block is called a “block box” or just a “block”.
CSS は、各要素に対して、display プロパティに応じて 0 個以上の box を生成する。通常は、一つの要素につき、一つの box を生成する。その box はprincipal boxと呼ばれ、box 自身と内包するコンテンツを box tree 内に表現する。
display の値によっては、1 つ以上の box を生成する場合がある（list-item では principal な box と、maker 用の子 box を生成する）。また、noneやcontentsのような値では、その要素、またはその子孫を含めて、box をまったく生成しない場合もある。
box はしばしば display の種類を用いて呼ばれる。display:block の要素はblock boxまたはblockと呼ばれる。
A box is assigned the same styles as its generating element, unless otherwise indicated. In general, inherited properties are assigned to the principal box, and then inherit through the box tree to any other boxes generated by the same element. Non-inherited properties default to applying to the principal box, but when the element generates multiple boxes, are sometimes defined to apply to a different box: for example, the border properties applied to a table element are applied to its table grid box, not to its principal table wrapper box. If the value computation process alters the styles of those boxes, and the element’s style is requested (such as through getComputedStyle()), the element reflects, for each property, the value from the box to which that property was applied.
Similarly, each contiguous sequence of sibling text nodes generates a text run containing their text contents, which is assigned the same styles as the generating text nodes. If the sequence contains no text, however, it does not generate a text run.
box には、特段の指定がなければ生成された要素と同じスタイルが割り当てられる。通常はinherited propertiesが principal box に割り当てられ、そして box tree を通して、同じ要素によって生成された他の box にも継承される。継承されないプロパティはデフォルトの値が principal box に適用されるが、要素が複数の box を生成する場合は、異なる box に適用するよう定義されている場合もある。
In constructing the box tree, boxes generated by an element are descendants of the principal box of any ancestor elements. In the general case, the direct parent box of an element’s principal box is the principal box of its nearest ancestor element that generates a box; however, there are some exceptions, such as for run-in boxes, display types (like tables) that generate multiple container boxes, and intervening anonymous boxes.
要素の子孫関係について。基本的には principal box 同士で子孫関係を作るが、run-in boxes や、table のように複数の contaienr box を生成する display type や、anonymous boxesが間に入る場合がある。
An anonymous box is a box that is not associated with any element. Anonymous boxes are generated in certain circumstances to fix up the box tree when it requires a particular nested structure that is not provided by the boxes generated from the element tree. For example, a table cell box requires a particular type of parent box (the table row box), and will generate an anonymous table row box around itself if its parent is not a table row box. (See [CSS2] § 17.2.1.) Unlike element-generated boxes, whose styles inherit strictly through the element tree, anonymous boxes (which only exist in the box tree) inherit through their box tree parentage.
anonymous box はどの要素とも関連がない box で、特定の状況で box tree を修正する目的で生成される。たとえば、table cell box は特定のタイプの親 box（row box）を必要とするが、親が table row box でなかった場合、anonymous な table row box を生成する。通常、スタイルは要素ツリーを通して厳密に継承されるが、anonymous box は box tree の親から継承する。
In the course of layout, boxes and text runs can be broken into multiple fragments. This happens, for example, when an inline box and/or text run is broken across lines, or when a block box is broken across pages or columns, in a process called fragmentation. It can also happen due to bidi reordering of text (see Applying the Bidirectional Reordering Algorithm in CSS Writing Modes) or higher-level display type box splitting, e.g. block-in-inline splitting (see CSS2§9.2) or column-spanner-in-block splitting (see CSS Multi-column Layout). A box therefore consists of one or more box fragments, and a text run consists of one or more text fragments. See [CSS3-BREAK] for more information on fragmentation.
layout の途中で box と text run は複数に分かれるかもしれない。これはたとえば、inline box や text run が行を跨いだり、block box がページや column をまだく場合に発生します。この過程をfragmentationと呼ぶ。