Как я могу явно установить направленность двунаправленного текста, чтобы он правильно отображался, когда два конфликтующих языка используются вместе?

Question

Я пытаюсь реализовать локализацию, и направленность содержимого отбрасывается, когда я пытаюсь отобразить смешанные символы на странице.

Я использую файл json, в котором хранится весь текст, и который вставляется в dom с помощью шаблона Vue.js.

Символы отображаются правильно до тех пор, пока в одной строке не будет текста RTL и LTR. В этот момент текст отображается некорректно.

Что работает: [АНГЛИЙСКИЙ АНГЛИЙСКИЙ АНГЛИЙСКИЙ] Также работает: [АРАБСКИЙ АРАБСКИЙ АРАБСКИЙ]

Что не получается: [Арабский Арабский Английский Арабский]

Направленность всего файла установлена ​​на "rtl" на главном элементе HTML, а language = "ar".

Что я могу использовать в терминах символов Юникода или какого-либо другого кода, который позволит мне выделить английское слово в предложении, которое окружено арабским текстом, и сохранить направленность содержимого?

Answer 1

Атрибут HTML dir можно использовать не только для самого документа, но и для элементов.Таким образом, вы можете обернуть любой текст на английском языке внутри текста RTL, например, в элемент span и установить атрибут dir="ltr".Кроме того, вы можете добиться того же с помощью CSS, используя direction: ltr; в сочетании с unicode-bidi: bidi-override;.

. Вы также можете использовать тег <bdi>, но в настоящее время он не очень хорошо поддерживается (пока только Firefox и Chrome).

Еще один подход, без использования любого окружающего HTML-элемента, заключался бы в вставке непечатаемой left-to-right marker через сущность ‎ после любого знака препинания, но это не представляется возможным.

html {
  direction: rtl;
}

.ltr {
  direction: ltr;
  unicode-bidi: bidi-override;
}

<h3>via the <code>dir</code> attribute</h3>
لكن لا بد أن <span dir="ltr">Lorem Ipsum!</span>&rlm;أوضح لك أن كل
<h3>via CSS</h3>
لكن لا بد أن <span class="ltr">Lorem Ipsum!</span>&rlm;أوضح لك أن كل
<h3>Using the <code>&lt;bdi&gt;</code> tag</h3>
لكن لا بد أن <bdi>Lorem Ipsum!</bdi> أوضح لك أن كل
<h3>Using <code>&amp;lrm;&lrm;</code></h3>
لكن لا بد أن Lorem Ipsum!&lrm; أوضح لك أن كل