CSS 逻辑属性与属性值模块 第一版

1. 引言

注意：有关写作模式的介绍请参见 [css-writing-modes-4]； 本模块假定已了解其相关术语。

由于不同的书写体系有不同的书写方向， 存在多种写作模式： 从左到右，从上到下； 从右到左，从上到下； 从下到上，从右到左； 等等。 像页面或行的“开始”这样的逻辑概念，会与如“行顶部”或“段落左侧”这样的物理概念有不同的映射方式。 布局的某些方面实际上是与书写方向相关的， 因此当页面转换为不同体系时会发生变化； 也有些本质上是相对于页面的物理朝向。

例如， 在英语中，列表、标题和段落通常左对齐； 但实际上它们是start对齐的，因为在阿拉伯语中这些结构则是右对齐的， 多语言文档就需要兼顾不同的书写体系。

下例说明用逻辑语法可以帮助你编写适用于不同书写体系的代码：

<blockquote dir="auto">Quotation in English</blockquote>
<blockquote dir="auto">اقتباس في العربية</blockquote>

blockquote {
    text-align: start; /* 拉丁文字左对齐，阿拉伯语右对齐 */
    margin-inline-start: 0px; /* 拉丁文字为margin-left，阿拉伯语为margin-right */
    border-inline-start: 5px solid gray; /* 拉丁文字为border-left，阿拉伯语为border-right */
    padding-inline-start: 5px; /* 拉丁文字为padding-left，阿拉伯语为padding-right */
}

有些场景既需要逻辑属性，也需要物理属性。例如页面上按钮的阴影要保证一致， 那么其偏移要基于视觉层面和物理方向来决定，不应随书写体系变化。

由于CSS最初只以物理坐标作为定位控制， 本模块引入文本流向相关的等效属性， 使CSS样式声明可以用流向相关术语来表达。 本规范定义了等效属性的映射和级联关系， 一些等价于CSS2.1的新属性和值， 以及用于推导这些语法的基本原则。 未来的CSS规范预计会在属性和值的定义中包含两套坐标， 因此本模块不再持续跟踪新增CSS特性的流向相关变体。

CSS Writing Modes 的 抽象盒模型术语 一节 定义了流向相关和物理术语之间的映射方式。 这种映射关系依赖于 used values：writing-mode、direction、text-orientation， 用来控制流向相关关键词和属性的解释方式。

注意：由于它与 text-orientation: upright 互动， used 的 direction 取决于 计算值 writing-mode 和 text-orientation。

1.1. 属性值定义

本规范遵循 CSS2中属性定义规范 和 CSS 属性值定义语法 来描述 [CSS-VALUES-3]。 本规范未定义的属性值类型详见 CSS Values & Units [CSS-VALUES-3]。 与其他 CSS 模块组合时，这些值类型的定义可能被扩展。

除各自定义的专有属性值外， 本规范中所有属性 也都接受CSS全局关键字作为属性值。 为便于阅读，本文未再次显示全局关键字。

2. 流向相关属性值：block-start、block-end、inline-start、inline-end

许多 CSS 属性历史上支持方向关键字值， 即物理属性值（如 top、bottom、left、right）。 本规范新增了方向关键字值的流向相关形式：block-start、block-end、inline-start、inline-end。

属性的作用可能是一维也可能是二维。 若上下文只限于其中一维， 则流向相关关键字可简写 （为 start 和 end）。

本规范重新定义 CSS2 级属性以同时接受流向相关方向关键字。 这些值可替代对应的物理值使用。 对于允许多个关键字属性， 不允许将流向相关值和物理值混用 （除非日后规范另有说明）。

注意： 新版CSS规范往往首选或补充流向相关或行相关属性值， 而非仅有物理值。 一般来说，这些相对值的映射将采用包含块的writing-mode，如果影响的是自身，则用盒子的writing-mode。 无论采用哪种映射，应在规范中明确指出使用何种writing-mode。

2.1. caption-side 属性的逻辑属性值

仅当实现支持 left 和 right 关键字的 caption-side 时，上述两个新值才需要添加。 left 和 right 本身被定义为行相关关键字。

