Справа налево (rtl) отображение английских слов в html


Проблема вот в чем,

<p>Hi world</p>

LTR:

Hi world

RTL:

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;

Есть ли в любом случае, чтобы получить текст в world Hi форму с помощью css.

Спасибо

3 2

3 ответа:

Нет, это невозможно, и направленность не предназначена для использования в подобных операциях.

Свойство 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"]