direction和unicode-bidi
在做多语言页面，接触过阿利伯语、希伯来语的同学肯定了解书写方向的重要性，包括我们五四运动前的书写顺序也是从右到左的。css中 unicode-bidi和direction属性决定了HTML或XML文字渲染方向，两个属性结合使用可以改变文字书写顺序
direction
direction属性有三个值
inherit使用父元素的设置ltr默认值，left to right，从左到右rtlright to left 从右到左
我们默认的书写顺序是从左到右的，不用做特殊设置，但是对于阿拉伯语是从右到左的，这时候就需要设置direction属性来正确展示了
防止浏览器重写text-align我们做一下默认设置
<div style="direction:rtl;text-align: initial;">
طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد
</div>
对应的也有个html属性dir可以设置
<div dir="rtl" dtyle="text-align: initial;">
طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد
</div>
direction属性局定了默认的书写顺序这是和text-align的区别，后者是对其方向，书写书写顺序不变
<div style="direction: rtl;text-align: initial;">1 2 3 4 5 6。</div>
<div style="text-align:right;">1 2 3 4 5 6。</div>
unicode-bidi
貌似有direction就可以应付书写方向的问题了，unicode-bidi是做什么的呢？
浏览器通常根据lang属性或者特殊的font-family决定书写方向，但是如果一句话中同时包括两种方向的文案的时候就需要用到unicode-bidi属性了
unicode-bidi 有三个广泛支持的值
normal原来是什么顺序就使用什么顺序embed作用于inline元素，direction属性的值指定嵌入层，在对象内部进行隐式重排序bidi-override严格按照direction属性的值重排序。忽略隐式双向运算规则
说实话这么解释我也看不懂，看个例子
<div style="direction:rtl;text-align: initial;">this is a test</div>
<div style="direction:rtl;unicode-bidi:bidi-override;text-align: initial;">
this is a test
</div>
<div style="direction:rtl;unicode-bidi:bidi-override;text-align: initial;">
this <span style="unicode-bidi:embed;">is a</span> test
</div>
第一行就是简单的右对齐，文字不会倒着写（阿拉伯语会，后面有解释）
第二行两个属性结合使用，不但右对左书写而且真的是从右到左书写了，这才是正经的阿拉伯语写法
第三行的效果奇妙之处在于在第二行的基础上加了样式unicode-bidi:embed;不会倒着写了，按着正常的书写顺序在写
小疑惑
为什么对于阿拉伯语只设置direction就能正确展示了，但是英文单词却只有右对齐效果，不会从右到左书写，只有设置了unicode-bidi:bidi-override;才好使呢
这和具体语言有关，对于阿拉伯语和希伯来语自动就好使了，单个数字、字母浏览器不能判断语言就用rtl默认设置了，英语等还是使用默认的左到右的方式，只能用unicode-bidi重写
在声明的时候指定语言为阿拉伯语页面会自动书写顺序rtl
<html lang="ar">
参考
direction和unicode-bidi的更多相关文章
- ios--Attributes和ParagraphStyle介绍
NSMutableParagraphStyle的部分属性: typedef NS_ENUM(NSInteger, NSLineBreakMode) {/* What to do with long l ...
- xsl -fo 了解
XSL-FO是用于格式化XML数据的语言,全称为Extensible Stylesheet Language Formatting Objects(格式化对象的可扩展样式表语言),是W3C参考标准,现 ...
- Go搭建后台服务学习记录
资料: 1. go基础 https://juejin.im/entry/58329f84da2f600063074382 https://www.w3cschool.cn/go/ 2.go的一个orm ...
- OSCP Learning Notes - Privilege Escalation
Privilege Escalation Download the Basic-pentesting vitualmation from the following website: https:// ...
- bidi(双向文字)与RTL布局总结
BIDI 双向文字就是一个字符串中包含了两种文字,既包含从左到右的文字又包含从右到左的文字. 大多数文字都是从左到右的书写习惯,比如拉丁文字(英文字母)和汉字,少数文字是从右到左的书写方式比如阿拉伯文 ...
- css系列教程--color direction line-height letter-spacing
css标签:colorcolor:用法color:指定文本的颜色color:red/#fff/unicode; direction:用法 direction:定义文本的方向.dirction:ltr/ ...
- python的str，unicode对象的encode和decode方法
python的str,unicode对象的encode和decode方法 python中的str对象其实就是"8-bit string" ,字节字符串,本质上类似java中的byt ...
- 2018年最完整5大网页设计图标解决方案：Font Awesome奥森图Unicode、CSS 和、Font以及国产zfont图标集
网上有很多高质量的图标,基于icon的关键词能在Google上搜索到不少内容,不考虑版权外还要修改大小.颜色等等,现在介绍一些替代方案:Unicode.CSS 和 Font,它具有更高的灵活性. 方案 ...
- css direction 属性简介与实际应用。
目前正在用vue构建组件库.写到弹框的时候没想到按钮的顺序问题,但是在应用中,确实会有选项按钮顺序不同的情况发生,但是又想共用一个组件.那么问题就出现了.后来看到了这篇文章,才茅塞顿开. direct ...
- python的str，unicode对象的encode和decode方法（转）
python的str,unicode对象的encode和decode方法(转) python的str,unicode对象的encode和decode方法 python中的str对象其实就是" ...
随机推荐
- Elasticsearch之java的基本操作一
摘要 接触ElasticSearch已经有一段了.在这期间,遇到很多问题,但在最后自己的不断探索下解决了这些问题.看到网上或多或少的都有一些介绍ElasticSearch相关知识的文档,但个人觉得 ...
- Linux 江湖系列阶段性总结
引言 我使用 Linux 已经有很多年了,最开始接触 Linux 的时候是从 RedHat 9(没有 Enterprise),中途换过 N 个不同的发行版.多年前,我在 BlogJava 上面分享 J ...
- DDD 领域驱动设计－看我如何应对业务需求变化，愚蠢的应对？
写在前面 阅读目录: 具体业务场景 业务需求变化 "愚蠢"的应对 消息列表实现 消息详情页实现 消息发送.回复.销毁等实现 回到原点的一些思考 业务需求变化,领域模型变化了吗? 对 ...
- WCF学习之旅—第三个示例之四（三十）
上接WCF学习之旅—第三个示例之一(二十七) WCF学习之旅—第三个示例之二(二十八) WCF学习之旅—第三个示例之三(二十九) ...
- 创建 OVS Local Network - 每天5分钟玩转 OpenStack（129）
上一节我们完成了 OVS 的准备工作,本节从最基础的 local network 开始学习.local network 不会与宿主机的任何物理网卡连接,流量只被限制在宿主机内,同时也不关联任何的 VL ...
- C# 实时折线图，波形图
此Demo是采用VS自带的Chart图表控件,制作实时动态显示的折线图,和波形图. 涉及到知识如下: Chart 控件,功能强大,可以绘制柱状图,折线图,波形图,饼状图,大大简化了对图的开发与定制. ...
- golang sync.WaitGroup bug
注意,这个结构体,要是想在函数之间传来传去的话,必须要使用指针....... 这个结构体里没有 指针,这个类型可以说没有“引用特性”. 被坑了一晚上.特此记录.
- 【JavaScript】javascript中伪协议(javascript:)使用探讨
javascript:这个特殊的协议类型声明了URL的主体是任意的javascript代码,它由javascript的解释器运行. 比如下面这个死链接: <a href="javasc ...
- 【从零开始学BPM，Day4】业务集成
[课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第四天课程] 1.课程概要 Step 1 软件下载:H3 BP ...
- XAMARIN.ANDROID SIGNALR 实时消息接收发送示例
SignalR 是一个开发实时 Web 应用的 .NET 类库,使用 SignalR 可以很容易的构建基于 ASP.NET 的实时 Web 应用.SignalR 支持多种服务器和客户端,可以 Host ...