CSS 逻辑属性与值 第一版

1. 引言

注意：请参阅 [css-writing-modes-4] 了解书写模式的正式介绍；本模块假设熟悉其术语。

由于不同的书写系统有不同的书写方向， 存在多种 书写模式： 从左到右，自上而下； 从右到左，自上而下； 自下而上，从右到左； 等等。 诸如页面“起始”或行“起始”等逻辑概念 在物理概念如行的“顶部”或段落的“左边缘”之间有不同的映射。 布局的一些方面实际上是相对于书写方向的， 因此在将页面翻译为不同的系统时会有所变化； 其他方面则固有地相对于页面的物理方向。

例如， 在英语中，列表、标题和段落通常是左对齐的； 但实际上它们是起始对齐的，因为在阿拉伯语中，这些结构是右对齐的， 多语言文档需要相应地支持两种书写系统。

以下代码展示了如何使用逻辑语法编写适用于不同书写系统的代码：

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

blockquote {
    text-align: start; /* 拉丁文左对齐，阿拉伯文右对齐 */
    margin-inline-start: 0px; /* 拉丁文左边距，阿拉伯文右边距 */
    border-inline-start: 5px solid gray; /* 拉丁文左边框，阿拉伯文右边框 */
    padding-inline-start: 5px; /* 拉丁文左内边距，阿拉伯文右内边距 */
}

文档可能同时需要逻辑和物理属性。例如， 页面上按钮的阴影必须保持一致， 因此其偏移将基于视觉考虑和物理方向来选择， 而不会因书写系统的不同而变化。

由于CSS最初设计时仅考虑了物理坐标， 本模块引入了与文本流相关的等效概念， 使得CSS样式表中的声明可以用相对流方向术语表示。 它定义了等效属性的映射和层叠规则， 以及一些等同于CSS2.1的新属性和值， 并描述了其语法的派生原则。 预计未来的CSS规范将在其属性和值定义中同时包含两组坐标， 因此本模块不会跟踪较新CSS特性中相对流方向变体的引入。

CSS书写模式的抽象框术语部分 定义了流相对术语和物理术语之间的映射。 这种映射取决于使用值的书写模式和方向， 它控制流相对关键字和属性的解释。

注意：由于它与文字方向: 正直的交互作用， 使用的 方向 依赖于 计算值 书写模式和文字方向的计算值。

2. 相对流方向的值: block-start, block-end, inline-start, inline-end

接受物理方向关键字值的属性 (top, bottom, left 或 right) 被重新定义 以接受适当的 相对流方向 的关键字。 在这种情况下， 可以使用相对流方向的值替代相应的物理值。 对于接受多个关键字的属性， 不允许组合相对流方向和物理值 （除非未来规范中另有规定）。

属性可以是1维或2维的。 当上下文限制为一个维度时， 相对流方向的关键字将被缩写。

2.1. caption-side 属性的逻辑值

这些值仅添加到支持 left 和 right 值的 caption-side 实现中。 left 和 right 值本身 被定义为 行相对。

现有的 top 和 bottom 值被重新定义为 分别分配给表格的 block-start 和 block-end 两侧。

此属性的映射使用了标题的 书写模式 及其 包含块 （即 表格包装框）。

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

这些属性的映射使用了元素的 书写模式 及其 包含块。

注意：这些属性在CSS2中是1维的， 但计划扩展为二维， 因此使用了未缩写的 相对流方向 关键字。

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

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

2.4. resize 属性的相对流方向值

3. 相对流方向的页面分类

在CSS中，所有页面都由用户代理分类为左页面或右页面。[CSS21] 然而，页面的起始顺序取决于页面的前进方向是从左到右还是从右到左。

为了允许控制页面在横跨页面时的分页， 而不是控制页面的左侧或右侧， 本模块为 page-break-after 和 page-break-before 属性引入了以下附加关键字 [CSS21]：

recto

相当于从左到右页面进程中的 right， 而在从右到左页面进程中相当于 left。

verso

相当于从左到右页面进程中的 left， 而在从右到左页面进程中相当于 right。

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

尽管作者通常使用物理定位放置页码， 页眉的内容通常依赖于哪一页在跨页中较早。 因此，以下相对流方向的页面选择器 也被添加以支持相对流方向的页面选择：

:recto

相当于从左到右页面进程中的 ':right'， 而在从右到左页面进程中相当于 ':left'。

:verso

相当于从左到右页面进程中的 ':left'， 而在从右到左页面进程中相当于 ':right'。

相对流方向的页面选择器与 ':left' 和 ':right' 页面选择器具有相同的优先级。

4. 相对流方向的盒模型属性

本规范引入了与 相对流方向 等效的新的CSS属性 以及 物理盒模型属性。 每组相关的相对流方向的长属性 及其相应的物理属性 组成了一个 逻辑属性组。 例如，padding-* 属性 组成了一个单一的 逻辑属性组， margin-* 属性 组成了另一个单独的 逻辑属性组， 等等。 定向或轴的映射类型 （相对流方向 或 物理） 被称为该属性的 映射逻辑。

