Logical Properties and Values #52

anjia · 2019-02-14T06:16:02Z

CSS Logical Properties and Values Level 1

logical properties and values 让 author 可以通过 logical direction 和 dimension mappings 来控制 layout，而不是通过 physical 的。

只提供了 physical -> logical 的 mappings，包括 direction mappings 和 dimension mappings
并没有新特性，特性都是 CSS2 里已经有了的

1. Introduction

不同的 writing systems 有不同的 directions，所以存在多种 writing modes #51：

left to right, top to bottom
right to left, top to bottom
top to bottom, right to left
etc.

logical 概念，比如页面的 start 或 line map，与 physical 概念，对应行的 top 或者段落的 left edge，是不同的。layout 的一些方面实际上是相对于 writing directions 的，所以，页面被翻译成不同的 system 时，layout 的这些方面会有所不同；另外的方面，本质上是相对于页面的 physical orientation。

比如，lists, headings 和 paragraphs 在 English 里通常是 left-aligned，但实际上它们是 start-aligned，因为在 Arabic（阿拉伯语）中相同的结构是 right-aligned。multilingual document（多语言文档）需要适应这两种 writing systems。

下面的示例，可以很好的演示使用 logical syntax 能让你很好的适配不同的 writing systems。

<style>
blockquote {
    text-align: start; /* left in latin, right in arabic */
    margin-inline-start: 0px; /* margin-left in latin, margin-right in arabic */
    border-inline-start: 5px solid gray; /* border-left in latin, border-right in arabic */
    padding-inline-start: 5px; /* padding-left in latin, padding-right in arabic */
}
</style>

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

在线查看效果

文档可能同时需要 logical 和 physical 属性。例如，按钮的 drop shadows 必须始终保持一致，所以它们的 offset 将根据 visual considerations 和 physical directions 来确定，而不会因为 writing system 的不同而不同。

由于 CSS 最初只设计了 physical coordinates（物理坐标），因此本模块引入了 text-flow–relative 等价物，以便 CSS 样式表中的 declarations 可以用 flow-relative 术语来表达。它定义了 equivalent properties 的 mapping 和 cascading，一些与 CSS2.1 中等价的新 properties 和 values，以及用于派生其语法的原则。未来的 CSS 规范有望在其属性和值的定义中包含两组 coordinates，因此该模块不会跟踪新 CSS 特性的 flow-relative 变体的引入。

CSS Writing Modes 的 Abstract Box Terminology 章节定义了 flow-relative 和 physical 术语的 mapping。这个 mapping 这取决于所使用的writing-mode和direction的值，控制 flow-relative 关键字和属性的解释。

注意：它和text-orientation: upright的交互，使用的direction取决于writing-mode和text-orientation的 computed values

Issue.1 由于 CSS Writing Modes 的实现会用到本模块里的一些内容（以正确地实现 default HTML styles），所以 CSSWG 决定这两小节的 requisite features（必要功能）可以先发布：2. Flow-Relative Values 和 4. Flow-Relative Box Model Properties。可以点击 FPWD CSS Logical Properties Level 1 (late announcement) 查看相关背景。

有几个重要的 open issues：

shorthands 里的关键字logical：它的名字可能会变，也可能被其它的 syntactic marker 替换掉。[css-logical]-1282

flow-relative longhands 是从它 parent 的 namesake 继承来，还是先把它转成 physical property 再继承。[css-logical-1]-3029

shorthands 是同时扩展到两组 longhands，还是只扩展到设置的那个。[css-logical-1]-3030

https://www.w3.org/TR/2018/WD-css-logical-1-20180827

The text was updated successfully, but these errors were encountered:

anjia · 2019-02-19T10:36:48Z

2. Flow-Relative Values

block-start, block-end
inline-start, inline-end

能接受 physical directional 关键字（top bottom left right）的 properties，重新定义了下，现在也能接受相应的 flow-relative directional 关键字。

	新值	已有值
