title: Change direction of negative number with combination of LTR and RTL content
body: <p>Here is my HTML structure:</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>div{
    direction: rtl;
  }
  
  span{
    direction: ltr;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;span&gt;امروز -2&lt;/span&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is expected result:</p>
  
  <p><a href="https://i.stack.imgur.com/XWKOV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XWKOV.png" alt="enter image description here"></a></p>
  
  <p>As you see, <code>-</code> sign should come in the beginning of the number. How can I do that?</p>
  
  <p><strong>Note:</strong> The direction of <code>div</code> should be <code>rtl</code>.</p>
  
  <hr>
  
  <p><strong>ٍEDIT:</strong> I generate that number like this:</p>
  
  <pre><code>$sums_value = sprintf("%+d",$sums_value);
  
  /* 
  sums_value = -2 //=&gt; -2
  sums_value = 2  //=&gt; +2
  </code></pre>
  
  <p>So the number has right format, but I don't know why it will be broken in the output:</p>
  
  <p><a href="https://i.stack.imgur.com/N9Xqs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/N9Xqs.png" alt="enter image description here"></a></p>