Смешивание RTL и LTR текста в HTML - PullRequest
Новая
       121

Смешивание RTL и LTR текста в HTML

2 голосов
/ 19 июня 2020 

.red {
  color: red;
  direction: rtl;
}

.green {
  color: green;
  direction: rtl;
}

p {
  direction: ltr;
}
<p>Example: 
1. <span class="red">ااڡوںںطں، ااڡوںںطو</span> 
2. <span class="green">ااقونيطن هو قاتل النمر</span> 
</p>

Приведенные выше HTML и CSS отображаются следующим образом:

sample of current output

Обратите внимание, что в HTML «красный» стоит перед «зеленым» в порядке слева направо, тогда как при рендеринге они меняются местами.

Если я заменю «2». с любой латинской буквой промежутки меняются местами.

Как сделать так, чтобы два промежутка (и все прямые дочерние элементы <p>) отображались в порядке слева направо?

CSS - предпочтительны только решения.

Ответы [ 2 ]

5 голосов
/ 19 июня 2020

Причина, по которой ваш текущий текст ведет себя так, заключается в том, что числа не имеют «сильного направления» и могут быть встроены в текст, идущий в любом направлении. Независимо от вашей разметки и CSS, браузер видит «ااڡوںںطں ، ااڡوںںطو 2. ااقونيطن هو قاتل النمر» как одну строку и определяет, что она должна отображаться справа налево.

Замена » 2 "с латинскими буквами (или словом) заставляет строку быть разделенной на три части, где она меняет направление.

Чтобы заставить браузер обрабатывать две части текста c Arabi по отдельности, вы можете используйте элемент bdi (Bi-Direction Isolate) вместо span для красных и зеленых участков. Обратите внимание, что вам не нужно указывать конкретное направление любого текста, браузер обработает это в соответствии с правилами Unicode. 

.red {
  color: red;
}

.green {
  color: green;
}
<p>Example:
1. <bdi class="red">ااڡوںںطں، ااڡوںںطو</bdi> 
2. <bdi class="green">ااقونيطن هو قاتل النمر</bdi>
</p>

CSS -только эквивалент этого unicode-bidi: isolate;, хотя MDN отмечает, что его прямое использование не рекомендуется в пользу элементы, которые подразумевают это (предположительно, включая bdi). 

.red {
  color: red;
  unicode-bidi: isolate;
}

.green {
  color: green;
  unicode-bidi: isolate;
}
<p>Example:
1. <span class="red">ااڡوںںطں، ااڡوںںطو</span> 
2. <span class="green">ااقونيطن هو قاتل النمر</span>
</p>
0 голосов
/ 19 июня 2020

вы можете использовать атрибут dir="rtl" в родительском элементе 

.red {
  color: red;
}

.green {
  color: green;
}

p {
  
}
  <p dir="rtl">Example: <span class="red">ااڡوںںطں، ااڡوںںطو</span>... <span class="green">ااقونيطن هو قاتل النمر</span> 
    </p>
...