LTR и RTL: что это и как задать направление текста на сайте и в Android

LTR и RTL обозначают направление письма. LTR (left-to-right) значит «слева направо», так пишут по-русски и по-английски. RTL (right-to-left) значит «справа налево», так устроены арабское письмо, иврит, персидский и урду. В вёрстке направление задают атрибутом dir="rtl" в HTML, а в Android-приложении флагом android:supportsRtl="true" и атрибутами start/end.

В анкетах на сайтах знакомств у LTR другое значение: long-term relationship, «долгие отношения». А «RTL» в прайсах на видеокарты означает retail, коробочную версию товара. Ниже речь только о тексте и интерфейсах.

CheckroiПодборка курсов по CSS182 курса • 37 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Что значат LTR и RTL

Обе аббревиатуры описывают одно: с какой стороны строки начинается текст и куда он течёт. От этого зависит всё остальное. Где стоит выравнивание по умолчанию, с какой стороны иконка в поле ввода, куда указывает стрелка «Назад».

Третья строка таблицы и создаёт большую часть проблем. Чистый RTL-текст браузер и Android отрисуют правильно сами. Ломается смешанный текст, где в арабском или ивритском предложении встречаются латиница, цифры и знаки препинания.

Какие языки пишутся справа налево

Консорциум W3C в руководстве по разметке RTL-текста называет такие письменности с направлением справа налево:

• арабское письмо: арабский, персидский (фарси), урду, пушту, синдхи;
• еврейское письмо: иврит и идиш;
• сирийское письмо;
• тана (мальдивский язык дивехи);
• нко и адлам (языки Западной Африки, например мандинка и пулар).

RTL понадобится, если продукт выходит на рынки ОАЭ, Саудовской Аравии, Израиля или Ирана. Перевести строки мало: интерфейс приходится отражать целиком. Этим занимаются вместе разработчик и локализатор.

Как задать направление текста в HTML

Направление в вебе задают разметкой. W3C прямо советует не ставить базовое направление через CSS: оно должно работать, даже если стили не загрузились.

Атрибут dir на всю страницу

Если весь документ на арабском или иврите, атрибут ставят на корневой тег вместе с языком:

<html lang="ar" dir="rtl">

Все блоки внутри наследуют направление. Отдельный фрагмент на другом языке получает свой dir, например <p dir="ltr"> для цитаты на английском внутри арабской страницы.

Вот как атрибут работает в Chrome 154. Одинаковые строки на русском и иврите выведены в двух блоках: слева с dir="ltr", справа с dir="rtl".

Обратите внимание на знаки в конце строк. В RTL-блоке русская фраза превратилась в «!Привет, мир», а точка уехала в начало строки «Заказ № 15 готов». Ивритская фраза в LTR-блоке ломается зеркально. Почему так происходит, разберём ниже.

Значение auto для текста пользователей

Отзывы, сообщения в чате и поля форм заранее неизвестно на каком языке. Для них есть значение auto: браузер берёт направление по первой «сильной» букве.

<p dir="auto">Отзыв на русском языке</p>      <!-- ltr -->
<p dir="auto">مراجعة باللغة العربية</p>       <!-- rtl -->
<p dir="auto">2026 — שנה טובה</p>           <!-- rtl -->

Третья строка показательна. Она начинается с цифр, но цифры направления не задают, поэтому браузер смотрит дальше и находит иврит. В Chrome 154 вычисленное значение direction у трёх строк ровно такое, как в комментариях.

Решение подходит не всегда. Если сообщение начинается с арабского слова, а дальше идёт английский текст, auto развернёт всю строку справа налево.

Тег bdi для вставленных имён

<bdi> изолирует кусок текста: его направление не влияет на соседей. Это главный инструмент для имён пользователей, названий товаров и любых строк, которые подставляет сервер. Справка MDN описывает элемент bdi на таком же примере.

Слева строка без изоляции: арабское имя притянуло к себе двоеточие и цифру, и «3» уехала в начало строки. Справа то же имя внутри <bdi>, и порядок правильный. Разметка исправленной строки:

<p><bdi>إيان</bdi>: 3 комментария</p>

Для обратной задачи есть <bdo dir="rtl">. Он принудительно разворачивает символы и нужен редко, например для демонстрации или когда текст уже хранится в «визуальном» порядке.

Атрибуты dir, lang и теги вроде <bdi> относятся к базовой семантической разметке. Если хотите разобрать её системно, посмотрите курсы по HTML.

Направление в CSS: direction и логические свойства

Свойство direction: rtl в CSS существует, но для контента его не используют: направление уже задано атрибутом dir. Основная работа CSS в RTL другая. Отступы и выравнивание должны переворачиваться вместе с текстом. Для этого есть логические свойства. Как они работают, хорошо видно в справке MDN по margin-inline-start.

Разницу видно на простой карточке с иконкой. В левой колонке отступ задан через margin-right, в правой через margin-inline-end.

В RTL-версии с физическим свойством отступ остался справа от круга, то есть снаружи карточки, и текст прилип к иконке: зазор между ними 0 px. С логическим свойством отступ в 16 px переехал на нужную сторону без отдельного правила для RTL.

Flexbox и Grid уже логические. justify-content: flex-start и порядок колонок сетки сами следуют направлению текста. Ломаются обычно старые правила на left/right, абсолютное позиционирование и иконки, нарисованные «стрелкой вправо». Если вы адаптируете вёрстку медиа-запросами, логические свойства пишутся внутри них так же. Подробнее о самом языке стилей мы рассказывали в статье «Что такое CSS».

Как проверить зеркальную вёрстку сайта в браузере

