css方位,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 最为直观。假设，我们有如下结构：

• 1
• 2
• 3
• 4

这是一段正常顺序的文本

简单的 CSS 如下：

p, ul {

background: #ff00ff50;

padding: 10px;

}

ul {

display: flex;

justify-content: space-between;

& > li {

border: 1px solid #333;

}

}

正常情况下的样式如下：

我们分别给两组元素的父容器

和

• 加上 direction: ltr 及 direction: rtl，则最终效果如下：

可以看到，direction 可以改变子元素的排列方向，但是它确无法改变单段文本内(或是内联元素内)，每一个文字的书写顺序。

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

unicode-bidi 示意

这就需要请出 unicode-bidi 了。

单独使用 direction: rtl 无法使单段文本内(或是内联元素内)，文字的书写顺序改为从右至左。需要配合 unicode-bidi。

CSS 中的 unicode-bidi 属性，和 direction 属性，共同决定如何处理文档中的双书写方向文本。

还是上述的代码，我们改造一下：

这是一段正常顺序的文本

p {

direction: rtl;

unicode-bidi: bidi-override;

}

结果如下：

放到一起比较：

这里除了 unicode-bidi: bidi-override，unicode-bidi: isolate-override 也能得到同样的效果。

这里涉及了一个非常重要的知识 -- Unicode 双向算法。

Unicode 双向算法

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

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

大多数文字都是从左到右的书写习惯：比如拉丁文字(英文字母)和汉字；

少数文字是从右到左的书写方式比如阿拉伯文(ar)跟希伯来文(he)。

在现代计算机应用中，最常用来处理双向文字的算法是 Unicode 双向算法(Unicode Bidirectional Algorithm)。

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

在 Web 中，我们有 3 种方式可以控制文字方向：

html实体 - ‎ 与 ‏)

与 标签 与 dir 属性

CSS 属性 direction + unicode-bidi

本文介绍的就是 CSS 中的 direction + unicode-bidi 方式控制文字的书写方向。关于 Unicode 双向算法(Unicode Bidirectional Algorithm)本身还是非常复杂的，本文也仅仅只是简单提及，更为详尽的内容，你可以参考 UNICODE BIDIRECTIONAL ALGORITHM

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

除去本身的功能，下面我们来看看它们其它的一些应用场景。

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

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

基础的类似中国古诗词的一些竖向展示：

凉州词

葡萄美酒夜光杯,

欲饮琵琶马上催。

醉卧沙场君莫笑,

古来征战几人回。

给 .g-wrap 分别添加 writing-mode: vertical-rl 或者 writing-mode: vertical-lr 得到不同的效果：

.rl {

writing-mode: vertical-rl;

}

.lr {

writing-mode: vertical-lr;

}

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

Title Loomings

Call me Ishmael. Some years ago- never mind ho....

div {

width: 750px;

padding-left: 150px;

}

h2 {

position: absolute;

writing-mode: vertical-rl;

}

得到这样的排版布局：

改变文本溢出省略位置，使之在头部进行省略

我们都知道，本文超长溢出的省略，通过都是在文本的最末尾。像是这样：

Make CSS Ellipsis Beginning of String

p {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

这里，我们可以通过 direction，将省略打点的位置，从尾部移动至头部：

p {

direction: rtl;

}

结果如下：

尝试了下运用在多行省略中，多行省略的打点会出现在最后一行的左侧，不符合需求。

使用 writing-mode 改变元素方位

我们可以通过 writing-mode: vertical-rl，将元素转一个 90° 角：

➤

div:hover {

writing-mode: vertical-rl;

}

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

相关文章：