通过HTML和CSS设置文字方向

HTML文本中默认的文本方向是left to right。但对于古汉语或者阿拉伯语等语言，文本方向则是right to left。如何实现呢？

1. HTML方式： 点击进入官方网页

HTML代码如下：

a bc de.
A BC DE%

显示效果如下：

a bc de.
%ED CB A

可见：通过HTML中的bdo标签改变文字方向，是依照从右向左的顺序依次输出bdo标签中的每个字符。但输出的内容还是从屏幕的左侧依次向右输出。不要与text-align:right和float:right搞混。

2. CSS方式：{direction:rtl;}

HTML和CSS如下：

It's a beautiful world, isn't it? I think it is.?!@#$%[]{}
It's a beautiful world, isn't it? I think it is.?!@#$%[]{}
It's a beautiful world, isn't it? I think it is.?!@#$%[]{}abc!
It's a beautiful world, isn't it? I think it is.?!@#$%[]{}abc!

显示效果如下：

                                            {}[]%$#@!?.It's a beautiful world, isn't it? I think it is

It's a beautiful world, isn't it? I think it is.?!@#$%[]{}abc!

                                            !It's a beautiful world, isn't it? I think it is.?!@#$%[]{}abc

It's a beautiful world, isn't it? I think it is.?!@#$%[]{}abc!

可见：格式上，使用了direction的文本呈现右对齐；内容上，可以将这段内容中中最后一个非符号字符(含)之前看成是文本部分，最后的符号看成是符号部分，每个符号都是一个独立的部分。（如果一个符号前后都有文本字符，那这么符号将被认为是文本部分。）然后在页面上从右向左倒序输出以上的所有部分，即，首先输出完整的文本部分，然后再倒序一次输出所有符号部分。

3. CSS方式：{direction:rtl; unicode-bidi: bidi-override;}

HTML和CSS如下：（对2中的源码进行修改，在style部分添加unicode-bidi: bidi-override;部分）

It's a beautiful world, isn't it? I think it is.?!@#$%[]{}

显示效果如下：

                                                {}[]%$#@!?.si ti kniht I ?ti t'nsi ,dlrow lufituaeb a s'tI

可见：每一个字符都是一个独立的个体，页面将从右向左依次倒叙输出所有字符。

 

总结见下表：

(纯从文字技巧层面来看，1和3的实现比较彻底，但从语义来看，可能2有实际的应用意义，并不确定，有待以后探究！)

对设置文字方向的几种方式的比较

方式 格式 文本 1 左对齐 完全倒叙 2 右对齐 部分倒叙 3 右对齐 完全倒叙

这篇文章解释得更详细：我的小树林