How can I explicitly set directionality of bidirectional text so it displays properly when two conflicting languages are used together?

Question

I'm trying to implement localization and the directionality of the content gets thrown off when I try to display the mixed characters on the page.

I'm using a json file which holds all of the text content, and that is being inserted into the dom using a Vue.js template.

The characters display correctly until there is a mixture of RTL and LTR text in the same string. At that point, the text does not display correctly.

What works: [ENGLISH ENGLISH ENGLISH] Also works: [ARABIC ARABIC ARABIC]

What fails: [Arabic Arabic English Arabic]

The directionality of the entire file is set to "rtl" on the main HTML element, and the language="ar".

What can I use in terms of unicode characters or some other code that will allow me to section off the English word in a sentence that is surrounded by arabic text and maintain the directionality of the content?

Answer 1

You can use the HTML dir attribute not only on the document itself, but also on elements. So you can wrap any english text inside an RTL text in a span alement for example and set the attribute dir="ltr". Alternatively, you can achieve the same via CSS using direction: ltr; in conjunction with unicode-bidi: bidi-override;.

You could also use the <bdi> tag, but it's currently not well supported (only Firefox and Chrome so far).

Yet another approach, whithout using any surrounding HTML element, would be to insert a non-printable left-to-right marker via the ‎ entity after any punctuation mark, but that doesn't seem very feasible.

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