在做多语言页面，接触过阿利伯语、希伯来语的同学肯定了解书写方向的重要性，包括我们五四运动前的书写顺序也是从右到左的。css中 unicode-bidi和direction属性决定了HTML或XML文字渲染方向，两个属性结合使用可以改变文字书写顺序

direction

direction属性有三个值

  1. inherit 使用父元素的设置
  2. ltr 默认值，left to right，从左到右
  3. rtl right 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>
1 2 3 4 5 6。
1 2 3 4 5 6。

unicode-bidi

貌似有direction就可以应付书写方向的问题了，unicode-bidi是做什么的呢？

浏览器通常根据lang属性或者特殊的font-family决定书写方向，但是如果一句话中同时包括两种方向的文案的时候就需要用到unicode-bidi属性了

unicode-bidi 有三个广泛支持的值

  1. normal 原来是什么顺序就使用什么顺序
  2. embed 作用于inline元素，direction属性的值指定嵌入层，在对象内部进行隐式重排序
  3. 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>
this is a test
this is a test
this is a test

第一行就是简单的右对齐，文字不会倒着写（阿拉伯语会，后面有解释）

第二行两个属性结合使用，不但右对左书写而且真的是从右到左书写了，这才是正经的阿拉伯语写法

第三行的效果奇妙之处在于在第二行的基础上加了样式unicode-bidi:embed;不会倒着写了，按着正常的书写顺序在写

小疑惑

为什么对于阿拉伯语只设置direction就能正确展示了，但是英文单词却只有右对齐效果，不会从右到左书写，只有设置了unicode-bidi:bidi-override;才好使呢

这和具体语言有关，对于阿拉伯语和希伯来语自动就好使了，单个数字、字母浏览器不能判断语言就用rtl默认设置了，英语等还是使用默认的左到右的方式，只能用unicode-bidi重写

在声明的时候指定语言为阿拉伯语页面会自动书写顺序rtl

<html lang="ar">

参考

unicode-bidi

direction

direction和unicode-bidi的更多相关文章

  1. ios--Attributes和ParagraphStyle介绍

    NSMutableParagraphStyle的部分属性: typedef NS_ENUM(NSInteger, NSLineBreakMode) {/* What to do with long l ...

  2. xsl -fo 了解

    XSL-FO是用于格式化XML数据的语言,全称为Extensible Stylesheet Language Formatting Objects(格式化对象的可扩展样式表语言),是W3C参考标准,现 ...

  3. Go搭建后台服务学习记录

    资料: 1. go基础 https://juejin.im/entry/58329f84da2f600063074382 https://www.w3cschool.cn/go/ 2.go的一个orm ...

  4. OSCP Learning Notes - Privilege Escalation

    Privilege Escalation Download the Basic-pentesting vitualmation from the following website: https:// ...

  5. bidi(双向文字)与RTL布局总结

    BIDI 双向文字就是一个字符串中包含了两种文字,既包含从左到右的文字又包含从右到左的文字. 大多数文字都是从左到右的书写习惯,比如拉丁文字(英文字母)和汉字,少数文字是从右到左的书写方式比如阿拉伯文 ...

  6. css系列教程--color direction line-height letter-spacing

    css标签:colorcolor:用法color:指定文本的颜色color:red/#fff/unicode; direction:用法 direction:定义文本的方向.dirction:ltr/ ...

  7. python的str，unicode对象的encode和decode方法

    python的str,unicode对象的encode和decode方法 python中的str对象其实就是"8-bit string" ,字节字符串,本质上类似java中的byt ...

  8. 2018年最完整5大网页设计图标解决方案：Font Awesome奥森图Unicode、CSS 和、Font以及国产zfont图标集

    网上有很多高质量的图标,基于icon的关键词能在Google上搜索到不少内容,不考虑版权外还要修改大小.颜色等等,现在介绍一些替代方案:Unicode.CSS 和 Font,它具有更高的灵活性. 方案 ...

  9. css direction 属性简介与实际应用。

    目前正在用vue构建组件库.写到弹框的时候没想到按钮的顺序问题,但是在应用中,确实会有选项按钮顺序不同的情况发生,但是又想共用一个组件.那么问题就出现了.后来看到了这篇文章,才茅塞顿开. direct ...

  10. python的str，unicode对象的encode和decode方法（转）

    python的str,unicode对象的encode和decode方法(转) python的str,unicode对象的encode和decode方法 python中的str对象其实就是" ...

随机推荐

  1. js-静态、原型、实例属性

    本篇来说一下js中的属性: 1.静态属性 2.原型属性 3.实例属性 静态属性: function klass(){} var obj=new klass(); klass.count=0; klas ...

  2. SQL数据库之DQL

    初来乍到,我是一个Java行业的小学生,刚学半年. 今天老师讲了数据库的操作语句,在这里与大家分享一下我学到的知识吧,要是有不足的地方麻烦大家指出来,共同进步,共同提高! 1.数据库中的各种符号 %: ...

  3. Partition：分区切换（Switch）

    在SQL Server中,对超级大表做数据归档,使用select和delete命令是十分耗费CPU时间和Disk空间的,SQL Server必须记录相应数量的事务日志,而使用switch操作归档分区表 ...

  4. SQLServer执行命令出现“目录无效的提示”

    异常处理汇总-数据库系列  http://www.cnblogs.com/dunitian/p/4522990.html 一般都是清理垃圾清理过头了,把不该删的目录删了 网上说法: 问题描述: 1.s ...

  5. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  6. Hawk 4.7 单步调试

    单步调试的意义 已经编写的工作流,可能会因为某些外界环境的变化而出错,此时需要排除错误,我们可以使用单步调试. 单步调试的本质,相当于只使用前n个模块,这样就能看到每个步骤下,流的改变. 例子 还是上 ...

  7. const extern static 终极指南

    const extern static 终极指南 不管是从事哪种语言的开发工作,const extern static 这三个关键字的用法和原理都是我们必须明白的.本文将对此做出非常详细的讲解. co ...

  8. html5 canvas常用api总结(二)--绘图API

    canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API. 绘画的时候canvas相当于画布,而 ...

  9. 程序猿都没对象，JS竟然有对象？

    现在做项目基本是套用框架,不论是网上的前端还是后端框架,也会寻找一些封装好的插件拿来即用,但还是希望拿来时最好自己过后再回过头了解里面的原理,学习里面优秀的东西,不论代码封装性,还是小到命名. 好吧, ...

  10. html中返回上一页的各种写法【转】

    超链接返回上一页代码: <a href="#" onClick="javascript :history.back(-1);">返回上一页</ ...