关于前端:CSS-世界中的方位与顺序

在 CSS 中，咱们常常会与各种方向方位打交道。

譬如 margin、padding，它们就会有 margin-left、margin-right 或者是 padding-left、padding-right。还有定位中的 left、top、right、bottom，它们示意了上下左右不同的方位。

还有一种状况是从 x 方位到 x 方位，譬如 writing-mode、direction，它代表了一种程序，示意块流动方向，或者文字书写的方向等。

本文将捋一捋 CSS 世界中的方位与程序，探寻其中一些有意思的点。

writing-mode & direction & unicode-bidi

在 CSS 世界中，这 3 个属性都与排版程序相干，互有关联但作用各异。

• writing-mode：定义了文本程度或垂直排布以及在块级元素中文本的前进方向。
• direction：设置文本排列的方向。rtl 示意从右到左 (相似希伯来语或阿拉伯语)，ltr 示意从左到右。
• unicode-bidi：它与 direction 十分相似，两个会常常一起呈现。在古代计算机利用中，最罕用来解决双向文字的算法是 Unicode 双向算法。而 unicode-bidi 这个属性是用来重写这个算法的。

单纯看定义有点懵逼，咱们简略的看几个利用示意图：

writing-mode 示意

writing-mode 根本只须要注意最常见的 horizontal-tb、vertical-lr、vertical-rl。示意文本的前进方向，下图示意浏览器对 writing-mode 的反对残缺的状况下输入的外观：

direction 示意

OK，那 direction 又为何呢？它 示意文本排列的方向。

• direction: ltr：默认属性。可设置文本和其余元素的默认方向是从左到右。
• direction: rtl：可设置文本和其余元素的默认方向是从右到左。

有点绕，所以上 Demo 最为直观。假如，咱们有如下构造：

<ul class="wrap">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<p> 这是一段失常程序的文本 </p>

简略的 CSS 如下：

