<div class="container">
  <div class="element" dir="ltr">
    <p>This is a paragraph that has its directionality set to LTR using the <code>dir</code> attribute on this element. It contains an Arabic line, with a direction also set to <code>ltr</code>, simply because it inherits the directionality from the element it belongs to. The punctuation marks are reversed. <span style="color: deepPink">نظام غذائى يساعدك على عودة مستوى السكر بالدم إلى طبيعته!! </span>And the text then continues with English characters.</p>
  </div>
  <p>
    The following shows the same paragraph of text with the direction of the Arabic piece of text set to <code>rtl</code> using the <code>direction</code> property in conjunction with the <code>unicode-bidi</code> property. Notice how the punctuation mark are moved to the left, which is the correct position of punctuation mark in Arabic.
  </p>
  <div class="element">
    <p>This is a paragraph that has its directionality set to LTR using the <code>dir</code> attribute on this element. It contains an Arabic line, with a direction also set to <code>ltr</code>, simply because it inherits the directionality from the element it belongs to. The punctuation marks are reversed. <span class="arabic"> نظام غذائى يساعدك على عودة مستوى السكر بالدم إلى طبيعته!!</span>   And the text then continues with English characters.</p>
  </div>
</div>
body {
  background-color: #dff3f9;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto 0;
  width: 90%;
}

.element {
  padding: 2em;
  background-color: white;
  font-size: 1.2em;
}

.arabic {
  color: #f22b96;
  direction: rtl;
  unicode-bidi: bidi-override;
}