title: How to properly display RTL text followed by number in svg text element for Chrome/Firefox/IE/Edge?
body: <p>The following code displays RTL text as intended on Chrome/Firefox, but not IE/Edge. I want it to start from x coordinate and increase to left</p>
  
  <pre><code>&lt;text x="300" y="10" style="direction: rtl;"&gt;מאי - יוני 2016&lt;/text&gt;
  </code></pre>
  
  <ul>
  <li>If I apply <strong>text-anchor: end</strong> - the text overlaps with number in IE / Edge, but in Chrome / Firefox is displayed from x coordinate to the right</li>
  </ul>
  
  <p><a href="https://jsfiddle.net/blteblte/ru7xzydv/2/" rel="nofollow noreferrer">https://jsfiddle.net/blteblte/ru7xzydv/2/</a></p>
  
  <p>Is there any unified approach to satisfy at least the most popular browsers?</p>