0Pricing
CSS Academy · Урок

Логические свойства в RTL-макетах

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

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

Настройка RTL в HTML

Объявляйте RTL в HTML с помощью атрибута dir и соответствующего атрибута lang:

<div dir="rtl" lang="ar" class="rtl-box">مرحبا بكم في تخطيط RTL</div>

dir="rtl" в CSS

Направление также можно задать в CSS — это удобно для проверки или отдельных секций с RTL:

<div dir="rtl">هذا العنصر باتجاه RTL</div>

Проверка переключения LTR/RTL

Быстрая проверка: добавьте dir="rtl" к <html>. При использовании логических свойств макет должен корректно отзеркалиться. При использовании физических свойств Вы увидите, что нужно исправить.

Что адаптируется автоматически

Когда задано dir="rtl", следующие свойства автоматически меняют направление с помощью логических свойств:

  • Выравнивание текста (начало/конец)
  • Внешние и внутренние отступы (начало/конец в направлении строки)
  • Границы (начало/конец в направлении строки)
  • Обтекание (начало/конец в направлении строки)
  • Позиционирование (начало/конец в направлении строки)

Что НЕ адаптируется автоматически

Даже при использовании логических свойств в RTL нужно обратить внимание на следующие элементы:

  • Фоновые изображения с направленным содержимым
  • Значки SVG, смысл которых зависит от направления (стрелки, шевроны)
  • Трансформации вроде translateX() — используйте translateX(calc(-1 * var(--offset))) с флагом направления
  • Абсолютное позиционирование с явными значениями в пикселях

Зеркальное отображение значков SVG

CSS предоставляет простой способ отразить направленные значки в RTL:

<div dir="rtl"><span class="icon-arrow"></span> Mirrored arrow in RTL</div>

Переменная CSS с учётом направления

Приём с переменной CSS для значений, зависящих от направления:

<div dir="rtl" class="drawer">Drawer</div>

Практический пример RTL

Компонент карточки с использованием логических свойств:

<div dir="rtl" class="card"><span class="card__icon">🔔</span><span class="card__text">تنبيه جديد</span></div>

font-size и RTL

Некоторые арабские шрифты при том же размере в пикселях выглядят крупнее или мельче латинских шрифтов. При необходимости задавайте размер шрифта отдельно для каждой системы письма:

<p>Default text (16px)</p>
<p lang="ar">نص عربي (17px)</p>

Инструменты тестирования

DevTools браузера позволяют имитировать двунаправленные макеты. Также используйте дерево доступности Chrome, чтобы убедиться, что порядок чтения для программ чтения с экрана соответствует логическому, а не визуальному порядку.

Контрольный список RTL для реальных проектов

Контрольный список для проверки RTL:

  • Все внешние и внутренние отступы используют логические свойства
  • Все границы используют начало/конец в направлении строки
  • Выравнивание текста использует начало/конец
  • Направленные значки отражаются с помощью scaleX(-1)
  • Для абсолютных позиций при необходимости используется inset-inline-*
  • Прокручиваемые контейнеры прокручиваются от правильного края

Быстрая проверка

Какая трансформация CSS проще всего отражает направленную стрелку SVG в RTL-макетах?

Итоги

Задайте dir="rtl" для элемента html, чтобы включить RTL-макет. Логические свойства автоматически адаптируют внешние и внутренние отступы, границы и выравнивание. Физические значения в пикселях в трансформациях и абсолютном позиционировании по-прежнему требуют ручной настройки для RTL. Отражайте направленные значки с помощью scaleX(-1). Проверьте результат, переключая dir="rtl" у корневого элемента.

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

Урок «Логические свойства в RTL-макетах» бесплатный?

Да — полный текст урока «Логические свойства в RTL-макетах» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Логические свойства в RTL-макетах»?

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

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

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

Сколько времени занимает урок «Логические свойства в RTL-макетах»?

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

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

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

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

  1. Зачем нужны логические свойства: интернационализация
  2. Направления блочного и строчного потока
  3. Логические отступы и граница
  4. Логические свойства в RTL-макетах
← Назад к CSS Academy