Jiang-Xuan
commented
4 years ago 原文
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 将源文档组织成 element 和 text node 的 树 状结构, 并将其呈现在画布上(例如屏幕, 一张纸或音频流). 为此, 它将生成一个中间结构, 即 Box 树, 它表示呈现的文档的格式结构. Box 树中的每一个 Box 代表其在画布上的空间 和/或 时间上的对应的元素(或者伪元素). Box 树中的每一个 text run 同样表示其对应的 text nodes 的内容.
原文
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 树, CSS 首先使用级联和继承, 将每个 CSS 属性的计算值分配给源树中的每一个 element 和 text node. (参见: [CSS3 CASCADE])
原文
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”.
译文
然后, 对于每一个 element, CSS 都会生成零个或多个由该 element 的 'display' 属性指定的 Box. 通常, 一个 element 生成一个 Box, 即 principle box(主体 Box), 该 Box 表示自身和其在 Box 树 中包含的内容. 但是, 某些 'display' 值(例如: ['display: list-item']()) 生成超过一个的 Box (例如: 一个 principle block box 和一个子 marker box). 并且某些值(例如: 'none' 或 'contents') 导致元素 和/或 其子代完全不生成任何 Box. Box 通常以其 display 类型 来指代, 例如由具有 ['display: block' ]() 的元素生成的 Box 称为 "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.
译文
除非另有指明, Box 被指定与生成其的 element 相同的样式. 通常, 继承的属性分配给 principal box, 然后通过 box 树继承到同一 element 生成的其他任何 Box. 非继承属性默认赋给 principal box, 但是当 element 生成多个 box 时, 有时会定义为适用于其他 Box: 例如, 应用于 table element 的 'border' 属性应用于其 table grid box, 而不是其的 principal table wrapper box. 如果值计算过程更改了这些 box 的样式, 并且请求了 element 的样式(比如通过 getComputedStyle()), 则该元素针对每个属性反应该属性所应用到 Box 的值.
原文
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.
译文
相似的, 每一个连续的兄弟 text node 序列会生成一个 text run 包含他们的文字内容, 该 text run 的样式与生成的 text node 有相同的样式. 但是, 如果序列不包含文字, 就不会生成 text run.
原文
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.
译文
在构建 Box 树时, 由 element 生成的 box 是任何祖先 element 生成的 principal box 的后代. 在一般情况下, element 的 principal box 的直接 父 Box 是其最接近的祖先 element 生成的 box; 但是, 也有一些例外, 例如 'run-in' box, 生成多个包含 box 的 display 类型(比如 table), 和介入的 anonymous box.
原文
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 需要一个特定的嵌套结构时, 但是这个结构没有被从 element tree 生成的 box 提供, anonymous box 就会在这个特定的场景下生成来修补 box tree. 例如, 一个 table cell box 需要一个特定类型的父 box(table row box), 如果其父级不是一个 table row box 将会生成一个 anonymous table row box 来包住它. 和 element 生成的 Box 不同, element 生成的 box 的样式严格通过 element 树继承, anonymous box (只存在于 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 Reorderign 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.
Note: Many of the CSS specs were written before this terminology was ironed out, or refer to things incorrectly, so view older specs with caution when they’re using these terms. It should be possible to infer from context which term they really mean. Please report errors in specs when you find them, so they can be corrected.
Note: Further information on the “aural” box tree and its interaction with the display property can be found in the CSS Speech Module. [CSS-SPEECH-1]
译文
在 layout 的过程中, box 和 text run 可以分为多个fragment. 例如, 在称为 fragmentation 的过程中, 当一个 inline box 和/或 text run 跨行中断时, 或者是当一个 block box 跨页/列中断时, 就会发生. 也可能由于文本的 bidi 重排(另见 CSS Writing Modes 中的 Applying the Bidirectional Reorderign Algorithm)或者更高级的 display type box 拆分, 例如 block-in-inline 拆分(见 CSS2§9.2) 或 column-spanner-in-block 拆分(见 CSS Multi-column Layout). 因此, 一个 Box 有一个或者多个 box fragment 组成, 而 text run 有一个或多个 text fragment 组成. 有关更多的 fragmentation 的信息, 见 [CSS3-BREAK].
备注: 许多 CSS 规范是在该术语解决之前书写的, 可能引用错误, 所以在看旧规范使用这些术语的时候, 小心. 应该有可能从上下文中推断出术语的真实含义. 在你在规范中发现他们的时候请 汇报错误
备注: 更多关于 “aural” box tree 的信息和它和 'display' 属性的交互可以在 CSS Speech Module 中找到. [CSS-SPEECH-1]
https://www.w3.org/TR/css-display-3/