0Pricing
HTML Academy · Урок

dir=rtl для текста справа налево

Включайте макет RTL для арабского, иврита и других языков с письмом справа налево

«dir=rtl для текста справа налево» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Что делает dir

Атрибут dir объявляет базовое направление текста элемента. dir="ltr" (слева направо, направление по умолчанию для большинства языков) или dir="rtl" (справа налево, для арабского, иврита, персидского и урду).

Установка на html для RTL всего сайта

Для сайтов на арабском, иврите, персидском и урду установите dir="rtl" в корневом элементе. Это меняет направление по умолчанию для каждого блока: текст выравнивается по правому краю, списки получают отступ справа, полосы прокрутки перемещаются влево, а макеты автоматически зеркально отражаются в современном CSS.

<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>

Двунаправленный текст

Текст со смешанным направлением (арабский текст со встроенными английскими названиями брендов) автоматически обрабатывается двунаправленным алгоритмом Unicode. Базовое направление (задаваемое через dir) определяет расположение однонаправленных фрагментов на уровне строки, а отдельные последовательности символов идут в естественном направлении своих письменностей.

Логические свойства CSS

В современном CSS используются логические свойства, адаптирующиеся к направлению: margin-inline-start (слева в LTR, справа в RTL), padding-inline-end, border-inline-start. Замена left/right на start/end позволяет использовать одну таблицу стилей для обоих направлений.

/* Works in both directions */
.card {
  padding-inline-start: 16px;
  margin-block-end: 12px;
  border-inline-end: 1px solid #ccc;
}

Flexbox и Grid адаптируются автоматически

Направление строк во Flexbox учитывает dir: в RTL элементы идут справа налево. Столбцы шаблона Grid также меняют порядок. Поэтому большинство макетов на flex или grid работает в RTL без специального CSS для каждого направления — современные средства компоновки не зависят от направления.

Значки, которые должны отражаться

Значки, указывающие направление (стрелки назад и далее, отмена и повтор), должны отражаться в RTL. Используйте CSS transform: scaleX(-1) внутри [dir="rtl"] или предоставьте отдельные варианты SVG для RTL. Ненаправленные значки (поиск, настройки, шестерёнка) должны оставаться без изменений.

[dir="rtl"] .icon-back {
  transform: scaleX(-1);
}

Выравнивание текста

Предпочитайте text-align: start вместо text-align: left: start означает левый край в LTR и правый в RTL. То же относится к end. Выравнивание с учётом направления устраняет целый класс ошибок при добавлении поддержки RTL.

Переопределение dir для отдельного элемента

Установите dir="auto" у элемента, чтобы браузер определил направление по первому символу с явно выраженным направлением: <p dir="auto">{user.name}</p> обрабатывает имена, введённые пользователями, — арабские, английские или смешанные — без специальных условий.

Изоляция двунаправленного текста

Элементы bdi (изоляция двунаправленного текста) и bdo (переопределение двунаправленного текста) обеспечивают точный контроль над тем, как алгоритм двунаправленного текста обрабатывает конкретный фрагмент. Это полезно при дословном воспроизведении пользовательского ввода или принудительном задании направления фрагмента кода внутри текущего текста.

Поля формы

Элементы ввода наследуют dir от родительского элемента. Для текста, введённого пользователем, направление которого может различаться (например, в чате с многоязычными пользователями), установите dir="auto" у каждого поля ввода, чтобы оно правильно отображалось с учётом содержимого.

Тестирование RTL-макетов

Браузеры позволяют временно просмотреть RTL-макет, задав document.documentElement.dir = "rtl" в консоли DevTools. Проверьте ориентацию значков, внутренние и внешние отступы, положение полосы прокрутки и отсутствие элементов с жёстко заданными левыми или правыми значениями, которые следует заменить на начало или конец.

Направление CSS отличается от направления макета

Свойство CSS direction и атрибут HTML dir оказывают одинаковое влияние на большинство макетов. Предпочитайте атрибут HTML, поскольку его читают вспомогательные технологии, почтовые клиенты и другие потребители, тогда как свойство CSS влияет только на отображение в браузерах.

Проверка знаний

Почему при поддержке языков RTL предпочтительнее логические свойства CSS, такие как margin-inline-start, а не margin-left?

Итоги

dir="rtl" у <html> меняет базовое направление для сайтов на арабском, иврите, персидском и урду. Логические свойства CSS (margin-inline-start, padding-block-end) адаптируются автоматически. Макеты на Flexbox и Grid зеркально отражаются без изменений. Отражайте направленные значки, используйте text-align: start/end и задавайте dir="auto" для пользовательского содержимого с неизвестным направлением.

Часто задаваемые вопросы

Урок «dir=rtl для текста справа налево» бесплатный?

Да — полный текст урока «dir=rtl для текста справа налево» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «dir=rtl для текста справа налево»?

Включайте макет RTL для арабского, иврита и других языков с письмом справа налево Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «dir=rtl для текста справа налево»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Атрибут lang и экранные дикторы
  2. dir=rtl для текста справа налево
  3. Элементы bdi и bdo
  4. charset и Unicode: обработка специальных символов
← Назад к HTML Academy