title: Bidirectional text and numbers
body: <p>I have a website that displays in two languages - english and farsi. The title of a list item <strong>can be in both languages mixed at the same time</strong>. All ok until here as far as you have text only it will render ok using <code>direction:rtl</code> in css.</p>
  
  <p>But the catch is that <strong>I can also have a number inside or at the end of title</strong> (which in farsi is written and read same as in english - left to right). This ends up with a problem since no matter where I put that number it will mess up the words order in the title (the number is an ad ID at the end of the title).</p>
  
  <p>To solve this issue I use <code>&amp;rlm</code> and <code>&amp;lrm</code> infront of the id - but the catch is that I have to switch this two according which language is choosen.</p>
  
  <p><img src="https://i.stack.imgur.com/i3vAs.png" alt="Bidirectional text with number problem"></p>
  
  <p>My correct html is as this (<code>&amp;rlm;</code> is what fixes the id number issue in farsi):</p>
  
  <pre><code>&lt;h3&gt;
     The name of my خدمات باشد is long
     &lt;span style="color:#999;"&gt;&amp;rlm;#89798798&lt;/span&gt;
  &lt;/h3&gt; 
  </code></pre>
  
  <p>JS FIDDLE: <a href="http://jsfiddle.net/WzF2D/" rel="nofollow noreferrer">http://jsfiddle.net/WzF2D/</a></p>
  
  <p>I tried setting <code>direction:ltr</code> on the span wrapping around ID but it still won't work. I also tried to use <code>unicode-bidi:embed</code> on <code>h3</code> but also no go.</p>
  
  <p><strong>How can I solve this by using css only without having to rely on <code>&amp;rlm;</code>?</strong></p>