eg:
<html lang="zh-ch"> <head> <meta charset="utf-8" /> <title>test</title> <style> .test { width: 100px; height: 100px; } .lr-tb { direction: rtl; unicode-bidi: bidi-override; } </style></head> <body> <div class="test lr-tb"> 本段文字将按照<span>水平从右到左</span>的书写方向进行流动。 </div></body>
不同的语言书写习惯和排版习惯都不一样,通常情况下,我们阅读文章都是从左往右看,但是阿拉伯语,波斯语,希伯来文,维语等,书写和阅读习惯都是从右向左,因此文字排版也要求是从右向左。解决方法:
在CSS中添加下面这个样式即可。
html{direction:rtl;unicode-bidi:bidi-override;}
关于此样式的详细解释:
语法: direction : ltr | rtl | inherit | |
ltr | 默认值。文本从左到右流入 |
rtl | 文本从右到左流入 |
inherit | 文本流入方向由继承获得 |
说明:
用于设置文本流入的方向。
此属性不会影响拉丁文的字母数字字符,它们总是以 ltr 值被呈递。但是此属性会作用于拉丁文的标点符号。
假如想应用此属性于内联文本,必须设定 unicode-bidi 属性为 embed 或 bidi-override 。
语法: unicode-bidi : normal | bidi-override | embed | |
normal | 默认值。对象不打开附加的嵌入层,对于内联要素,隐式重排序跨对象边界进行工作 |
bidi-override | 严格按照 direction 属性的值重排序。忽略隐式双向运算规则 |
embed | 对象打开附加的嵌入层, direction 属性的值指定嵌入层,在对象内部进行隐式重排序 |
说明:
用于同一个页面里存在从不同方向读进的文本显示。与 direction 属性一起使用。
假如想应用 direction 属性于内联文本,必须设定此属性值为 embed 或 bidi-override 。
Unicode 双向运算法则自动翻转嵌入字符顺序依照它们固有的流动方向。
例如,英文文档的默认书写方向是左-右,假如其中包含的部分其他语种的字符其书写方向是右-左,双向运算法则就可以用来代理用户正确的反转其流动方向。
这的确是个很特别的一种语言,但阿拉伯语网站设计的时候就要用到, 当然在实际使用过程中还有一些小问题要自己注意!
具体的举例分析可看:
<html><body><p> 如果您的浏览器支持 bi-directional override (bdo),下一行会从右向左输出 (rtl);</p><bdo dir="rtl"> Here is some Hebrew text</bdo></body></html>
所有浏览器都支持 <bdo> 标签。
dir | ltr rtl | 定义文字的方向 |
详细描述:
参考文章:https://www.cnblogs.com/redFeather/p/16524132.html