title: How to force a piece of text to be 'direction ltr' inside a 'direction rtl' paragraph
body: <p>So, phone numbers are always ltr (left to right).</p>
  
  <p>Working on a multilingual website I need to insert a phone number (with a '+' prefix and numbers separated by '-') inside a text paragraph that has direction rtl (for relevant languages of course)</p>
  
  <p>So I have something like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ltr #test {direction:ltr}
  .rtl #test {direction:rtl}
  #phone {direction:ltr}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ltr"&gt;&lt;p id="test"&gt;Please call to &lt;span id="phone"&gt;+44-123-321&lt;/span&gt; for some help.&lt;/p&gt;&lt;/div&gt;
  &lt;div class="rtl"&gt;&lt;p id="test"&gt;Please call to &lt;span id="phone"&gt;+44-123-321&lt;/span&gt; for some help.&lt;/p&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Of course this is not working because '<code>direction</code>' only works for block elements and '<code>span</code>' is an inline element. I need the phone number to be inside the paragraph so I can't change '<code>span</code>' to '<code>display:inline</code>'</p>
  
  <p>I'm being clear?</p>
  
  <p>How to make it work?</p>