已有的 top 和 bottom 值现被指定为对应 block-start 和 block-end 边。

此属性的映射采用 caption 包含块的writing-mode（即 表包装盒）决定。

2.2. float 和 clear 属性的流向相关属性值

这些属性的映射以元素的包含块的 writing-mode为准。

注意：这些属性在CSS2中是一维的， 但计划扩展为二维， 因此采用未简化的流向相关关键字。

2.3. text-align 属性的流向相关属性值

这些属性值在 [css-text-3] 中有规范性定义。

3. 流向相关的页面分类

在 CSS 中，所有页面都被用户代理分类为左页或右页。[CSS2] 但在跨页布局中，哪一页排在最前，取决于页面进程是左到右还是右到左。

为便于将分页控制赋予跨页布局的前侧或后侧页面， 而不是单纯的左侧或右侧， 本模块为 page-break-after 和 page-break-before 属性 [CSS2] 引入了以下附加关键字：

recto

在左到右页面进程中等价于 right， 在右到左页面进程中等价于 left。

verso

在左到右页面进程中等价于 left， 在右到左页面进程中等价于 right。

这些值按指定值计算， 在 [css-break-3] 有进一步定义。

虽然作者通常使用物理定位方式放置页码， 但页眉的内容通常依赖于跨页布局的前后页顺序。 因此也引入了如下流向相关页面选择器以便流向相关的页面选择：

:recto

在左到右页面进程中等价于 ':right'， 在右到左页面进程中等价于 ':left'。

:verso

在左到右页面进程中等价于 ':left'， 在右到左页面进程中等价于 ':right'。

流向相关页面选择器与 ':left' 和 ':right' 页面选择器具有相同的特异性。

4. 流向相关盒模型属性

许多格式化效果中， 被影响的轴或方向是通过属性名体现的， 而不是其属性值中。 各此类属性的方向或轴映射类型 （流向相关或者物理） 被称为其映射逻辑。 以往所有属性均以物理方式编码； 本规范引入了与CSS2中物理盒模型属性等价的 流向相关新CSS属性。

注意： 新版CSS规范常常优先或者补充性地定义流向相关或行相关属性， 而不是只有物理属性。

每组并行的流向相关属性与物理属性 （不考虑简写属性） 通过设置盒各个边或各维度的等效样式有关，形成一个逻辑属性组。 例如，padding-* 属性构成一个逻辑属性组， margin-* 构成另一个逻辑属性组， border-*-style 又构成另一个逻辑属性组， 等等。 （每个长属性最多只能属于一个逻辑属性组。）

在每个逻辑属性组中， 对应的流向相关与物理属性 通过元素自身的计算 writing mode 配对。 虽然每个属性的指定值彼此独立， 但配对属性共享计算值。 此共享值通过级联两组声明获得； 即，两个配对属性的计算值 取决于CSS级联中优先级较高声明所对应属性的指定值。[CSS-CASCADE-3]

注意，这要求实现保持 CSS 声明块内声明的相对顺序， 而这在以往的 CSS 级联中并非必须。 也要求在级联配对writing-mode、direction、text-orientation属性前先行计算， 以便将同一流向相关与物理声明进行联合级联并计算逻辑属性组的计算值。

p {
  margin-inline-start: 1px;
  margin-left: 2px;
  margin-inline-end: 3px;
}

[CSSOM] 以返回计算值为目标的API （如 getComputedStyle()） 必须为该配对的每个单独属性返回相同的值。

注意：对每个流向相关属性映射为其物理等效形式时采用元素自身的writing mode， 可以简化级联计算，并为作者提供直接可理解的模型。 但在许多场景中这也会造成困惑， 例如详见 这次讨论。 作者在更改某元素的writing mode时，可能需要用嵌套元素获得正确的映射效果。

每个属性均从父元素对应属性继承。 例如，即使inline-start margin 在rtl盒中为其右边距，margin-inline-start 仍继承自父元素的 margin-inline-start， 而不管这在父元素上其实就是其左边距。

除非另有规定， 同时涵盖逻辑和物理长属性的简写属性 （如 all 简写属性） 会最后设置其物理长属性。 例如，all: inherit 会把所有 margin 属性都设置为 inherit， 但由于物理长属性最后被设置， 子元素的边距最终会继承父元素的物理长属性。