caption-side 属性的 logical values	`inline-start` `inline-end`	`top` `bottom`
float 属性的 flow-relative values	`inline-start` `inline-end`	`none` `left` `right`
clear 属性的 flow-relative values	同上	`none` `left` `right` `both`
text-align 属性的 flow-relative values	`start` `end`	`left` `right` `center` `justify` `justify-all` `match-parent`
resize 属性的 flow-relative values	`block` `inline`	`none` `horizontal` `vertical` `both`

说明：

caption-side 属性
- 两个新增的值仅对支持left right的而言
- 已存的top bottom被特殊地定义为分别对应block-start block-end
float 和 clear 属性
- 这些属性在 CSS2 中是 1-dimensional, 但是计划扩展到 two dimensions, 所以给出了未缩写的 flow-relative 关键字
text-align 属性
- 这些值在 css-text-3 中都规范地定义了

https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#directional-keywords

anjia · 2019-02-19T10:48:58Z

3. Flow-Relative Page Classifications

Page Classifications 页面分类，即页面分页的

CSS 里，所有的页面都被 user agents 分类为 left pages 或 right pages。然而，哪个 page 先展开，取决于 page progression 是 left-to-right 还是 right-to-left 的。

为了能控制页面的 page breaking 是先/后展开的一边，而不是展开的左/右侧，本模块给属性``和page-break-before引入了新的关键字。

属性	新值	已有值
page-break-before 属性	`recto` `verso`	`auto` `always` `avoid` `left` `right`
page-break-after 属性	同上

page-break-* 属性里列出的这些值，按指定的方式计算，并在 css-break-3 里定义了

page selectors 也增加了 flow-relative page selection（@page媒体的伪类选择器）：

:recto
:verso

已有的两个是 @page :left{} @page :right{}

虽然 authors 通常是使用 physical placements 来放置 page numbers 的，但是 headers 的 contents 通常还是看哪个 page 展开更早。

recto：（technical 术语）the page on the right side of an open book （打开的书的）右页
verso：（technical 术语）the page on the left side of an open book （书的）左页，偶数页；背面

https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#page

anjia · 2019-02-19T12:59:44Z

4. Flow-Relative Box Model Properties

此规范引入了新的 CSS 属性，physical box model properties ~ flow-relative。每组相关的 flow-relative longhand properties 及其并行的 physical properties 形成一个 logical property group（逻辑属性组）。比如，padding-* 的属性形成一个 single logical property group，margin-* 的属性形成另外独立的 logical property group 等等。directional 或者 axis 的 mapping（flow-relative 或者 physical）type 叫做属性的 mapping logic。

注意：每个 longhand property 最多只能在一个 logical property group 里

flow-relative properties 的 specified values 不同于 physical properties 的，但是 flow-relative 和 physical properties 共享 computed values。哪对 properties 共享 computed values 取决于元素的writing-mode,direction 和 text-orientation 的 computed values。

注意：根据元素自己的 writing mode 来映射每一个 flow-relative property 到它的 physical，这样做是简化了级联计算，也给 authors 提供了一个简单的模型。但是，在许多情况下它存在问题（详见讨论 [css-logical-props] self vs ancestor. (Wrong solution ?)）。在从父项更改元素的 writing mode 时，authors 可能需要使用嵌套元素来获取正确的映射行为。

有 flow-relative 和 physical properties 的 computed value 是通过将 CSS 级联应用于两者的 declaration 来确定的。覆盖不取决于 declaration 是 flow-relative 还是 physical 的，而只取决于 CSS cascade 的规则。

请注意，这就需要维护 CSS declaration block 中 declarations 的相对顺序（这在之前的 CSS cascading 是不需要的）

CSSOM APIs 在返回 computed values 时（比如getComputedStyle()）对这种成对的等价属性，必须返回同样的 value。

类别		logical 属性	physical 属性
Logical Height 和 Logical Width		`block-size`, `inline-size`	`width` `height`
		`max-block-size` `max-inline-size`	`max-width` `max-height`
		`min-block-size` `min-inline-size`	`min-width` `min-height`
Flow-relative Margins		`margin-block-start` `margin-block-end` `margin-inline-start` `margin-inline-end`	`margin-top` `margin-bottom` `margin-left` `margin-end`
	简	`margin-block` `margin-inline`
