search

anjia / blog

博客，积累与沉淀
106 stars 4 forks source link

Logical Properties and Values #52

Open anjia opened 5 years ago

anjia commented 5 years ago

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：

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

anjia commented 5 years ago

2. Flow-Relative Values

能接受 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

说明：

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

anjia commented 5 years ago

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媒体的伪类选择器）：

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

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

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

anjia commented 5 years ago

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 commented 5 years ago

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

anjia commented 5 years ago

一个有意思的讨论

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 commented 5 years ago

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

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