在做多语言页面，接触过阿利伯语、希伯来语的同学肯定了解书写方向的重要性，包括我们五四运动前的书写顺序也是从右到左的。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. 【趣事】用 JavaScript 对抗 DDOS 攻击

    继续趣事分享. 上回聊到了大学里用一根网线发起攻击,今天接着往后讲. 不过这次讲的正好相反 -- 不是攻击,而是防御.一个奇葩防火墙的开发经历. 第二学期大家都带了电脑,于是可以用更高端的方法断网了. ...

  2. 08.LoT.UI 前后台通用框架分解系列之——多样的Tag选择器

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  3. Java 输出流中的flush方法

    转自:http://blog.csdn.net/jiyangsb/article/details/50984440 java中的IO流中的输出流一般都有flush这个操作,这个操作的作用是强制将缓存中 ...

  4. npm package.json属性详解

    概述 本文档是自己看官方文档的理解+翻译,内容是package.json配置里边的属性含义.package.json必须是一个严格的json文件,而不仅仅是js里边的一个对象.其中很多属性可以通过np ...

  5. Linux 常用命令（持续补充）

    常用命令: command &:将进程放在后台执行 ctrl + z:暂停当前进程 并放入后台 jobs:查看当前后台任务 bg( %id):将任务转为后台执行 fg( %id):将任务调回前 ...

  6. 玩转spring boot——结合JPA事务

    接着上篇 一.准备工作 修改pom.xml文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  7. ASP.NET MVC一次删除多笔记录

    批量删除数据记录,如下面的截屏: 先选中想删除的记录,然后点一下删除铵钮,系统将把选中的记录一次性删除.在此,Insus.NET不想每删除一笔记录连接一次数据库. 因此需要把选择的记录一次上传至服务器 ...

  8. [原创]关于Hibernate中的级联操作以及懒加载

    Hibernate: 级联操作 一.简单的介绍 cascade和inverse (Employee – Department) Casade用来说明当对主对象进行某种操作时是否对其关联的从对象也作类似 ...

  9. “老坛泡新菜”:SOD MVVM框架，让WinForms焕发新春

    火热的MVVM框架 最近几年最热门的技术之一就是前端技术了,各种前端框架,前端标准和前端设计风格层出不穷,而在众多前端框架中具有MVC,MVVM功能的框架成为耀眼新星,比如GitHub关注度很高的Vu ...

  10. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...