阿拉伯语网站从右向左排版问题

Sep 06, 2019 • edited Mar 18, 2020

阿拉伯语网站从右向左排版问题

阿拉伯语网站从右向左排版

阿拉伯语,波斯语,希伯来文等,书写和阅读习惯都是从右向左,因此文字排版也要求是从右向左。

可见如果要实现自右向左的阅读顺序,用到direction:rtl 就够了。direction属性是可继承的,所以常见的做法是给html元素增加一条属性,就能覆盖全局了。

在CSS中添加

html{direction:rtl;unicode-bidi:bidi-override;}

关于此样式的详细解释:

direction:

语法:

direction : ltr | rtl | inherit

取值:

ltr :  默认值。文本从左到右流入

rtl :  文本从右到左流入

inherit :  文本流入方向由继承获得

说明:

用于设置文本流入的方向。

此属性不会影响拉丁文的字母数字字符,它们总是以 ltr 值被呈递。但是此属性会作用于拉丁文的标点符号。

假如您想应用此属性于内联文本,您必须设定 unicode-bidi 属性为 embed 或 bidi-override 。

unicode-bidi:

语法:

unicode-bidi : normal | bidi-override | embed

取值:

normal :默认值。对象不打开附加的嵌入层,对于内联要素,隐式重排序跨对象边界进行工作

bidi-override :严格按照 direction 属性的值重排序。忽略隐式双向运算规则

embed :对象打开附加的嵌入层, direction 属性的值指定嵌入层,在对象内部进行隐式重排序

说明:

用于同一个页面里存在从不同方向读进的文本显示。与 direction 属性一起使用。

假如您想应用 direction 属性于内联文本,您必须设定此属性值为 embed 或 bidi-override 。

Unicode 双向运算法则自动翻转嵌入字符顺序依照它们固有的流动方向。例如,英文文档的默认书写方向是左-右,假如其

中包含的部分其他语种的字符其书写方向是右-左,双向运算法则就可以用来代理用户正确的反转其流动方向。

这的确是个很特别的一种语言,但阿拉伯语网站设计的时候就要用到, 当然在实际使用过程中还有一些小问题我们要自己注意!

调整英文、数字、标点的顺序

阿拉伯语网站从一开始就把整个页面方向定位了从右到左,而一旦遇到纯英文、数字等情况,又希望保持从左到右的显示。

就需要使用HTML代码dir属性等于ltr(从左到右),例如:

<span dir='ltr'>9401 (From 9401 To 9599 Odd) LIBERTY CIR , ANCHORAGE, AK 99515-1428, USA</span>
#技术笔记

谷歌21岁生日,一起來回顾这家伟大公司发展史

R-Studio 8.9 Build 173593数据恢复软件绿色中文破解版