p, ul {
    background: #ff00ff50;
    padding: 10px;
}
ul {
    display: flex;
    justify-content: space-between;
    
    & > li {border: 1px solid #333;}
}

失常状况下的款式如下：

咱们别离给两组元素的父容器 <p> 和 <ul> 加上 direction: ltr 及 direction: rtl，则最终成果如下：

能够看到，direction 能够扭转子元素的排列方向，然而 它确无奈扭转单段文本内（或是内联元素内），每一个文字的书写程序。

那如果，我心愿 这是一段失常程序的文本 这段文字，不是从左向右进行书写，而是反过来，从右到左进行书写，又该如何设置呢？

unicode-bidi 示意

这就须要请出 unicode-bidi 了。

独自应用 direction: rtl 无奈使单段文本内（或是内联元素内），文字的书写程序改为从右至左。须要配合 unicode-bidi。

CSS 中的 unicode-bidi 属性，和 direction 属性，独特决定如何解决文档中的双书写方向文本。

还是上述的代码，咱们革新一下：

<p> 这是一段失常程序的文本 </p>

p {
    direction: rtl;
    unicode-bidi: bidi-override;
}

后果如下：

放到一起比拟：

这里除了 unicode-bidi: bidi-override，unicode-bidi: isolate-override 也能失去同样的成果。

这里波及了一个十分重要的常识 — Unicode 双向算法。

Unicode 双向算法

双向文字就是一个字符串中蕴含了两种文字，既蕴含从左到右的文字又蕴含从右到左的文字。

对于文字书写习惯，分为：

1. 大多数文字都是从左到右的书写习惯：比方拉丁文字（英文字母）和汉字；
2. 多数文字是从右到左的书写形式比方阿拉伯文（ar）跟希伯来文（he）。

在古代计算机利用中，最罕用来解决双向文字的算法是 Unicode 双向算法（Unicode Bidirectional Algorithm）。

一个区域内有总体方向，决定从这个区域的哪边开始书写文字，通常称为根底方向。浏览器会依据你的默认语言来设置默认的根底方向，如英语、汉语的根底方向为从左到右，阿拉伯语的根底方向为从右到左。

在 Web 中，咱们有 3 种形式能够管制文字方向：

1. html 实体 – ‎ 与 ‏）
2. <bid> 与 <bdo> 标签 与 dir 属性
3. CSS 属性 direction + unicode-bidi

本文介绍的就是 CSS 中的 direction + unicode-bidi 形式管制文字的书写方向。对于 Unicode 双向算法（Unicode Bidirectional Algorithm）自身还是非常复杂的，本文也仅仅只是简略提及，更为详尽的内容，你能够参考 UNICODE BIDIRECTIONAL ALGORITHM

writing-mode & direction & unicode-bidi 的一些利用

除去自身的性能，上面咱们来看看它们其它的一些利用场景。

应用 writing-mode 进行创意排布布局

writing-mode 非常适合用于进行一些创意排版。

根底的相似中国古诗词的一些竖向展现：

<div class="g-wrap">
    <h2> 凉州词 </h2>
    <p> 葡萄美酒夜光杯,</p>
    <p> 欲饮琵琶马上催。</p>
    <p> 醉卧疆场君莫笑,</p>
    <p> 古来征战几人回。</p>
</div>

给 .g-wrap 别离增加 writing-mode: vertical-rl 或者 writing-mode: vertical-lr 失去不同的成果：

.rl {writing-mode: vertical-rl;}
.lr {writing-mode: vertical-lr;}

CodePen Demo — display poems by writing-mode

又或者像是这样，利用 writing-mode:vertical-rl 实现题目的竖向排列，搭配内容造成有意思的报纸排版：

<div>
  <h2>Title Loomings</h2>
  <p>Call me Ishmael. Some years ago- never mind ho....
  </p>
</div>

div {
  width: 750px;
  padding-left: 150px;
}
h2 {
  position: absolute;
  writing-mode: vertical-rl;
}

失去这样的排版布局：

CodePen Demo — writing-mode Layout Demo

扭转文本溢出省略地位，使之在头部进行省略

咱们都晓得，本文超长溢出的省略，通过都是在文本的最开端。像是这样：

<p>Make CSS Ellipsis Beginning of String</p>

p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

这里，咱们能够通过 direction，将省略打点的地位，从尾部挪动至头部：

p {direction: rtl;}

后果如下：

尝试了下使用在多行省略中，多行省略的打点会呈现在最初一行的左侧，不合乎需要。

CodePen Demo — CSS Ellipsis Beginning of String

应用 writing-mode 扭转元素方位

这个小技巧是在张老师的博客中学到的：扭转 CSS 世界纵横规定的 writing-mode 属性

咱们能够通过 writing-mode: vertical-rl，将元素转一个 90° 角：

<div>➤</div>

div:hover {writing-mode: vertical-rl;}

看看成果，当 hover 的时候，将箭头从向右➡️改为向下🔽：

当然，当初这个性能齐全能够用 transform 代替，然而在之前须要兼容 IE 系列的时候，不失为一个有意思的小技巧。

CSS 中的逻辑属性

上面一个章节，咱们聊聊 CSS 中的逻辑地位。

咱们晓得，在咱们应用相似 margin 和 padding 的时候，能够独自管制每个方向，例如 margin-top、padding-left。

然而，这种应用了 top/left/bottom/right 物理方向维度定义的属性，在不同的排版规定下，就非常容易出问题。

思考如下这样一个 DEMO，咱们心愿给新诗的题目的上方，增加一个 padding 值：

<div class="g-wrap pt">
    <h2> 凉州词 </h2>
    <p> 葡萄美酒夜光杯,</p>
    <p> 欲饮琵琶马上催。</p>
    <p> 醉卧疆场君莫笑,</p>
    <p> 古来征战几人回。</p>
</div>
<div class="g-wrap pt rl">
    <h2> 凉州词 </h2>
    <p> 葡萄美酒夜光杯,</p>
    <p> 欲饮琵琶马上催。</p>
    <p> 醉卧疆场君莫笑,</p>
    <p> 古来征战几人回。</p>
</div>

.pt {padding-top: 100px;}
.rl {writing-mode: vertical-rl;}

能够看到，无论 writing-mode 如何，padding-top 始终指代物理方向的上方。

基于这种不同排版规定，物理方向可能会带来肯定的困扰这个问题，CSS 在 CSS Logical Properties and Values Level 1 标准中，推出了 CSS 逻辑属性。

CSS 逻辑属性 与值是 CSS 的一个新的模块，其引入的属性与值能做到从逻辑角度管制布局，而不是从物理、方向或维度来管制。

还是上述的 DEMO，咱们能够应用 padding-block-start 代替 padding-top。

重点：应用 padding-block-start 代替 padding-top：

.pt {
-   padding-top: 100px;
+   padding-block-start: 100px;
}
.rl {writing-mode: vertical-rl;}

这次再看看成果：

padding 的地位由物理上的上方，变成了逻辑上的上方。

残缺的 Demo 你能够戳这里：CodePen Demo– 物理方向与逻辑方向展现

margin、padding、border、relative 物理属性到逻辑属性的映射

相似这样的属性，在标准中定义了挺多的，简略列举一下具体的映射规定：

margin 物理属性到逻辑属性的映射：

padding 物理属性到逻辑属性的映射：

border 物理属性到逻辑属性的映射：

relative 物理属性到逻辑属性的映射：

• 等等 …（残缺的列表，你能够戳这里：MDN – CSS 逻辑属性与值）

在逻辑属性中没有方向性的概念，只有开始（start）和完结（end）、块（block）和内联（inline）的概念。比如说，在从左到右（LTR）中，start 是 left，但在从右到左（RTL），它是 right。

逻辑属性下的盒子模型

思考到不同排版带来的逻辑问题，整个盒子模型也能够随之进行扭转。

下图，右边是物理盒子模型，左边是逻辑属性下的盒子模型。

物理方向与逻辑方向重叠

当然，还有这样一种状况，就是设置的逻辑方向和物理方向重叠，譬如咱们给一个失常从左往右，从上至下的元素同时设置 padding-top 和 padding-block-start，看看会产生什么：

div {
    padding-top: 100px;
    padding-block-start: 100px;
}

这里如果物理方向与逻辑方向重叠设置的 padding 重叠，将会取两个值中更大的一个，相似外边距重叠。

CodePen Demo– 物理方向与逻辑方向重叠 DEMO 展现

总结一下

总结一下，当我的项目开始国际化，当国内更多的业务开始出海，国际化兼容适配也会越来越重要。好在 CSS 也始终在紧跟时代，新陈代谢，当你的排版布局须要思考不同的 writing-mode 的时，你须要开始思考应用逻辑属性代替物理属性！

最初

好了，本文到此结束，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

<img width=160 src=”https://raw.githubusercontent.com/chokcoco/chokcoco/main/qrcode_big.png”>

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

参考文章

• bidi(双向文字)与 RTL 布局总结
• 扭转 CSS 世界纵横规定的 writing-mode 属性
• CSS Logical Properties and Values Level 1
• 图解 CSS：CSS 逻辑属性
• CSS Logical Properties Are the Future of the Web & I18N