Арабский перевод для первой проверки не нужен. Достаточно перевернуть направление у готовой страницы и посмотреть, что сломалось.

1. Откройте страницу в Chrome и нажмите F12, чтобы открыть инструменты разработчика.
2. Перейдите на вкладку Console и выполните команду document.documentElement.dir = "rtl".
3. Пройдите по странице сверху вниз: шапка, меню, формы, карточки, подвал.
4. Верните направление командой document.documentElement.dir = "ltr" или просто обновите страницу.

Русский текст останется русским, а раскладка перевернётся так же, как у арабской версии. Сразу видно три типа поломок:

• блоки, которые остались прижаты к левому краю: у них физические left, margin-left или text-align: left;
• иконки, которые наехали на текст или ушли за край карточки;
• стрелки и шевроны, которые теперь показывают не туда.

Знаки препинания в конце русских строк в такой проверке тоже уедут влево. Это ожидаемо и на арабскую версию не повлияет: у арабских строк пунктуация встанет на место, ведь абзац и текст будут одного направления.

Почему «прыгают» знаки препинания и цифры

Порядок символов в строке определяет алгоритм двунаправленного текста Unicode, UAX #9. Он делит символы на группы:

• сильные: буквы, у каждой своё направление (кириллица и латиница LTR, арабские и ивритские буквы RTL);
• слабые: цифры и некоторые знаки, они подстраиваются под окружение;
• нейтральные: пробелы и большая часть пунктуации, они берут направление соседей или всего абзаца.

Восклицательный знак в конце «Привет, мир!» нейтрален. В RTL-абзаце его не с чем связать справа, поэтому он получает направление абзаца и встаёт в его конец, а конец RTL-строки находится слева.

Решение: дать фрагменту правильное направление разметкой (dir, <bdi>). Если разметку поставить нельзя (заголовок окна, push-уведомление, строка в базе), помогают невидимые символы Unicode:

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Как отразить интерфейс Android-приложения

Встроенное отражение интерфейса появилось в Android 4.2 (API 17). По умолчанию оно выключено, и без флага приложение на арабском языке останется в LTR-раскладке. Работа с локализацией входит в обычные задачи Android-разработчика. Порядок действий по документации Android:

1. В AndroidManifest.xml добавьте атрибут в тег application: android:supportsRtl="true".
2. В разметке замените left/right на start/end. Так раскладка будет следовать языку пользователя.
3. Простые векторные иконки со стрелками пометьте android:autoMirrored="true" (с Android 4.4). Сложные рисунки, где отражение меняет смысл, готовьте отдельной версией.
4. Строки, которые подставляются в шаблон перевода, оборачивайте через BidiFormatter.unicodeWrap(). Пример на Kotlin ниже.

Соответствие атрибутов в разметке:

Если в разметке заданы обе пары и приложение нацелено на API 17 и выше, Android использует start/end, а left/right игнорирует.

Зачем BidiFormatter

Документация разбирает случай с адресом «15 Bay Street, Laurel, CA» внутри фразы на иврите. Система не знает, к какой части относится «15», и номер дома уезжает не туда. Это та же проблема, что с «3 комментария» в вебе, и лечится она так:

val mySuggestion = "15 Bay Street, Laurel, CA"
val myBidiFormatter: BidiFormatter = BidiFormatter.getInstance()

String.format(getString(R.string.did_you_mean), myBidiFormatter.unicodeWrap(mySuggestion))

unicodeWrap() определяет направление строки и обрамляет её служебными символами Unicode. Исключений два: машинные строки вроде URI и SQL-запросов и текст, который уже обёрнут.

Ресурсы и локализацию Android подробно разбирают на курсах по Android-разработке.

Как проверить отражение без знания арабского

• Псевдолокаль AR (XB) разворачивает обычные английские строки справа налево. Включается в build.gradle для отладочной сборки: pseudoLocalesEnabled true (в Kotlin DSL isPseudoLocalesEnabled = true), работает с Android 4.3.
• Принудительное отражение в параметрах разработчика, с Android 4.4. В английском интерфейсе пункт называется Force RTL layout direction, в русской локализации AOSP «Отразить интерфейс». У прошивок производителей подпись может отличаться.

Что отражать в интерфейсе, а что оставить как есть

Переворачивать нужно не всё. В рекомендациях Material Design о двунаправленности элементы делятся на две группы.

Отражаются:

• порядок навигационных кнопок и вкладок;
• иконки в полях ввода, они переходят на другую сторону;
• стрелки и всё, что показывает направление движения: «Назад», «Вперёд», хлебные крошки;
• прогресс-бары, они заполняются в сторону чтения;
• отступы вокруг иконок и текста.

Не отражаются:

• цифры, в том числе на часах и в номерах телефонов;
• непереведённый текст: адрес сайта или английское название остаются LTR;
• графики и диаграммы.

Частые ошибки при вёрстке справа налево

Ещё одна частая ошибка относится к тестированию: интерфейс проверяют только на коротких английских строках. Перевод бывает заметно длиннее оригинала, а списки и таблицы с длинными ячейками в RTL ломаются заметнее всего. Проверяйте на реальных переводах или хотя бы на псевдолокали.

Где освоить вёрстку системно

Направление текста стоит на стыке CSS, разметки и локализации. Если хочется разобраться в вёрстке целиком, от основ HTML до логических свойств и адаптивности, посмотрите программы с отзывами и ценами в каталоге курсов по CSS.

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Frontend-разработчик: сайты на HTML/CSS/JavaScript Перейти на сайт курса	Coddy	9200 ₽	-	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Frontend-разработчик: сайты на HTML/CSS/JavaScript

  Coddy9200 ₽3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по CSS