title: Ordering span elements independent of text directionality
body: <p>Say we have a number of span text elements (2 or more) with 'dir' specified as RTL:</p>
  
  <pre><code>&lt;div dir="rtl"&gt;
  &lt;span&gt;First-Element&lt;/span&gt;
  &lt;span&gt;Second-Element&lt;/span&gt;
  &lt;span&gt;Third-Element&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and we would like them to appear in order from right to left:</p>
  
  <pre><code>Third-Element Second-Element First-Element
  </code></pre>
  
  <p>This works fine if the text elements have RTL directionality (text from Arabic, Farsi, Hebrew etc.), or if they are interleaved with RTL elements:</p>
  
  <pre><code>&lt;div dir="rtl"&gt;
  &lt;span&gt;First-Element-RTL&lt;/span&gt;
  &lt;span&gt;Second-Element-RTL&lt;/span&gt;
  &lt;span&gt;Third Element-RTL&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>or:</p>
  
  <pre><code>&lt;div dir="rtl"&gt;
  &lt;span&gt;First-Element-LTR&lt;/span&gt;
  &lt;span&gt;Second-Element-RTL&lt;/span&gt;
  &lt;span&gt;Third Element-LTR&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But if all the elements are of LTR directionality, then the order of the language is used, and we get the <strong>undesired ordering</strong>:</p>
  
  <pre><code>First-Element Second-Element Third-Element
  </code></pre>
  
  <p>How can we achieve a fixed order of the elements independent of the directionality of the text in the elements - that is, the technique (whether html or css) should be indifferent to the language of individual text elements.</p>
  
  <p>This issue arises when the content of span elements is variable and provided by the user, for example user names that can be in an RTL language or English.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>I have to emphasize that we are talking about ordering the text spans relative to each other, not changing the flow of the text itself, so 'English Text' should appear as is, not as 'txeT hsilgnE'.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>This is a simple HTML segment to test the answer provided by Jukka. This presents as 'bar foo' aligned to the right. It shows (at least on my browser) that there is no need for <code>{ unicode-bidi: bidi-override; }</code> at the container level to get the desired result.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          span { unicode-bidi: embed; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div dir="rtl"&gt;
  &lt;span&gt;foo&lt;/span&gt;
  &lt;span&gt;bar&lt;/span&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>