<h3>1. English Original</h3>

<p class="example-1">To make sure our containing element stretches out appropriately, let's set <code>html, body { width: 100%; }</code>.</p>

<h3>2. Arabic LTR</h3>

<p class="arabic example-2">للتأكد من أن هذا العنصر الاحتوائي يمتد بشكلٍ مناسب يجب أن نعيّن <code>html, body { width: 100%; }</code>.</p>

<h3>3. Arabic RTL with LTR Inline Code</h3>

<p class="arabic example-3">للتأكد من أن هذا العنصر الاحتوائي يمتد بشكلٍ مناسب يجب أن نعيّن <code>html, body { width: 100%; }</code>.</p>

<h3>4. Arabic RTL with LTR Inline Code (Bidirectional)</h3>

<p class="arabic example-4">للتأكد من أن هذا العنصر الاحتوائي يمتد بشكلٍ مناسب يجب أن نعيّن <code>html, body { width: 100%; }</code>.</p>
/* first some general styles */
body {
    font-style: normal;
    font-size: 16px;
    line-height: 1.6em;
    color: #4b4b4b;
    background: #eceff1;
    padding: 1% 4%;
}

code {
    border: solid 1px #b0bec5;
    padding: 4px 4px 2px;
    background: #cfd8dc;
    font-size: 14px;
    border-radius: 3px;
    white-space: nowrap;
}

/* set direction rtl for all arabic content */
.arabic {
  direction: rtl;
}

/* try and fix code in example 3 by overriding direction */
.example-3 code {  
    direction: ltr;
}

/* fix it properly in example 4 */
.example-4 code {  
    direction: ltr;
    unicode-bidi: embed;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.