CSS Display Module Level 3 双语译文 #5
Comments
原文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.
译文在 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].
|
2. Box Layout Modes: 'display' 属性原文
User Agents are expected to support this property on all media, including non-visual ones. 译文
用户代理被期望在所有的媒体上支持该属性, 包括非可视媒体. 原文The 'display' property defines an element’s display type, which consists of the two basic qualities of how an element generates boxes:
Text runs have no display type. Some 'display' values have additional side-effects: such as 'list-item', which also generates a '::marker' pseudo-element, and 'none', which causes the element’s entire subtree to be left out of the box tree.
译文'display' 属性定义了一个 element 的 display type, 其由 element 如何生成 box 的两种基本特征组成:
Text runs 没有 display 类型. 一些 'display' 值有额外的副作用: 比如 'list-item', 其也会生成一个 '::marker' pseudo-element, 再比如 'none', 其导致 element 的整个 subtree 从 box tree 中被剔除.
原文Values are defined as follows: <display-outside> = block | inline | run-in 译文值定义如下: <display-outside> = block | inline | run-in 原文The following informative table summarizes the values of 'display':
译文下面的信息表总结了 'display' 值:
原文2.1. Outer Display Roles for Flow Layout: the 'block', 'inline', and 'run-in' keywords译文2.1 flow 布局的外层显示角色: 'block', 'inline' 和 'run-in' 关键词原文The keywords specify the element’s outer display type, which is essentially its principal box’s role in flow layout. They are defined as follows:
The element generates a box that is block-level when placed in flow layout. [CSS2]
The element generates a box that is inline-level when placed in flow layout.
The element generates an run-in box, which is a type of inline-level box with special behavior that attempts to merge it into a subsequent block container. See § 3 Run-In Layout for details. If a <display-outside> value is specified but <display-inside> is omitted, the element’s inner display type defaults to 'flow'. 译文<display-outside> 关键词指定 element 的 outer display type, 本质上是 element 的 principal box 在 flow layout 中的角色. 他们定义如下:
当放置在 flow layout 中时, element 生成一个 block-level 的 box. [CSS2]
当放置在 flow layout 中时, element 生成一个 inline-level 的 box. [CSS2]
element 生成一个 run-in box, 其类型是一个有特殊行为的 inline-level box, 其尝试去合并进随后的 block container. 细节见 § 3 Run-In Layout. 如果指定了 <display-outside> 值但是省略了 <display-inside>, element 的 inner display type 默认是 'flow'. 原文2.2 Inner Display Layout Models: the 'flow', 'flow-root', 'table', 'flex', 'grid', and 'ruby' keywords译文2.2 内部显示布局模型: 'flow', 'flow-root', 'table', 'flex', 'grid', 'ruby' 关键词原文The <display-inside> keywords specify the element’s inner display type, which defines the type of formatting context that lays out its contents (assuming it is a non-replaced element). They are defined as follows:
The element lays out its contents using flow layout (block-and-inline layout). Otherwise it generates a block container box. Depending on the value of other properties (such as 'position', 'float', or 'overflow') and whether it is itself participating in a block or inline formatting context, it either establishes a new block formatting context for its contents or integrates its contents into its parent formatting context. See CSS2.1 Chapter 9. [CSS2] A block container that establishes a new block formatting context is considered to have a used inner display type of 'flow-root'.
The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents. [CSS2]
The element generates a principal table wrapper box that establishes a block formatting context, and which contains an additionally-generated table grid box that establishes a table formatting context. [CSS2]
The element generates a principal flex container box and establishes a flex formatting context. [CSS3-FLEXBOX]
The element generates a principal grid container box, and establishes a grid formatting context. [CSS3-GRID-LAYOUT]
The element generates a ruby container box and establishes a ruby formatting context in addition to integrating its base-level contents into its parent formatting context (if it is inline) or generating a wrapper box of the appropriate outer display type (if it is not). [CSS3RUBY] 译文<display-inside> 关键词指定 element 的 inner display type, 其定义了布置其内容的 formatting context 的类型(假设其是一个 non-replaced element). 他们定义如下:
element 使用 flow layout(block-and-inline layout) 布置其内容. 如果 outer display type 是 'inline' 或 'run-in', 并且其参与 block 或 inline formatting context, 然后其生成一个 inline box. 除此之外, 其生成一个 block container box. 依赖其他属性的值(如 'position', 'float', 或 'overflow') 和 其自身是否参与 block 或 inline formatting context, 其要不为其内容建立一个新的 block formatting context, 要不将其内容集成到其的父 formatting context. 见 CSS2.1 Chapter 9. [CSS2] 一个 block container 建立一个新的 block formatting context 被认为使用 inner display type 是 'flow-root'.
element 生成一个 block container box, 并且使用 flow layout 布置其内容. 其总是为其内容建立一个新的 block formatting context.
element 生成一个 principal table wrapper box, 其建立一个 block formatting context, 并且其包含一个额外生成的 table grid box, 其建立一个 table formatting context. [CSS2]
element 生成一个 principal flex container box, 并且建立一个 flex formatting context. [CSS3-FLEXBOX]
element 生成一个 principal grid container box, 并且建立一个 grid formatting context. [CSS3-GRID-LAYOUT]
element 生成一个 principal ruby container box, 并且建立一个 ruby formatting context 如果 <display-inside> 值指定但是 <display-outside> 省略, element 的默认 outer display type 是 'block' -- 除 'ruby'外, 其默认是 'inline'. 原文2.3 Generating Marker Boxes: the 'list-item' keyword译文2.3 生成 Marker Boxes: 'list-item' 关键词原文The 'list-item' keyword causes the element to generate a '::marker' pseudo-element [CSS-PSEUDO-4] with the content specified by its 'list-style' properties (CSS 2.1§12.5 Lists) [CSS2] together with a principal box of the specified type for its own contents. If no inner display type value is specified, the principal box’s inner display type defaults to 'flow'. If no outer display type value is specified, the principal box’s outer display type defaults to 'block'.
译文'list-item' 关键词使 element 生成一个拥有通过其 'list-style' 指定的内容的 '::maker' pseudo-element [CSS-PSEUDO-4] 和 为其自己的内容生成指定类型的 principal box. 如果没有指定 inner display type 值, principal box 的 inner display type 默认为 'flow'. 如果没有指定 outer display type 值, principal box 的 outer display type 默认为 'block'.
原文2.4. Layout-Internal Display Types: the 'table-' and 'ruby-' keywords译文2.4 布局内部的 Display 类型: 'table-' 和 'ruby-' 关键词原文Some layout models, such as 'table' and 'ruby', have a complex internal structure, with several different roles that their children and descendants can fill. This section defines those “layout-internal” 'display' values, which only have meaning within that particular layout mode. Unless otherwise specified, both the inner display type and the outer display type of elements using these 'display' values are set to the given keyword. The <display-internal> keywords are defined as follows:
The element is an internal table element. It generates the appropriate internal table box which participates in a table formatting context. See CSS2§17.2 [CSS2]. 'table-cell' boxes have a 'flow-root' inner display type.
The element generates a table caption box, which is a block box with special behavior with respect to table and table wrapper boxes. See CSS2§17.2 [CSS2]. 'table-caption' boxes have a 'flow-root' 'inner display type'.
The element is an internal ruby element. It generates the appropriate internal ruby box which participates in a ruby formatting context. [CSS3RUBY] 'ruby-base' and 'ruby-text' have a 'flow' inner display type. Boxes with layout-specific display types generate anonymous wrapper boxes around themselves when placed in an incompatible parent, as defined by their respective specifications.
译文一些布局模型, 比如 'table' 和 'ruby', 有着复杂的内部结构, 其子代和后代可以担当有几种不同的角色. 该部分定义了这些 "layout-internal" 'display' 值, 其只有在特定的布局模式下才有意义. 除非另有规定, 使用这些 'display' 值的 element 的 inner display type 和 outer display type 均设置为给定关键词. <display-internal> 关键词定义如下:
element 是一个 internal table element. 其生成相应的参与 table formatting context 的 internal table box. 见 CSS2§17.2 [CSS2]. 'table-cell' box 有 'flow-root' inner display type.
element 生成一个 table caption box, 其实一个对 table 和 table wrapper box 有特殊行为的 block box. 见 CSS2§17.2 [CSS2]. 'table-caption' boxes 有 'flow-root' inner display type.
element 是一个 internal ruby element. 其生成相应的参与 ruby formatting context 的 internal ruby box. [CSS3RUBY] 'ruby-base' and 'ruby-text' 有 'flow' inner display type. 当被放置在不兼容的父级下时, 有着 layout 特定的 display 类型会生成 anonymous wrapper box 包裹自己, 如其各自的规范所定义.
|
Jiang-Xuan
changed the title
原文2.5. Box Generation: the 'none' and 'contents' keywords译文2.5 box 生成: 'none' 和 'contents' 关键词原文While 'display' can control the types of boxes an element will generate, it can also control whether an element will generate any boxes at all. The '<display-box>' keywords are defined as follows:
The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element’s children as normal).
This value computes to 'display: none' on replaced elements and other elements whose rendering is not entirely controlled by CSS; see Appendix B: Effects of display: contents on Unusual Elements for details.
The element and its descendants generate no boxes or text runs. Similarly, if a text node is defined to behave as display: none, it generates no text runs. Elements with either of these values do not have inner or outer display types, because they don’t generate any boxes at all.
Markup-based relationships, however, are not affected by these values, as they are solely rendering-time effects. For example, although they may affect which table cell appears in a column, they do not affect which table cell is associated with a particular column element. Similarly, they cannot affect which HTML <summary> element is associated with a particular table or whether a <legend> is considered to be labelling the contents of a particular <fieldset>. 译文'display' 在控制 element 生成的 box 的类型的同时, 其也可以控制 element 是否总是生成 box. <display-box> 关键词定义如下:
element 自身不会生成任何 box, 但是其 children 和 pseudo-element 仍然像通常一样的生成 box 和 text run. 为了 box 的生成和布局, element 必须被认为其在 element tree 中被其内容所取代(同时包括在 source-document children 和其的 pseudo-element, 比如 '::before' 和 '::after' pseudo-element, 其正常的生成在 element children 的 之前/之后).
在 replaced element 和 渲染没有被 CSS 完全控制的其他 element 上, 该值计算为 'display: none'; 细节见 Appendix B: Effects of display: contents on Unusual Elements.
element 和 其后代不生成 box 或 text run. 相似的, 如果一个 text node 被定义为行为是 'display: none', 其不生成 text run. 有着这两个值之一的 element 没有 inner 和 outer display type, 因为它们总是不生成任何 box.
但是 markup-based 关系, 不被这些值所影响, 因为它们仅仅是渲染时的影响. 例如, 虽然它们可能影响哪一个 table cell 出现在 column 中, 但是它们并不影响哪个 table cell 与特定的 column element 相关联. 相似的, 它们不能影响哪个 HTML <summary> 元素与特定的 table 相关联或是否一个 <legend> 被认为正在标识特定的 <fieldset> 的内容. |
原文2.6. Precomposed Inline-level Display Values译文2.6 之前合成的 Inline-level display 值原文CSS level 2 used a single-keyword syntax for 'display', requiring separate keywords for block-level and inline-level variants of the same layout mode. These <display-legacy> keywords map as follows:
Behaves as 'inline flow-root'.
Behaves as 'inline table'.
Behaves as 'inline flex'.
Behaves as 'inline grid'. 译文CSS level 对于 'display' 使用单关键词语法, 对于同一种布局模式的 block-level 和 inline-level 变体需要使用单独的关键词. 这些 <display-legacy> 关键词映射如下:
表现为 'inline flow-root'.
表现为 'inline table'.
表现为 'inline flex'.
表现为 'inline grid'. |
原文2.7. Automatic Box Type Transformations译文2.7 自动的 box 类型转换原文Some layout effects require blockification or inlinification of the box type, which sets the box’s outer display type to 'block' or 'inline' (respectively). (This has no effect on display types that generate no box at all, such as 'none' or 'contents'.) Additionally:
The root element’s display type is always blockified. Additionally, a 'display' of 'contents' computes to 'block' on the root element. 译文某些布局效果需要对 box 类型进行 blockification 和 inlinification, 其设置 box 的 outer display type 为 'block' 或 'inline' (各自的). (这对总是不生成 box 的 display type 没有效果, 比如 'none' 或 'contents'.) 另外:
root element 的 display 总是被 blockifie, 另外, 在 root element 上, 'display' 是 'contents' 被计算成 'block'. |
https://www.w3.org/TR/css-display-3/
The text was updated successfully, but these errors were encountered: