CSS 世界中的方位与顺序

CSS 世界中的方位与顺序,第1张

概述在 CSS 中,我们经常会与各种方向方位打交道。 譬如 margin、padding,它们就会有 margin-left、margin-right 或者是 padding-left、padding-r

在 CSS 中,我们经常会与各种方向方位打交道。

譬如 marginpadding,它们就会有 margin-leftmargin-right 或者是 padding-leftpadding-right。还有定位中的 lefttoprightbottom,它们表示了上下左右不同的方位。

还有一种情况是从x方位到x方位,譬如 writing-modedirection,它代表了一种顺序,表示块流动方向,或者文字书写的方向等。

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

writing-mode & direction & unicode-bIDi

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

writing-mode:定义了文本水平或垂直排布以及在块级元素中文本的行进方向。direction:设置文本排列的方向。 rtl 表示从右到左 (类似希伯来语或阿拉伯语), ltr 表示从左到右。unicode-bIDi:它与 direction 非常类似,两个会经常一起出现。在现代计算机应用中,最常用来处理双向文字的算法是Unicode 双向算法。而 unicode-bIDi 这个属性是用来重写这个算法的。

单纯看定义有点懵逼,我们简单的看几个应用示意图:

writing-mode 示意

writing-mode 基本只需要留意最常见的 horizontal-tbvertical-lrvertical-rl 。表示文本的行进方向,下图表示浏览器对 writing-mode 的支持完整的情况下输出的外观:

direction 示意

OK,那 direction 又为何呢?它表示文本排列的方向。

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

有点绕,所以上 Demo 最为直观。假设,我们有如下结构:

<ul >    <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 {        @R_502_5559@: 1px solID #333;    }}

正常情况下的样式如下:

我们分别给两组元素的父容器 <p><ul> 加上 direction: ltrdirection: 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-overrIDeunicode-bIDi: isolate-overrIDe 也能得到同样的效果。

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

Unicode 双向算法

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

对于文字书写习惯,分为:

大多数文字都是从左到右的书写习惯:比如拉丁文字(英文字母)和汉字;少数文字是从右到左的书写方式比如阿拉伯文(ar)跟希伯来文(he)。

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

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

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

HTML实体 - &lrm;&rlm;<bID><bdo> 标签 与 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 非常适合用于进行一些创意排版。

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

<div >    <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 的时候,将箭头从向右➡️改为向下 总结

以上是内存溢出为你收集整理的CSS 世界中的方位与顺序全部内容,希望文章能够帮你解决CSS 世界中的方位与顺序所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1014605.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存