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 右对齐 完全倒叙这篇文章解释得更详细:我的小树林