title: dir="rtl" vs. text-align: right. What is the difference between them?
body: <p>The html attribute <code>dir</code> and the css <code>text-align</code> property acheive the same result. E.g. consider the two cases:  </p>
  
  <ol>
  <li><code>dir="rtl"</code>  </li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p dir="rtl"&gt;
    one two.
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="2">
  <li><code>text-align: right</code></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p style="text-align: right;"&gt;
    one two.
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The only difference between these two results is the placement of dot. Why isn't <code>&lt;p dir="rtl"&gt; one two. &lt;/p&gt;</code> translated to <code>.owt eno</code>? If it can't then what is the use of <code>dir</code> attribute at all?</p>