4.1. 逻辑高度与逻辑宽度： block-size/inline-size，min-block-size/min-inline-size， 和 max-block-size/max-inline-size 属性

这些属性对应于 height 和 width 属性。 属性的映射依赖于元素的 writing-mode。

这些属性分别对应 min-height 和 min-width 属性。 映射依赖于元素的 writing-mode。

这些属性分别对应 max-height 和 max-width 属性。 映射依赖于元素的 writing-mode。

4.2. 流向相关的外边距： margin-block-start、margin-block-end、margin-inline-start、margin-inline-end属性，以及margin-block和margin-inline简写

这些属性对应 margin-top、margin-bottom、margin-left 和 margin-right 属性。 映射关系依赖于元素的 writing-mode、direction 和 text-orientation。

这两个简写属性分别设置margin-block-start和margin-block-end以及margin-inline-start和margin-inline-end。 第一个值表示start边的样式， 第二个值表示end边的样式。 如果只指定一个值，则应用于start和end两边。

4.3. 流向相关的定位偏移： inset-block-start、inset-block-end、inset-inline-start、inset-inline-end属性，以及inset-block、inset-inline和inset简写

top、left、bottom、right 这些物理属性、 它们的inset-block-start、inset-block-end、inset-inline-start、inset-inline-end这些流向相关属性， 以及inset-block、inset-inline和inset这三个属性， 统称为inset 属性。

这些属性对应 top、bottom、left 和 right 属性。 映射关系依赖于元素的 writing-mode、direction 和 text-orientation。

这两个简写属性分别设置inset-block-start和inset-block-end，以及inset-inline-start和inset-inline-end。 第一个值为start边样式， 第二个值为end边样式。 若只给定一个值，则应用于start和end两边。

该简写属性用于设置 top、 right、 bottom、 left 等属性。 属性值会按照子属性 的方式分配，类似于 margin。

4.4. 流向相关的内边距： padding-block-start、padding-block-end、padding-inline-start、padding-inline-end属性，以及padding-block和padding-inline简写

这些属性分别对应 padding-top、padding-bottom、padding-left 和 padding-right 属性。 映射关系依赖于元素的 writing-mode、direction 和 text-orientation。

这两个简写属性分别设置padding-block-start和padding-block-end，以及padding-inline-start和padding-inline-end。 第一个值表示start边的样式， 第二个值表示end边的样式。 如果只设置一个值，则该值同时应用于start和end两边。

4.5. 流向相关的边框

4.5.1. 流向相关的边框宽度： border-block-start-width、 border-block-end-width、 border-inline-start-width、 border-inline-end-width属性，以及 border-block-width和 border-inline-width简写

这些属性分别对应 border-top-width、 border-bottom-width、 border-left-width 和 border-right-width 属性。 映射关系依赖于元素的writing-mode、direction 和 text-orientation。

这两个简写属性分别设置border-block-start-width和 border-block-end-width， 以及border-inline-start-width和 border-inline-end-width。 第一个值表示start边的宽度， 第二个值表示end边的宽度。 如果只设置一个值，则同时应用于start和end两边。

4.5.2. 流向相关的边框样式： border-block-start-style、 border-block-end-style、 border-inline-start-style、 border-inline-end-style属性，以及 border-block-style和 border-inline-style简写

这些属性分别对应 border-top-style、 border-bottom-style、 border-left-style 和 border-right-style 属性。 映射关系依赖于元素的writing-mode、direction 和 text-orientation。

这两个简写属性分别设置border-block-start-style和 border-block-end-style， 以及border-inline-start-style和 border-inline-end-style。 第一个值表示start边的样式， 第二个值表示end边的样式。 若只设置一个值，则同时应用于start和end两边。

4.5.3. 流向相关的边框颜色： border-block-start-color、 border-block-end-color、 border-inline-start-color、 border-inline-end-color属性，以及 border-block-color和 border-inline-color简写

这些属性对应 border-top-color、 border-bottom-color、 border-left-color 和 border-right-color 属性。 映射关系依赖于元素的writing-mode、direction 和 text-orientation。

