共计 5933 个字符,预计需要花费 15 分钟才能阅读完成。
在 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 双向算法
双向文字就是一个字符串中蕴含了两种文字,既蕴含从左到右的文字又蕴含从右到左的文字。
对于文字书写习惯,分为:
- 大多数文字都是从左到右的书写习惯:比方拉丁文字(英文字母)和汉字;
- 多数文字是从右到左的书写形式比方阿拉伯文(ar)跟希伯来文(he)。
在古代计算机利用中,最罕用来解决双向文字的算法是 Unicode 双向算法(Unicode Bidirectional Algorithm)。
一个区域内有总体方向,决定从这个区域的哪边开始书写文字,通常称为根底方向。浏览器会依据你的默认语言来设置默认的根底方向,如英语、汉语的根底方向为从左到右,阿拉伯语的根底方向为从右到左。
在 Web 中,咱们有 3 种形式能够管制文字方向:
- html 实体 –
‎
与‏
) <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 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
物理属性到逻辑属性的映射:
Property 属性 | Logical Property 逻辑属性 |
---|---|
margin-top | margin-block-start |
margin-left | margin-inline-start |
margin-right | margin-inline-end |
margin-bottom | margin-block-end |
padding
物理属性到逻辑属性的映射:
Property 属性 | Logical Property 逻辑属性 |
---|---|
padding-top | padding-block-start |
padding-left | padding-inline-start |
padding-right | padding-inline-end |
padding-bottom | padding-block-end |
border
物理属性到逻辑属性的映射:
Property 属性 | Logical Property 逻辑属性 | ||||
---|---|---|---|---|---|
border-top{-size\ | style\ | color} | border-block-start{-size\ | style\ | color} |
border-left{-size\ | style\ | color} | border-inline-start{-size\ | style\ | color} |
border-right{-size\ | style\ | color} | border-inline-end{-size\ | style\ | color} |
border-bottom{-size\ | style\ | color} | border-block-end{-size\ | style\ | color} |
relative
物理属性到逻辑属性的映射:
Property 属性 | Logical Property 逻辑属性 |
---|---|
top | inset-block-start |
left | inset-inline-start |
right | inset-inline-end |
bottom | inset-block-end |
- 等等 …(残缺的列表,你能够戳这里: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