通过HTML和CSS设置文字方向

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

1. HTML方式：<bdo dir="rtl"></bdo> 点击进入官方网页

HTML代码如下：

<bdo dir="ltr">a bc de.</bdo>
<bdo dir="rtl">A BC DE%</bdo>

显示效果如下：

a bc de.
%ED CB A

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

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

HTML和CSS如下：

<p style="direction: rtl;">It's a beautiful world, isn't it? I think it is.?!@#$%[]{}</p>
<p>It's a beautiful world, isn't it? I think it is.?!@#$%[]{}</p>
<p style="direction: rtl;">It's a beautiful world, isn't it? I think it is.?!@#$%[]{}abc!</p>
<p>It's a beautiful world, isn't it? I think it is.?!@#$%[]{}abc!</p>

显示效果如下：

                                            {}[]%$#@!?.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;部分）

<p style="direction: rtl; unicode-bidi: bidi-override;">It's a beautiful world, isn't it? I think it is.?!@#$%[]{}</p>

显示效果如下：

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

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

总结见下表：

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

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

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

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

通过HTML和CSS设置文字方向

猜你喜欢