title: How can I explicitly set directionality of bidirectional text so it displays properly when two conflicting languages are used together?
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>What works:   [ENGLISH ENGLISH ENGLISH]
  Also works:    [ARABIC ARABIC ARABIC]</p>
  
  <p>What fails:   [Arabic Arabic English Arabic]</p>
  
  <p>The directionality of the entire file is set to "rtl" on the main HTML element, and the language="ar".</p>
  
  <p>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?</p>