direction和unicode-bidi
来源:互联网 发布:ppt图表无法修改数据 编辑:程序博客网 时间:2024/05/19 20:56
在做多语言页面,接触过阿利伯语、希伯来语的同学肯定了解书写方向的重要性,包括我们五四运动前的书写顺序也是从右到左的。css中 unicode-bidi
和direction
属性决定了HTML或XML文字渲染方向,两个属性结合使用可以改变文字书写顺序
direction
direction属性有三个值
inherit
使用父元素的设置ltr
默认值,left to right,从左到右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>
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
- 文字反排unicode-bidi、direction
- Unicode Bidi 是一门学问
- BIDI算法 (Unicode Bidirectional Algorithm)
- Understanding Bidirectional (BIDI) Text in Unicode
- direction
- direction
- lucene Direction类 和 term查询
- BiDi简介
- BiDI大全
- html:特殊符号和 BIDI 文本的字符项目 http://114.xixik.com/character/
- 使用Direction的include指令和errorPage的一点心得
- 五角星自由变换和移动 & 结构体数组初始化 & DIRECTION
- BiDi 排版算法
- ICU4J BiDi算法实现
- BiDi 排版算法
- BIDI光模块百科
- New Direction...
- 展望——量化未来真的能跑赢曾经的历史么?(一)
- Ubuntu14.04 下更新cmake2.8.x至3.2.2
- twitter 雪花算法 golang 实现
- SuperAgent
- 浅谈JavaScript实现文本框的placeholder
- direction和unicode-bidi
- 在centos 7中搭建lamp平台
- stringstream的用法
- MyISAM 和InnoDB
- (GIS可视化)热点分析原理及实现
- (转-原作者不详)-浅析JavaScript访问对象属性和方法及区别
- poj 2299 树状数组(离散化)求逆序数
- 数据流重定向-导出训练日志
- string insert()函数的用法