用語的な理解を得るために、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と呼ぶ。