Bidirectional text: як поєднати англійську й арабську

Англійська назва всередині арабського речення: звідки береться плутанина¶

У рядку арабською раптом з’явилися англійська назва продукту, номер замовлення й дужки, а після копіювання в документ знак питання опинився на іншому боці фрази. Слова не обов’язково зіпсувалися: браузер міг просто показати змішаний текст у неочікуваному порядку.

Таке трапляється в інтерфейсах, формах, листах підтримки, договорах і перекладених документах. Арабська пишеться справа наліво, англійська - зліва направо. В одному абзаці можуть бути обидва напрямки, а числа й пунктуація ще додають плутанини.

Bidirectional text, або bidi text, - це рядок із символами різних напрямків письма, де алгоритм визначає візуальний порядок символів, але зберігає їхній логічний порядок. Unicode описує цей механізм у Unicode Bidirectional Algorithm, або UBA. Логічний порядок - це послідовність символів у текстових даних, а не те, як вони стоять на екрані.

Різниця важлива на практиці. Якщо англійський код у тексті виглядає «навпаки», не перевертай символи вручну. Зміна послідовності може зіпсувати пошук, копіювання й перевірку, тоді як із відображенням має впоратися алгоритм.

У глосарії для хибних друзів між українською й англійською йдеться про слова, значення яких легко сплутати. Bidi-проблема інша: слова можуть бути правильними, а їхній візуальний порядок змінюється через напрямок фрагментів і контекст навколо них.

Як пояснює Unicode Consortium у довідці про напрямок письма й двоспрямований текст:

«Unicode Bidirectional Algorithm, often abbreviated to just “UBA”, explains in detail how text should be laid out in lines whenever it consists of a mixture of left-to-right script characters and right-to-left script characters.»

Простими словами, браузер не просто ставить символи один за одним. Він обчислює порядок у рядку, де змішалися напрямки зліва направо й справа наліво.

Схожі проблеми з’являються в локалізованому макеті: наприклад, коли англомовну назву вставили в арабську кнопку або перекладений текст не вміщується в блок. Про RTL-верстку йдеться в окремому розборі помилок макета арабського перекладу. А спершу розберімося, як алгоритм визначає напрямок символів.

Як алгоритм Unicode визначає порядок символів¶

Алгоритм двоспрямованого тексту дивиться на властивості символів, а не вважає, що весь рядок написаний одним письмом. Специфікація UAX #9 описує, як визначати порядок відображення рядків зі символами зліва направо й справа наліво. За версією Unicode 18.0.0, актуальною на час дослідження 8 жовтня 2026 року, арабська й іврит мають напрямок справа наліво, а англійські літери - зліва направо (UAX #9).

Алгоритм розрізняє кілька груп символів:

• Сильні символи мають чіткий напрямок, як-от арабська чи латинська літера.
• Слабкі символи включають багато символів, пов’язаних із числами. Їхнє розташування залежить від правил алгоритму й контексту.
• Нейтральні символи самі не задають напрямку. До них належить більшість пунктуації та символів.

Ось чому два схожі рядки можуть показуватися по-різному. Літери дають алгоритму чіткі сигнали, а кома, крапка, дужка чи тире самі не підказують, до якого напрямку належать. Алгоритм враховує базовий напрямок абзацу й сусідні символи (довідка Unicode про bidi).

Базовий напрямок абзацу - початковий напрямок, за яким браузер упорядковує фрагменти й визначає позицію нейтральних символів біля їхніх меж. Якщо він не збігається з основною мовою абзацу, пунктуація може візуально «прилипнути» не до того фрагмента. Документація MDN пояснює: правильне значення dir може виправити порядок і вирівнювання, не змінюючи самих слів (атрибут dir).

Уяви арабське речення з англійською назвою Acme Support і номером A-104. Латиниця в назві йде зліва направо, хоча навколишній абзац читається справа наліво. Дефіс і розділові знаки самі не задають очевидного напрямку. Тож перевір не лише слова, а й те, як браузер показує межі фрагментів.

Не переставляй числа вручну в bidi-тексті. Числові символи належать до слабких типів, і алгоритм застосовує до них окремі правила. Якщо код замовлення, номер рахунку чи дата виглядають дивно, спочатку перевір напрямок контейнера й ізоляцію фрагмента, а не міняй порядок цифр у вихідному тексті.