Flow-relative Offsets		`inset-block-start` `inset-block-end` `inset-inline-start` `inset-inline-end`
	简	`inset-block` `inset-inline`
	简	`inset`
Flow-relative Padding		`padding-block-start` `padding-block-end` `padding-inline-start` `padding-inline-end`
	简	`padding-block` `padding-inline`
Flow-relative Borders		`border-block-start-` `border-block-end-` `border-inline-start-` `border-inline-end-`	`*`可以是 `width` `style` `color`
	简	`border-block-` `border-inline-`	同上
	简	`border-block-start` `border-block-end` `border-inline-start` `border-inline-end`
	简	`border-block` `border-inline`
Flow-relative Corner Rounding		`border-start-start-radius` `border-start-end-radius` `border-end-start-radius` `border-end-end-radius`
Four-Directional	简	`margin` `padding` `border-width` `border-style` `border-color`

具体对应谁，mapping 详见 CSS Writing Modes Level 4，取决于元素的这三个属性writing-mode direction和text-orientation

https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#box

anjia · 2019-02-21T10:20:44Z

基于以上，整理成文：逻辑属性和逻辑值 #55

anjia · 2019-02-26T03:14:07Z

一个有意思的讨论

Issue 3519

Issue 3519 提出：这两个简写属性的值怎么只有一个？

Name: border-block, border-inline
Value: <‘border-block-start’>

These two shorthand properties set the border-block-start&border-block-end and border-inline-start&border-inline-end, respectively.

原来，早在 CSS3 的 border 属性，它就是一个“特殊”的简写属性：

Name: border-top, border-right, border-bottom, border-left
Value: <line-width> || <line-style> || <color>
...
Name: ‘border’
Value: <line-width> || <line-style> || <color>

规范中有说明：

...Unlike the shorthand margin and padding properties, the border property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.

border 也能覆盖 border-image，如果没设置，那就是 initial value

The CSS WG intends for the border shorthand to reset all border properties in future levels of CSS as well. eg. border-characters

anjia · 2019-03-02T16:09:14Z

[css-logical] 挺早的，2015年ED，2017年FPWD，至今

需求+功能
- 缺少border-radius的逻辑属性 1776
- border-start-start-radius 如何简写及说明-block优先，同border 3034及2015年邮件
- border-inline border-block 简写属性的 value 只有一个（还挺特殊的，同border）3519
偏实现/细节
- 映射逻辑属性的时候，是基于 element 还是 containing block。 3281
规范编辑
- text-align 增加的两个start end已经在[css-text]里了，建议此处移除。3527
其它
- 新增border-start 感觉没有必要。因为几乎没有场景~所以意义不大 :) 3651

anjia added W3C css-spec labels Feb 14, 2019

anjia mentioned this issue Feb 15, 2019

CSS WG 概览 #54

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Logical Properties and Values #52

Logical Properties and Values #52

anjia commented Feb 14, 2019 •

edited

Loading

anjia commented Feb 19, 2019 •

edited

Loading

anjia commented Feb 19, 2019

anjia commented Feb 19, 2019 •

edited

Loading

anjia commented Feb 21, 2019

anjia commented Feb 26, 2019

anjia commented Mar 2, 2019 •

edited

Loading

Logical Properties and Values #52

Logical Properties and Values #52

Comments

anjia commented Feb 14, 2019 • edited Loading

CSS Logical Properties and Values Level 1

1. Introduction

anjia commented Feb 19, 2019 • edited Loading

2. Flow-Relative Values

anjia commented Feb 19, 2019

3. Flow-Relative Page Classifications

anjia commented Feb 19, 2019 • edited Loading

4. Flow-Relative Box Model Properties

anjia commented Feb 21, 2019

anjia commented Feb 26, 2019

Issue 3519

anjia commented Mar 2, 2019 • edited Loading

anjia commented Feb 14, 2019 •

edited

Loading

anjia commented Feb 19, 2019 •

edited

Loading

anjia commented Feb 19, 2019 •

edited

Loading

anjia commented Mar 2, 2019 •

edited

Loading