<div class="container">
  <p>Default text alignment in the first example is <code>right</code> because we've set the <code>direction</code> of the demo to be <code>rtl</code>. The text is Arabic. The English section will get the same alignment as parent (default for the <code>direction</code> used) but for a <code>ltr</code> language that we've set on it.</p>
  <div class="demo demo-1">
    العرب فرع من الشعوب السامية تتركز أساسًا في الوطن العربي بشقيه الآسيوي والإفريقي إضافة إلى الساحل الشرقي لإفريقيا وكأقليات في إيران وتركيا ودول المهجر، واحدهم عربي ويتحدد هذا المعنى على خلفيات إما إثنية أو لغوية أو ثقافية.[18][19] سياسيًا العربي هو كل شخص لغته الأم العربية ووالده عربي. وتوجد أقليات عربية بأعداد معتبرة في الأمريكيتين وفي أوروبا وإيران وتركيا.
    <div class="child">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore repellendus quisquam quasi ipsa assumenda reprehenderit optio neque recusandae quam sapiente aut eos. Veniam delectus impedit laborum fugit consequuntur officia iusto?
    </div>
  </div>
  <p>The text is centered using <code>text-align: center;</code></p>
  <div class="demo demo-2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore repellendus quisquam quasi ipsa assumenda reprehenderit optio neque recusandae quam sapiente aut eos. Veniam delectus impedit laborum fugit consequuntur officia iusto?
  </div>
  <p>Text is justified: lines will be "expanded" to fill the entire width of the line box, using <code>text-align: justify;</code></p>
  <div class="demo demo-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore repellendus quisquam quasi ipsa assumenda reprehenderit optio neque recusandae quam sapiente aut eos. Veniam delectus impedit laborum fugit consequuntur officia iusto?
  </div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 50px auto;
  max-width: 700px;
}

.demo {
  max-width: 500px;
  margin: 30px auto;
  background-color: #0099cc;
  color: white;
  padding: 20px;
}

.demo-1 {
  direction: rtl;
  /* so the default text alignment is right */
}

.child {
  margin-top: 30px;
  direction: ltr;
  text-align: match-parent;
}

.demo-2 {
  text-align: center;
}

.demo-3 {
  text-align: justify;
}