<style>
    *[dir] { unicode-bidi: embed }
    div.group { border: 1px lightblue solid; padding: 4px; margin: 8px;  }
</style>
<p>
    In each box below, the words or letters should be in the same order on every line.
</p>

<div class="group">
    <div>
        Lorem <span dir="rtl">ipsum dolor</span> sit amet.
    </div>
    <div>
        Lorem <span dir="rtl">ipsum</span><span dir="rtl"> dolor</span> sit amet.
    </div>
    <div>
        Lorem <span dir="rtl">ipsum </span><b><span dir="rtl">dolor</span> <i>sit</i> amet</b>.
    </div>
</div>

<div class="group">
    <div>
        Lorem <span dir="rtl"> if </span> sit amet.
    </div>
    <div>
        Lorem <span dir="rtl"> </span><span dir="rtl">if </span> sit amet.
    </div>
    <div>
        Lorem <span dir="rtl"> </span><b><span dir="rtl">if </span> <i>sit</i> amet</b>.
    </div>
</div>

<div class="group">
    <div style="direction: rtl; text-align: left;">
        <span dir="rtl">a b</span>
    </div>
    <div style="direction: rtl; text-align: left;">
        <span dir="rtl">a</span><span dir="rtl"> b</span>
    </div>
</div>

<div class="group">
    <div dir="rtl">
         <span dir="ltr"> </span>  .
    </div>
    <div dir="rtl">
         <span dir="ltr"></span><span dir="ltr"> </span>  .
    </div>
    <div dir="rtl">
         <span dir="ltr"> </span><b><span dir="ltr"></span> <i></i> </b>.
    </div>
</div>
