Атрибут dir тега <bdo> — примусовий напрямок тексту

HTML

<h4 class="cap">1. Латиниця з цифрами</h4>
<ul class="box">
    <li><span class="src" id="s1">ABC 123</span> — звичайний <code>span</code></li>
    <li><bdo class="src" id="s2" dir="rtl">ABC 123</bdo> — <code>bdo dir="rtl"</code></li>
    <li><bdo class="src" id="s3">ABC 123</bdo> — <code>bdo</code> без атрибута</li>
    <li><bdo class="src" id="s4" dir="chucknorris">ABC 123</bdo> — хибне значення</li>
</ul>

<h4 class="cap">2. Мішаний рядок: тут видно, що робить теґ без атрибута</h4>
<ul class="box">
    <li><span class="src" id="m1">عربى ABC</span> — звичайний <code>span</code>:
        працює двонаправлений алгоритм</li>
    <li><bdo class="src" id="m2">عربى ABC</bdo> — <code>bdo</code> без атрибута:
        алгоритм СКАСОВАНО, символи йдуть у порядку пам'яті</li>
    <li><bdo class="src" id="m3" dir="auto">عربى ABC</bdo> — <code>dir="auto"</code>:
        напрямок узято з першого сильного символа</li>
    <li><bdi class="src" id="m4">عربى ABC</bdi> — <code>bdi</code>: теж визначає
        напрямок за вмістом, але порядку символів усередині НЕ скасовує</li>
</ul>

<table id="report">
    <thead><tr><th>розмітка</th><th>direction</th><th>unicode-bidi</th><th>зоровий порядок</th></tr></thead>
    <tbody></tbody>
</table>

CSS

.box {
    max-width: 560px;
    margin: 0 0 6px;
    padding: 10px 14px 10px 30px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.box li {
    margin: 8px 0;
}

.src {
    padding: 2px 6px;
    border-radius: 3px;
    background: #dbe6f5;
    font: 1.05rem/1.6 monospace;
}

table {
    margin-top: 16px;
    border-collapse: collapse;
    font-size: .88rem;
}

th,
td {
    padding: 5px 9px;
    border: 1px solid #b9c6d8;
    text-align: left;
}

th {
    background: #eef4ff;
}

.cap {
    margin: 22px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}

JS

// зоровий порядок: беремо кожен символ окремим діапазоном і сортуємо за координатою
function zorovyjPoryadok(el) {
    const vuzol = el.firstChild;
    const diapazon = document.createRange();
    const symvoly = [];

    for (let i = 0; i < vuzol.length; i++) {
        diapazon.setStart(vuzol, i);
        diapazon.setEnd(vuzol, i + 1);
        symvoly.push([vuzol.data[i], diapazon.getBoundingClientRect().x]);
    }

    return symvoly.sort((a, b) => a[1] - b[1]).map((p) => p[0]).join('');
}

const RYADKY = [
    ['span (ABC 123)', 's1'],
    ['bdo dir="rtl"', 's2'],
    ['bdo без dir', 's3'],
    ['bdo dir="chucknorris"', 's4'],
    ['span (عربى ABC)', 'm1'],
    ['bdo без dir (عربى ABC)', 'm2'],
    ['bdo dir="auto"', 'm3'],
    ['bdi', 'm4'],
];

const tbody = document.querySelector('#report tbody');

for (const [nazva, id] of RYADKY) {
    const el = document.getElementById(id);
    const styli = getComputedStyle(el);
    const poryadok = zorovyjPoryadok(el);

    const row = tbody.insertRow();
    for (const v of [nazva, styli.direction, styli.unicodeBidi, poryadok]) {
        row.insertCell().textContent = v;
    }

    console.log(nazva, '->', styli.direction, '/', styli.unicodeBidi, '| на екрані:', poryadok);
}
// → bdo dir="rtl" -> rtl / isolate-override | на екрані: 321 CBA
// → bdo без dir -> ltr / isolate-override | на екрані: ABC 123
// → bdo dir="chucknorris" -> ltr / isolate-override | на екрані: ABC 123
// → span (عربى ABC) -> ltr / normal | на екрані: ىبرع ABC
// → bdo без dir (عربى ABC) -> ltr / isolate-override | на екрані: عربى ABC
// → bdo dir="auto" -> rtl / isolate-override | на екрані: CBA ىبرع
// → bdi -> rtl / isolate | на екрані: ABC ىبرع — напрямок змінився, порядок літер ні

// хибне значення не потрапляє навіть у властивість елемента
console.log('el.dir при dir="chucknorris":',
    JSON.stringify(document.getElementById('s4').dir)); // → ""
console.log('збіг із :dir(rtl): rtl —', document.getElementById('s2').matches(':dir(rtl)'),
    ', хибне —', document.getElementById('s4').matches(':dir(rtl)')); // → true , false

// а сам текст не змінюється ніколи: перевертається лише показ
console.log('textContent у bdo dir="rtl":',
    JSON.stringify(document.getElementById('s2').textContent)); // → "ABC 123"

<h3>Використання атрибуту <code>dir</code> тегу <code>bdo</code></h3>
<p>Напрямок тексту справа наліво:</p>
  <p><bdo dir="rtl">Перший у світі сайт info.cern.ch з'явився в 1990 році. Його створив Тім Бернерс-Лі — батько сучасного інтернету. Автор опублікував на своєму сайті опис нової технології WWW (World Wide Web), заснований на протоколі передачі даних HTTP, системі адресації URI і мові розмітки HTML. </bdo></p>
<br>
<p>Напрямок тексту зліва направо:</p>
<p><bdo dir="ltr">Перший у світі сайт info.cern.ch з'явився в 1990 році. Його створив Тім Бернерс-Лі — батько сучасного інтернету. Автор опублікував на своєму сайті опис нової технології WWW (World Wide Web), заснований на протоколі передачі даних HTTP, системі адресації URI і мові розмітки HTML. </bdo></p>