注意： 每个长属性最多属于一个 逻辑属性组。

相对流方向属性的 指定值 与对应的物理属性的指定值不同， 但相对流方向属性和物理属性共享计算值。 哪些属性对共享计算值 取决于元素的 书写模式、方向 和 文字方向 的计算值。

注意： 每个元素自身的 书写模式 用于将每个 相对流方向 属性映射到其 物理 等效属性 简化了层叠计算 并为作者提供了一个易于理解的模型。 但是，在许多情况下，这可能会出现问题， 例如，参见 此讨论。 作者可能需要使用嵌套元素 以获取在从父元素更改元素的 书写模式 时正确的映射行为。

具有相对流方向和物理属性输入的计算值 是通过对两者的声明应用CSS层叠来确定的。 优先级并不取决于声明是相对流方向还是物理属性， 而是由CSS层叠规则决定的 [css-cascade-3]。

请注意，这要求实现必须保持CSS声明块中声明的相对顺序， 这在之前的CSS层叠中是未要求的。

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

[CSSOM] 返回计算值的API （如 getComputedStyle()） 必须为这些等效属性对返回相同的值。

关于 相对流方向属性的继承顺序与映射 以及简写与逻辑属性的交互 存在一些未解决的问题。

4.1. 逻辑高度和逻辑宽度：block-size 和 inline-size 属性

这些属性对应于 width 和 height 属性。 映射取决于元素的 书写模式。

这些属性对应于 min-width 和 min-height 属性。 映射取决于元素的 书写模式。

这些属性对应于 max-width 和 max-height 属性。 映射取决于元素的 书写模式。

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 属性。 映射取决于元素的 书写模式、方向 和 文字方向。

这两个 简写属性 分别设置了 margin-block-start 和 margin-block-end 以及 margin-inline-start 和 margin-inline-end。 第一个值表示 开始 边样式， 第二个值表示 结束 边样式。 如果只给出了一个值，它将同时适用于 开始 和 结束 边。

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

这些属性对应于 top、bottom、left 和 right 属性。 映射取决于元素的 书写模式、方向 和 文字方向。

这两个 简写属性 分别设置了 inset-block-start 和 inset-block-end 以及 inset-inline-start 和 inset-inline-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 属性。 映射取决于元素的 书写模式、方向 和 文字方向。

这两个 简写属性 设置了 padding-block-start 和 padding-block-end，以及 padding-inline-start 和 padding-inline-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 属性。 映射取决于元素的 书写模式、方向 和 文字方向。

这两个 简写属性 设置了 border-block-start-width 和 border-block-end-width 以及 border-inline-start-width 和 border-inline-end-width， 第一个值表示 开始 边宽度， 第二个值表示 结束 边宽度。 如果只给出了一个值，它将同时适用于 开始 和 结束 边。

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 属性。 映射取决于元素的 书写模式、方向 和 文字方向。

这两个 简写属性 设置了 border-block-start-style 和 border-block-end-style 以及 border-inline-start-style 和 border-inline-end-style， 第一个值表示 开始 边样式， 第二个值表示 结束 边样式。 如果只给出了一个值，它将同时适用于 开始 和 结束 边。

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 属性。 映射取决于元素的 书写模式、方向 和 文字方向。

这两个 简写属性 设置了 border-block-start-color 和 border-block-end-color 以及 border-inline-start-color 和 border-inline-end-color， 分别。 第一个值表示 开始 边样式， 第二个值表示 结束 边样式。 如果只给出了一个值，它将同时适用于 开始 和 结束 边。

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 属性。 映射取决于元素的 书写模式、方向 和 文字方向。

这两个 简写属性 设置了 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 属性。 映射取决于元素的 书写模式、方向 和 文字方向。

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

margin、padding 和 border 的简写属性默认设置物理属性的值。 但作者可以在属性值的开头指定 logical 关键字， 以指示这些值映射到流相对属性，而不是物理属性。

此功能的建议语法正在讨论中，几乎可以肯定会改变目前所述内容。 本节保留在草案中是为了促进讨论替代方案，记录受影响的属性， 并说明最终选定的语法切换对解释的预期影响。

以下 [CSS21] 简写属性接受 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, Shinyu Murakami, Tab Atkins

6. 变更

自上一个工作草案以来的变更包括：

• 移除了逻辑背景和边框图像的功能。 （这些想法可能会在未来的草案中重新审视。）
• 添加了逻辑 border-radius 长手属性。

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

• 所有属性的级联使用元素上指定的书写模式，而不是父元素上的书写模式。
• 在类似margin的简写属性中将 inline-start 放在 inline-end 之前。
• 为 margins/borders/padding 添加了 *-inline 和 *-block 简写形式。
• 将 offset-* 属性重命名为 inset-* 并标记为讨论问题。
• 新增介绍部分。
• 更新到当前的 CSS Writing Modes 术语。
• 清理了各种杂项文案。