<div class="container">
  <p dir="auto">This paragraph will be aligned from left because it uses the <code>auto</code> direction and the first character is a latin character. Unlike the next paragraph which is written in Arabic, it will be aligned to right and the punctuation will be inserted correctly on the left side because the first character is from the Arabic alphabet.</p>
  
  <p dir="auto">هذه الجملة ستكتب من اليمين إلى اليسار لأن اتجاه النص محدد تلقائياً وأول حرف في الجملة هو حرف عربي.</p>
</div>

.container {
  max-width: 700px;
  margin: 0 auto;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.6;
  padding: 15px;
  border: 1px solid #eee;
}

code {
  background: #eee;
  padding: 5px;
}