<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>