Тег <bdo> в HTML — примусовий напрямок тексту rtl і ltr

HTML

<table class="grid">
    <thead><tr><th>розмітка</th><th>на екрані</th><th>що сталося</th></tr></thead>
    <tbody>
        <tr>
            <td><code>ABC 123</code></td>
            <td class="demo">ABC 123</td>
            <td>звичайний текст, для порівняння</td>
        </tr>
        <tr>
            <td><code>&lt;bdo dir="rtl"&gt;</code></td>
            <td class="demo"><bdo dir="rtl">ABC 123</bdo></td>
            <td>переворот: цифри теж поїхали</td>
        </tr>
        <tr>
            <td><code>&lt;bdo&gt;</code> без dir</td>
            <td class="demo"><bdo>ABC 123</bdo></td>
            <td>нічого не сталося — атрибут обов'язковий</td>
        </tr>
        <tr>
            <td><code>&lt;bdi dir="rtl"&gt;</code></td>
            <td class="demo"><bdi dir="rtl">ABC 123</bdi></td>
            <td>ізоляція без перекриття: порядок той самий</td>
        </tr>
        <tr>
            <td><code>direction: rtl</code></td>
            <td class="demo"><span class="dir">ABC 123</span></td>
            <td>сама властивість рядка не перевертає</td>
        </tr>
        <tr>
            <td><code>&lt;bdo dir="rtl"&gt;</code></td>
            <td class="demo"><bdo dir="rtl">1 + 2 = 3</bdo></td>
            <td>формула читається задом наперед</td>
        </tr>
    </tbody>
</table>

<p class="note">Виділіть будь-який перевернутий рядок і скопіюйте його: у буфер
    потрапить те, що написано в розмітці, а не те, що видно. Теґ міняє лише
    вигляд.</p>

CSS

.grid {
    max-width: 620px;
    border-collapse: collapse;
}

.grid th,
.grid td {
    padding: 8px 12px;
    border: 1px solid #b9c6d8;
    text-align: left;
    vertical-align: middle;
}

.grid th {
    background: #eef4ff;
}

.demo {
    background: #f6f9ff;
    font-family: monospace;
    font-size: 1.15rem;
    letter-spacing: .05em;
    white-space: nowrap;
}

.dir {
    direction: rtl;
}

.note {
    max-width: 620px;
    margin-top: 12px;
    color: #5a6472;
    font-size: .9em;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
    font-size: .85em;
}

<h3>Використання тегу <code>bdo</code></h3>
<p>Напрямок тексту справа наліво:</p>
  <p><bdo dir="rtl">Вебсторінка (англ. Web page, або англ. Webpage) — інформаційний ресурс, доступний в мережі World Wide Web (Всесвітня павутина), який можна переглянути у веббраузері. Зазвичай, інформація веб-сторінки записана у форматі HTML, XHTML, або рідше Wml (для wap-сторінок).</bdo></p>
<br>
<p>Напрямок тексту зліва направо:</p>
<p><bdo dir="ltr">Вебсторінка (англ. Web page, або англ. Webpage) — інформаційний ресурс, доступний в мережі World Wide Web (Всесвітня павутина), який можна переглянути у веббраузері. Зазвичай, інформація веб-сторінки записана у форматі HTML, XHTML, або рідше Wml (для wap-сторінок).</bdo></p>