<div class="container" dir="ltr">
  <div class="element" dir="ltr">
    <p>
      This text is inside an element that has a <code>ltr</code> directionality set using the <code>dir</code> attribute. 
    </p>
  </div>
  <hr>
  <div class="element" dir="rtl">
    <p>This text is inside an element that has <code>rtl</code> directionality set using the <code>dir</code> attribute.</p>
  </div>
  <hr>

  <em>The following piece of text does not have any directionality set. It will inherit its directionality from its container that has <code>dir="ltr"</code>.</em>

  <div class="element">
    <p> التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل. ففي العلاج بالتدليك نستخدم اللمس لتطبيق الضغط علي بشرة الجسم و عضلاته و اوتارة و اربطتة</p>
  </div>
  <hr>

  <em>The following text has its directionality set to <code>auto</code> using the <code>dir</code> attribute. The browser will determine its directionality based on the text content inside it, which in this case is Arabic. Hence, it will match the selector <code>:dir(rtl)</code>.</em>

  <div class="element" dir="auto">
    <p>التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل. ففي العلاج بالتدليك نستخدم اللمس لتطبيق الضغط علي بشرة الجسم و عضلاته و اوتارة و اربطتة</p>
  </div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto;
  max-width: 700px;
  background-color: white;
  padding: 25px;
}

.element {
  padding: 20px;
  background-color: #eee;
  margin: 20px auto;
}

em {
  color: grey;
  font-size: .8em;
}

p:-moz-dir(ltr) {
  color: #0099cc;
}

p:-moz-dir(rtl) {
  color: #009966;
}

p:dir(ltr) {
  color: #0099cc;
}

p:dir(rtl) {
  color: #009966;
}