流向的改变

CSS 流向的改变

此部分内容更多的是对于 IE 做样式实现

改变水平流向的 direction

只要是内联元素，只要和书写相关，都可以使用 direction 属性

.directionLeftToRight {
    /* 默认值 */
    direction: ltr;
}
.directionRightToLeft {
    direction:rtl;
}

ltr 是初始值，表示 left-to-right ，从左往右

rtl 表示 right-to-left ，从右往左

目前东亚以及欧美文字的书写就是从左往右的；

阿拉伯语 (Arabic) 、希伯来语 (Hebrew) 等的书写就是从右往左的

即 direction 设计的本意就是为了兼顾这类语言

• direction 还可以轻松改变表格中列的呈现顺序

• direction:rtl 还可以让 text-justify 两端对齐元素，最后一行落单的元素右对齐显示

  在不支持 text-align:start/end 的浏览器中 (IE) ，不同的 direction 属性值会改变 text-align 属性的初始值：

  • 当 direction 值为 ltr 的时候，text-align 的初始值是 left ；
  • 当 direction 值为 rtl 的时候，text-align 的初始值是 right ；

切换两个按钮左右排列位置

需求：在桌面端，”确认“按钮在左边，”取消“按钮在右边；在移动端的排列则反过来。

确保两个按钮都属于内联元素，没有设置定位or块状元素

@media screen and (max-width: 480px) {
    .dialog-footer { direction: rtl; }
}

省略开头溢出文字

需求：为了当文本过长时，文末的 icon 不被隐藏，出现文本溢出时，让文本前面的内容被省略。

使用 direction 属性将原来的文末溢出省略切换成开头溢出省略

<p class="ell" dir="ltr">开头是我，这是中间，然后就是结束</p>
<p class="ell" dir="rtl">开头是我，这是中间，然后就是结束</p>

.ell {
    width: 14em;
    white-space: nowrap; 
    text-overflow: ellipsis;
    overflow: hidden; 
}

黄金搭档 unicode-bidi

unicode-bidi: noraml;	/* 默认 */
unicode-bidi: embed;
unicode-bidi: bidi-override;

• normal：跟随外部的 direction
• embed：保持原有的排列且不受外部 direction 影响
• bidi-override：与外部的 directio 反向排列

能改变纵横规则的 writing-mode

• CSS3 规则

  writing-mode: horizontal-tb;	/* 默认 */
  writing-mode: vertical-rl;
  writing-mode: vertical-lr;
  

  • horizontal-tb 表示文本流是水平方向的，元素是从上往下（top-bottom）堆叠的
  • vertical-rl 表示文本是垂直方向展示，阅读顺序是从右往左（right-left）。即古诗的阅读方向
  • vertical-lr 表示文本是垂直方向展示，阅读顺序是默认的从左往右（left-right）。即仅仅是水平变垂直

• IE规则

  • 兼容 IE7，只需要关注两个属性即可：

• lr-tb 对应的 CSS3 规则是：horizontal-tb
  - tb-rl 对应的 CSS3 规则是：vertical-rl

  • 兼容 IE8 及以上，关注和 CSS3 相对应的规则即可：
    • lr-tb 对应的 CSS3 规则是：horizontal-tb
    • tb-rl 对应的 CSS3 规则是：vertical-rl
    • tb-lr 对应的 CSS3 规则是：vertical-lr

以下的特性均可以在 IE 下实现

水平方向的 margin 合并

由于 writing-mode 可以改变纵横规则，所以原有的垂直 margin 合并也变成了 水平 margin 合并

普通块状元素可以使用 margin: auto 实现垂直居中

使用 text-align: center 实现图片垂直居中

图标旋转效果（IE7）

writing-mode 与 direction 的关系

direction 的 vertical-rl 的文档流为垂直方向， rl 表示的是水平方向，此时再设置 direction: rtl，实际上值 rtl 改变的是垂直方向的内联元素的文本方向，一横一纵，没有交集

而 writing-mode 可以对块状元素产生影响，直接改变了 CSS 世界的纵横规则，要比 direction 强大得多。