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

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

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

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

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

Что не удалось: [арабский арабский английский арабский]

Направленность всего файла установлена ​​на «rtl» для основного элемента HTML, а язык = «ar».

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


javascript localization html vue.js bidirectional
person Randall    schedule 25.04.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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; أوضح لك أن كل

person Constantin Groß    schedule 25.04.2019
comment
Отлично. Это помогает мне решить мою проблему. - person Randall; 01.05.2019