Візуально зворотний рядок не означає, що вихідні дані треба зберігати у зворотному порядку. Unicode уточнює: алгоритм змінює порядок відображення, а логічна послідовність тексту лишається незмінною (UAX #9). Керівні символи напрямку теж впливають на відображення, але не змінюють порівняння тексту, межі слів, розбір чи числовий аналіз.

Розбирай проблему по черзі: спочатку напрямок абзацу, потім напрямок окремих фрагментів, а тоді пунктуацію й інші нейтральні знаки. Так простіше відрізнити помилку верстки від помилки перекладу. Якщо арабське речення зрозуміле, але англійська назва, дужки чи номер стали нечитабельними, перевір базовий напрямок і межі фрагментів.

Як задати напрямок у HTML і відокремити змішані фрагменти¶

На вебсторінці напрямок задають атрибутом dir. Атрибут lang повідомляє мову елемента, але сам не встановлює напрямок тексту. Документація MDN про dir пояснює значення ltr, rtl та auto.

Якщо основна мова сторінки арабська, для кореневого елемента HTML задають dir="rtl". Для окремого блока з іншим базовим напрямком значення задають на цьому блоці. Англійський фрагмент із відомим напрямком можна позначити dir="ltr" (MDN про атрибут dir).

<html lang="ar" dir="rtl">
  <body>
    <p>النص العربي مع <span dir="ltr">Acme Support</span></p>
  </body>
</html>

У прикладі зовнішній блок задає напрямок арабського тексту, а англомовна назва отримує власний. Якщо пунктуація належить до англомовного фрагмента, додай її всередину span. MDN радить охоплювати повний фрагмент відомого напрямку, зокрема пунктуацію, яка до нього належить (документація dir).

Якщо арабська - основна мова документа, а всередині трапляються англомовні назви, не став dir="ltr" для всього рядка лише через наявність латиниці. Задай напрямок на потрібному рівні: арабомовному абзацу - справа наліво, англійській вставці - зліва направо.

Значення dir="auto" стане в пригоді, коли напрямок невідомий заздалегідь, наприклад у тексті, який вводить користувач. Браузер визначає його за вмістом, зазвичай орієнтуючись на перший сильний символ (MDN про dir). Це евристика, а не визначення мови. Якщо поле починається з англійського імені, а далі містить арабське речення, auto може вибрати напрямок зліва направо. Якщо напрямок відомий, задай його явно.

Для фрагмента невідомого напрямку в HTML є елемент bdi. Він ізолює цей фрагмент від навколишнього двоспрямованого тексту, а навколишній текст - від фрагмента (MDN про <bdi>).

<p dir="rtl">
  رسالة من <bdi>Alex 104-B</bdi>
</p>

Наприклад, bdi підходить для імені чи назви, яку ввів користувач і напрямок якої невідомий. Якщо dir не задано, елемент поводиться так, ніби для нього встановлено dir="auto" (MDN про <bdi>). Якщо напрямок фрагмента відомий, задай його через dir, а не покладайся на автоматичне визначення.

За специфікацією HTML, bdi ізолює частину тексту для двоспрямованого форматування. Один із ключових сценаріїв - вміст користувача з невідомим напрямком (HTML Standard). Так само можна позначати дописи, імена, назви файлів, коментарі й текст із зовнішньої системи.

Принцип ізоляції Unicode Consortium формулює в UAX #9:

«Characters within an isolate cannot affect the ordering of characters outside it, or vice versa.»

Ізоляція потрібна не для перекладу слів, а щоб напрямок одного фрагмента не тягнув за собою сусідній текст.

Для вебвмісту атрибут dir зазвичай доречніший за CSS-властивість direction: напрямок є властивістю тексту й має залишатися доступним навіть без стилів (MDN про dir). CSS-властивість direction задає базовий напрямок для блочних елементів і впливає на вирівнювання та потік комірок таблиць чи сітки. Для вбудованих елементів вона діє лише разом із unicode-bidi: embed або unicode-bidi: override (MDN про CSS direction).

Якщо на сторінці є таблиця з арабськими підписами й англійськими значеннями, перевір напрямок не лише в абзацах, а й у заголовках та комірках. Атрибут dir можна задати для вкладених блоків, якщо їхній базовий напрямок відрізняється від батьківського. Це точніше описує вміст, ніж спроба виправити весь макет одним правилом стилю.

Коли потрібні напрямок, ізоляція або керівні символи¶

Вибирай інструмент залежно від того, чи відомий напрямок фрагмента й де він використовується. У HTML для цього є атрибути й елементи, а Unicode також визначає спеціальні керівні символи. Не сприймай їх як взаємозамінні: веброзмітка має власні засоби, а текст без HTML-структури може вимагати іншого рішення.

Застосовуй dir="auto" для непередбачуваного зовнішнього вмісту, але не замість явного напрямку, коли він відомий. Автоматичний вибір спирається на перший сильний символ, а не на розуміння мови чи змісту (MDN про dir). На арабській сторінці англійське ім’я на початку рядка може змусити автоматичне визначення вибрати не той базовий напрямок, якого очікує верстка.

Unicode визначає окремі символи ізоляції: LRI (U+2066), RLI (U+2067), FSI (U+2068) та PDI (U+2069). Вони обрамляють фрагмент і не дають символам усередині ізольованої ділянки впливати на навколишній текст, і навпаки (UAX #9). Unicode 6.3 запровадив ізоляцію, бо старіші механізми вбудовування могли надто сильно впливати на зовнішній текст. Нові документи мають віддавати перевагу ізоляції перед вбудовуванням, якщо цільові платформи її підтримують (UAX #9).

Для вебсторінки діє окреме правило. Unicode радить замість явних керівних символів форматування напрямку використовувати засоби HTML і CSS, а не розставляти невидимі символи в HTML-тексті (UAX #9). Для звичайного вебвмісту спершу перевір dir і bdi.

У форматі без HTML-розмітки вибір може бути іншим. Керівні символи впливають на візуальне подання, але їх легко не помітити під час редагування чи копіювання. Використовуй їх з огляду на формат, призначення й підтримку цільової системи, а не як випадковий спосіб пересунути пунктуацію.

MDN описує глобальний атрибут dir так:

«The dir global attribute is an enumerated attribute that sets the element’s base text direction and directionally isolates its contents from surrounding text.»

Тут важлива не лише мітка напрямку: атрибут також відокремлює вміст елемента від двоспрямованого контексту навколо нього.

Для перекладача чи редактора правило просте: не вставляй невидимі символи в переклад лише тому, що конкретний переглядач показав рядок незвично. Спершу з’ясуй, де зберігається текст, який базовий напрямок має контейнер і чи є фрагмент із протилежним напрямком. Якщо проблема на вебсторінці, виправляй семантичну розмітку.

Що перевірити, якщо пунктуація або числа «переїхал軶

В арабсько-англійському рядку пунктуація часто виглядає неправильно, бо більшість знаків не має власного напрямку. Unicode пояснює, що їхнє візуальне положення залежить від оточення й базового напрямку абзацу (FAQ Unicode про bidi). Отже, знак не обов’язково стоїть не там у вихідному тексті.

Перевіряй рядок послідовно - так легше відокремити одну причину від іншої:

1. Знайди основну мову контейнера. Арабськомовний абзац зазвичай має напрямок справа наліво, а англомовний - зліва направо. Атрибут lang описує мову, але напрямок треба задавати окремо через dir (MDN про dir).
2. Перевір межі фрагментів іншого напрямку. Познач англійську назву посеред арабського речення на рівні самого фрагмента, якщо її напрямок відомий.
3. З’ясуй, кому належить пунктуація. Кома чи дужка може бути частиною англійського фрагмента або арабського речення. Якщо знак належить конкретному фрагменту, охопи його разом із фрагментом.
4. Перевір числа й ідентифікатори. Числа мають слабкий напрямок, тож дивись на них у контексті сусідніх фрагментів. Не перевертай цифри вручну, щоб відтворити їхнє візуальне положення.
5. Перевір результат у цільовому середовищі. Копіювання з браузера, вставлення в редактор і перегляд у документі можуть виявити різні проблеми розмітки. Порівнюй вихідні символи з відображенням, а не лише зі скриншотом.

Для змішаних фрагментів перевір межі абзацу, назви, дужки, знаки завершення речення, числа й напрямок вирівнювання. Один рядок, що відобразився правильно, ще не гарантує, що шаблон працюватиме з іншим ім’ям або номером. Особливо уважно тестуй змінні поля, куди користувачі вводять дані різними мовами.

Поширена помилка - змінити порядок символів у джерелі, щоб один конкретний екран нарешті показав рядок правильно. Такий «ремонт» може зламати логічну послідовність і не спрацювати в іншому браузері чи документі. Алгоритм Unicode розрахований на текст у логічному порядку й окремо визначає його відображення (UAX #9).

Ще одна помилка - виправляти всі проблеми CSS-властивістю direction, не розібравшись зі структурою тексту. CSS-властивість має конкретну поведінку для блочних і вбудованих елементів, тоді як HTML dir семантично задає напрямок (MDN про CSS direction, MDN про dir). Якщо проблема в англійській назві всередині рядка, зміна напрямку всього блока може зробити арабський текст менш читабельним.

Не став dir="rtl" для фрагмента невідомого напрямку лише тому, що інтерфейс арабський. Ім’я користувача може бути написане латиницею, арабською або обома системами письма. Для такого випадку bdi ізолює фрагмент і визначає напрямок автоматично, якщо явного dir немає (MDN про <bdi>).

Чи може bidi-текст створити ризик плутанини?¶

Так. Логічний порядок символів може відрізнятися від їхнього вигляду на екрані, тож рядок часом виглядає не так, як очікує той, хто його перевіряє. Звіт Unicode про міркування безпеки розглядає підміну й візуальне введення в оману в двоспрямованому тексті та радить враховувати такі ризики в програмному забезпеченні, яке обробляє Unicode (Unicode Technical Report #36).

Сам факт змішаного напрямку не доводить зловмисну поведінку, а звіт не вимірює сучасну частоту атак. Перевіряй і самі дані, і те, як вони показані: незвична назва чи ідентифікатор можуть містити символи, які розташуються на екрані неочікувано. Підозрілий фрагмент перевіряй у логічному порядку, а не лише на екрані.

Форми, журнали й інтерфейси, що приймають зовнішній текст, мають послідовно ізолювати такі фрагменти. bdi створено, щоб відокремлювати вміст від навколишнього двоспрямованого контексту, а не виявляти чи блокувати небезпечний текст (HTML Standard). Перевірка напрямку й перевірка безпеки пов’язані, але це різні завдання.

FAQ¶

Як зберегти правильний порядок арабського й англійського тексту в перекладі?¶

Зберігай текст у логічному порядку, не перевертай англійські символи вручну й задавай контейнеру базовий напрямок через dir. Вставку з протилежним напрямком позначай окремо, а невідомий користувацький текст ізолюй через bdi (UAX #9, MDN про <bdi>).

Чому пунктуація переміщується в тексті арабською й англійською?¶

Більшість пунктуації має нейтральний напрямок. Алгоритм визначає її візуальне положення за напрямком абзацу й сусідніми фрагментами, тож правильний базовий напрямок і межі фрагментів часто важливіші за ручне переміщення знака (FAQ Unicode про bidi).

Коли використовувати dir=”rtl”, dir=”ltr” або dir=”auto”?¶

Використовуй dir="rtl" для контейнера з базовим напрямком справа наліво, а dir="ltr" - для англомовного фрагмента з відомим напрямком. dir="auto" підходить для тексту невідомого напрямку, наприклад введеного користувачем: алгоритм орієнтується на перший сильний символ, а не визначає мову (MDN про dir).

Як елемент HTML bdi виправляє змішаний текст?¶

Елемент bdi ізолює свій вміст від навколишнього bidi-контексту, а зовнішній текст - від вмісту елемента. Без заданого dir елемент поводиться так, ніби має dir="auto", тому підходить для імен та інших фрагментів невідомого напрямку (MDN про <bdi>).

Чи треба перекладачеві вставляти невидимі керівні символи Unicode?¶

На вебсторінках спершу використовуй семантичну HTML-розмітку, зокрема dir і bdi. Unicode радить замість явних символів форматування напрямку застосовувати засоби HTML і CSS; у тексті без HTML керівні символи використовуй лише з огляду на формат і підтримку цільової системи (UAX #9).