html+css实现文本从右向左

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

关于此样式的详细解释:

1. direction:

语法: direction : ltr | rtl | inherit

ltr

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

rtl

文本从右到左流入

inherit

文本流入方向由继承获得

说明:

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

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

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

2、 unicode-bidi:

语法: unicode-bidi : normal | bidi-override | embed

normal

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

bidi-override

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

embed

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

说明:

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

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

总结:

Unicode 双向运算法则自动翻转嵌入字符顺序依照它们固有的流动方向。

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

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

具体的举例分析可看:

阿拉伯语网站的CSS要点总结

国际化 - 通用 LTR/RTL 布局解决方案

二、html标签实现

如果您的浏览器支持 bi-directional override (bdo),下一行会从右向左输出 (rtl);

Here is some Hebrew text

所有浏览器都支持 标签。

属性值描述

dir

ltr

rtl

定义文字的方向

详细描述:

HTML 标签

本文参考:

https://www.onepound.cn/yc/?p=10120

https://fortysevenmedia.com/blog/archives/styling_right-to-left_text_with_css_on_a_multi-lingual_site

http://www.w3.org/International/questions/qa-html-dir#blockelements

Copyright © 2088 《一炮特攻》新版本全球首发站 All Rights Reserved.
友情链接