简介

在css中，文本的书写模式取决于writing-mode , direction 和 text-orientation 这3个属性，主要定义了行内方向（ inline base direction ）和区块流动方向（block flow direction）。

行内方向

direction

行内方向由direction决定

{
  direction: ltr; // 从左到右
  direction: rtl; // 从右到左
}

双向性 bidirectionality

在大部分语言中，文字的书写都是从左到右的，但是少部分语言（Arabic、Hebrew）的书写是从右到左的。在特殊的混合场景的，会同时出现2种书写方向的文字，这被称为双向性。

{
  unicode-bidi: normal; 	//使用包容块的direction，自身无效
  unicode-bidi: plaintext; //忽略一切direction
  unicode-bidi: embed;	//打开一个额外的嵌入级别，方向由自身direction决定，可能会改变自身位置
  unicode-bidi: bidi-override; //和embed类似，但是方向对字母生效，而不是单词
  unicode-bidi: isolate; //计算元素容器的方向时，不考虑这个元素的内容，这个元素的内容方向由自身direction决定
  unicode-bidi: isolate-override; //和isolate类型，但是方向对字母生效，而不是单词
}

dir

由于浏览器可以禁止加载css，所以推荐使用html属性dir和bdo标签来确保文本的正确显示。

区块流动方向

wirting-mode 属性规定了区块堆叠方向。例如块级盒子在在区块的排列方式，内联元素在块级盒子的排列方式，行在表格中的排列方式等待。

wirting-mode 属性还规定了内联元素（option）的方向是垂直还是水平的。

但是 wirting-mode 属性并不会使图片元素或者其他外部元素（iframe）

{
  wirting-mode: horizontal-tb;  //默认 堆叠方向从上到下，文本方向是水平的
  wirting-mode: vertical-rl; //堆叠方向从右到左，文本方向是垂直的
  wirting-mode: vertical-lr; //堆叠方向从左到右，文本方向是垂直的
}

wirting-mode 对内联元素方向的改变兼容性并不是很好

每个书写系统有一个或多个本地取向。因此文本排列可以分为三个类别:

仅垂直，包含Latin, Arabic, Hebrew
仅水平，包含Mongolian, Phags Pa
双向，包含汉语，国语，日本语

可以双向排列的文本由水平变化为垂直排列时，有两种两种变化方式旋转和平移

text-orientation 属性规定了文本是朝向方向。

{
  /* 仅在 writing-mode 为 vertical-rl 和 vertical-lr 有效 */
  text-orientation: mixed;  //默认混合型
  text-orientation: upright;//竖直
  text-orientation: sideways;//右侧，旧浏览器兼容写法 sideways-right 
  /* sideways-lr 规定在 level 4 规范中，可以让文本朝向左侧 */
}

与其他属性的关联

由于 writing-mode 会改变区块的流动方向，大多数和布局相关的属性都是随着改变。

margin

margin合并方向会受 block direction 影响，正常情况下是上下margin会合并，垂直情况下是左右合并。

margin: auto 正常情况下是水平居中，竖直情况下是垂直合并。

border-spacing

正常情况下 border-spacing 第一个值水平距离，第二个竖直距离。竖直情况相反。

line-height

hei-height 指 block direction 的高度，正常情况 line-height 和 height 方向相同，竖直情况line-height 和 width 方向相同。

float

浮动方向受 block direction 影响，不受 inline-direction 影响

flex

flex即受block direction 影响，也受 inline-direction 影响。grid应该也是这样（没测过）。

text-align

left 指 inline-start，right 指 inline-end。由于 img 不会被 writing-mode 旋转，所以 text-align 和 writing-mode 组合使用可以达成垂直居中的效果。类似的还有text-indent。

组合

在竖直模式下 text-combine-upright 可以让多个文字组合占用一个文字空间，并且会使文字朝上。

{
	text-combine-upright: "none"; 
	text-combine-upright: "all"; /* 组合文字 */
	
}

css3新特性--CSS Writing Modes

简介