这两个简写属性分别设置border-block-start-color和 border-block-end-color， 以及border-inline-start-color和 border-inline-end-color。 第一个值表示start边的颜色， 第二个值表示end边的颜色。 如果只设置一个值，则同时应用于start和end两边。

4.5.4. 流向相关的边框简写： border-block-start、 border-block-end、 border-inline-start、 border-inline-end属性，以及 border-block 和 border-inline简写

这些属性分别对应 border-top、 border-bottom、 border-left 和 border-right 属性。 映射关系依赖于元素的writing-mode、direction 和 text-orientation。

这两个简写属性分别设置border-block-start和 border-block-end，或border-inline-start和 border-inline-end， 同时应用于相同的样式。

4.6. 流向相关圆角： border-start-start-radius、 border-start-end-radius、 border-end-start-radius、 border-end-end-radius属性

这些属性对应 border-top-left-radius、 border-bottom-left-radius、 border-top-right-radius 和 border-bottom-right-radius 属性。 映射逻辑依赖于元素的writing-mode、 direction、 text-orientation。 第一个start/end表示块轴侧， 第二个表示内联轴侧 （即模式为 'border-block-inline-radius'）。

4.7. 四方向简写属性：margin、padding、 border-width、border-style、border-color简写

margin、padding 和 border 的简写属性默认为物理属性赋值。 但作者也可以在属性值的开头指定logical关键字， 表示接下来的值映射到流向相关属性，而不是物理属性。

此特性的提议语法目前仍在讨论中，并几乎可以确定将来会与此处描述有所不同。 本节保留在草案中以促进备选方案的讨论， 记录受影响的属性， 并明确说明最终所采用语法切换机制对解释的预期影响。

以下[CSS2]简写属性 支持logical关键字：

• inset
• margin
• padding
• border-width
• border-style
• border-color
• scroll-padding
• scroll-margin

这些属性的语法实际上由

<value-type>{1,4}

变为

logical? <value-type>{1,4}

当属性值包含logical关键字时， 后面的值按照如下规则赋给流向相关长属性：

• 只设置一个值，则四个流向相关长属性都用该值。
• 设置两个值，第一个给block-start和block-end，第二个给inline-start和inline-end。
• 设置三个值，第一个给block-start，第二个给inline-start和inline-end，第三个给block-end。
• 设置四个值，依次用于block-start、inline-start、block-end、inline-end四边。

blockquote {
  margin: logical 1em 2em 3em 4em;
}
blockquote {
  margin-block-start:  1em;
  margin-inline-start: 2em;
  margin-block-end:    3em;
  margin-inline-end:   4em;
}

5. 致谢

Cameron McCormack， David Baron， Oriol Brufau， Shinyu Murakami， Tab Atkins

6. 变更记录

自2018年8月27日工作草案以来的变更包括：

• 定义了流向相关属性的继承规则。
• 将resize的流向相关属性值移至[CSS-UI-4]。
• 大幅编辑和重写规范内容提升表达清晰度。
• 将text-orientation加入映射依赖列表。
• 说明border-inline和border-block可同时设定两侧的同一值。
• 明确了border-radius的映射逻辑。
• 提及物理margin、border和padding属性的适用元素，明确ruby基容器和ruby注释容器被排除。
• 使margin和padding属性的引用均指向*-top属性以保持一致。
• 定义了inset属性。
• 其它杂项表述补充与澄清。
• 增加了Web平台测试覆盖。

早期编辑草案与2017年5月18日首次公开工作草案之间的主要变更包括：

• 所有属性均采用元素上指定的writing mode参与级联，而不是父元素的writing-mode。
• margin类简写的长属性展开顺序调整为inline-start在inline-end之前。
• 为margin/border/padding 增加了*-inline和*-block简写形式。
• 将offset-*重命名为inset-*，并对此留有讨论议题。
• 新增引言章节。
• 术语统一为现行CSS Writing Modes规范术语。
• 清理杂项描述。

隐私注意事项

目前尚无针对本规范的新隐私注意事项。

安全性注意事项

目前尚无针对本规范的新安全注意事项。