从右到左(rtl)英语单词显示在html中



>问题是这样的,

<p>Hi world</p>

升:

Hi world

劳教:

world Hi

我无法得到这个 RTL 显示器不使用 css.

我现在尝试了这些 css 属性。

direction: rtl;
unicode-bidi: embed || normal; //same effect, nothing changes.
unicode-bidi: bidi-override; //each letter comes from r-t-l. Like: dlrow iH
text-align: right;

无论如何可以使用 css 将文本转换为world Hi形式。

谢谢

不,这是不可能的,方向性不适合用于这样的操作。

direction 属性及其对应的 HTML 属性 dir 属性设置中性方向文本的方向性。它不会影响具有较强固有方向性的字符串,即使空格等中性字符介入也是如此。值bidi-override意味着它所说的,它只是强制一个单一的写作方向。

您还需要处理单词,并且由于CSS没有可以在此处使用的伪元素,因此您需要使用真正的元素,例如标记

<p><span class=w>Hi</span> <span class=w>world</span></p>

然后,您可以对整个元素和单个单词使用不同的方向性设置:

span { unicode-bidi: embed;}
p { unicode-bidi: bidi-override; direction: rtl;  text-align: left; }   

我一直认为阅读方向是在 html 开始标签中设置的,如下所示:

<html dir="rtl">

我认为使用"rtl"你会得到这样的输出:"dlrow iH"

由于您无法在CSS中检测到单独的单词,因此我建议使用JavaScript来解决此问题:

var string = "Hi world";
var array = string.split(" ");
var reversed = array.reverse();
reversed
-> ["world", "Hi"]

最新更新