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对象其实就是" ...
随机推荐
- .NET基础拾遗（5）多线程开发基础
Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...
- Concepts：Request 和 Task
当SQL Server Engine 接收到Session发出的Request时,SQL Server OS将Request和Task绑定,并为Task分配一个Workder.在TSQL Query执 ...
- ubuntu系统下如何修改host
Ubuntu系统的Hosts只需修改/etc/hosts文件,在目录中还有一个hosts.conf文件,刚开始还以为只需要修改这个就可以了,结果发现是需要修改hosts.修改完之后要重启网络.具体过程 ...
- 【踩坑速记】开源日历控件，顺便全面解析开源库打包发布到Bintray/Jcenter全过程（新），让开源更简单~
一.写在前面 自使用android studio开始,就被它独特的依赖方式:compile 'com.android.support:appcompat-v7:25.0.1'所深深吸引,自从有了它,麻 ...
- 小兔JS教程（三）-- 彻底攻略JS回调函数
这一讲来谈谈回调函数. 其实一句话就能概括这个东西: 回调函数就是把一个函数当做参数,传入另一个函数中.传进去的目的仅仅是为了在某个时刻去执行它. 如果不执行,那么你传一个函数进去干嘛呢? 就比如说对 ...
- C#——传值参数(1)
//我的C#是跟着猛哥(刘铁猛)(算是我的正式老师)<C#语言入门详解>学习的,微信上猛哥也给我讲解了一些不懂得地方,对于我来说简直是一笔巨额财富,难得良师! 这次与大家一起学习C#中的值 ...
- python enumerate 用法
A new built-in function, enumerate() , will make certain loops a bit clearer. enumerate(thing) , whe ...
- 玩转ajax
1.什么是ajax? Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 2.ajax需要什么基础? HTML 用于建立 Web 表单并确定应 ...
- 使用git进行源代码管理
git是一款非常流行的分布式版本控制系统,使用Local Repository追踪代码的修改,通过Push和Pull操作,将代码changes提交到Remote Repository,或从Remote ...
- 设计模式之工厂模式VS抽象工厂
一.工厂模式主要是为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来,达到提高灵活性的目的. 工厂模式在<Java与模式>中分为三类:1)简单工厂模式(Simple Factor ...