Stackoverflow - How to produce true rtl text with CSS

http://stackoverflow.com/q/8597054/918414

by J. Albert Bowden

HTML

<bdo dir="rtl">Here is some Hebrew text!</bdo>
<p>Here is some Hebrew text!</p>

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <script>
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-23915674-6']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
    
var headerUri = 'http://stackoverflow.com/q/8597054/918414',
    headerCaption = 'How to produce true rtl text with CSS';
document.body.insertAdjacentHTML( 
    'afterBegin',
      '<a href="' + headerUri + '" '
    + 'target="_top" '
    + 'onmouseover="this.style.opacity=\'.95\'" '
    + 'onmouseout="this.style.opacity=\'1\'" '
    + 'style="'
        + 'background-color: black;'
        +...

CSS

p {
    direction: rtl; 
    text-align: left;
    unicode-bidi: bidi-override;
}