What is RTL in web design?

RTL (right-to-left) design adapts a website for scripts read from right to left, such as Arabic and Hebrew. It means setting dir="rtl" on the page, mirroring the layout and directional icons, and keeping logos, numbers, media controls and photos unchanged.

Should I set RTL direction in CSS or HTML?

In HTML. The W3C advises adding dir="rtl" to the html element and never using CSS to set base direction, because direction is part of the content's meaning and must work even without the stylesheet.

Which icons should not be mirrored in RTL?

Logos, universal marks such as the checkmark, icons of real-world objects such as clocks, controls that point to an actual direction, and media playback controls. Arrows for navigation and progress should be mirrored.

Are numbers written right to left in Arabic?

No. The digits within a number keep the same order in Arabic and Hebrew text. Arabic may use Western or Eastern Arabic numerals depending on the country, but the order of digits never reverses.

Do CSS logical properties work in all modern browsers?

Yes, the core logical properties such as margin-inline-start, padding-inline-end and text-align: start are supported in all current major browsers. Check any newer or less common property on MDN before relying on it.

Веб-дизайн RTL: 7 правил для веб-сайтов на арабском и иврите

Подведите итог этому посту следующим образом: 10 мин чтения

Хороший дизайн RTL (справа налево) начинается с разметки, а не с таблицы стилей: set dir="rtl" и право lang на <html> элемент страниц на арабском, иврите, персидском или урду, создайте свой CSS с логическими свойствами, такими как margin-inline-start таким образом, макет отражает сам себя, а затем элемент за элементом решает, что следует перевернуть. Навигация, стрелки «Назад» и «Далее», индикаторы выполнения и значки выравнивания текста зеркально отображаются; логотипы, галочки, часы, элементы управления воспроизведением мультимедиа, фотографии и цифры внутри числа — нет.

Ключевые выводы

Укажите направление в HTML (<html dir="rtl" lang="ar">), никогда только в CSS. W3C рекомендует не использовать CSS для установки базового направления.
Заменять left и right в вашем CSS с логическим start и end характеристики. Одна таблица стилей затем служит обоим направлениям.
Зеркально отображайте все, что показывает порядок чтения, навигацию или прогресс. Сохраняйте логотипы, универсальные символы, объекты реального мира и фотографии такими, какие они есть.
Числа сохраняют порядок цифр даже внутри текста RTL. В иврите используются западные цифры; в арабском языке могут использоваться западные или восточноарабские цифры.
Перед запуском протестируйте реальный переведенный текст, включая смешанные арабские и английские строки.

Что означает дизайн RTL

Скрипты справа налево считываются с правого края страницы. В W3C Адлам, арабский, иврит, н'ко, сирийский и таана перечислены как письменности справа налево, используемые для записи таких языков, как арабский, дивехи, иврит, пушту, персидский, синдхи, урду и идиш (Интернационализация W3C).

Дизайн RTL не “все правильно выровнено”. Читатели этих языков ожидают, что весь интерфейс будет следовать направлению их чтения: логотип и основная навигация справа, боковая панель поменяны местами, стрелка назад, указывающая вправо. Они также ожидают, что некоторые вещи не изменятся, например, номер телефона, логотип бренда или кнопка воспроизведения на видео. Правильное разделение — это то, что отличает переведенную страницу от локализованной.

1. Установите направление и язык в HTML

Основа — это один из атрибутов. Быстрый ответ W3C: “Если общее направление документа справа налево, добавьте dir="rtl" к тегу html” (W3C).

<!DOCTYPE html>
<html dir="rtl" lang="ar">
  <head>
    <meta charset="utf-8" />
  </head>
</html>

Согласно W3C, этот единственный атрибут выравнивает абзацы вправо, заставляет столбцы таблицы располагаться справа налево, начинает ввод формы справа, правильно расставляет знаки препинания и, если ваша таблица стилей написана правильно, позволяет CSS зеркально отображать макет.

Три правила из одного руководства:

Не используйте CSS для базового направления. Направление влияет на значение, поэтому оно должно быть в разметке, где оно все равно работает, если CSS не загружается.
Объявить lang отдельно. lang="ar" не подразумевает dir="rtl", и наоборот. Установите оба.
Использовать dir="auto" на пользовательском вводе. Поля формы и вставленный текст неизвестного направления (имя пользователя, комментарий) должны определять свое направление во время выполнения.

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

2. Напишите CSS с логическими свойствами

Большинство ошибок RTL возникают из-за CSS, в котором указано “left” или “right”. Карта с padding-left: 24px сохраняет отступ слева на арабском языке, который теперь является дальним краем.

Вместо этого логические свойства CSS описывают макет относительно направления текста (МДН). W3C рекомендует их именно по этой причине: использовать start и end для полей, отступов и выравнивания “чтобы было легче управлять изменениями направления во время локализации”.

Физический (избегать)	Логический (использование)
`margin-left`	`margin-inline-start`
`padding-right`	`padding-inline-end`
`left: 0`	`inset-inline-start: 0`
`text-align: left`	`text-align: start`
`border-left`	`border-inline-start`
`float: left`	`float: inline-start`

Flexbox и сетка уже следуют направлению документа: ряд гибких элементов начинается справа на странице RTL. Вот почему макет, созданный с использованием flex или сетки и логического интервала, обычно корректно отражается без какого-либо дополнительного CSS.

Вещи, которые логические свойства не обрабатывают за вас:

Трансформации и позиционирование украшений. transform: translateX(10px) движется вправо в обоих направлениях.
Фоновые положения и градиенты установить с left или right.
Значки, нарисованные в виде фигур CSS или отдельных SVG которые указывают направление (см. шаг 4).

Для этого используйте селектор направления:

[dir='rtl'] .chevron {
  transform: scaleX(-1);
}

3. Отражайте макет, а не содержание

При переворачивании страницы они перемещаются на противоположную сторону:

Логотип и основная навигация (обычно вверху справа).
Боковые панели и второстепенные столбцы.
Хлебные крошки, которые теперь читаются справа налево с разделителями, направленными влево.
Этикетки форм, необходимые маркеры и значки проверки.
Столбцы таблицы, начинающиеся справа.
Карусели и нумерация страниц, которые продвигаются влево.

Они остаются такими, какие они есть:

Фотографии и иллюстрации. Рекомендации Apple по человеческому интерфейсу не рекомендуют переворачивать фотографии и произведения искусства, поскольку “переворачивание изображения часто меняет его смысл” и может создать проблемы с авторскими правами. Если содержимое изображения зависит от направления чтения (например, скриншот интерфейса), вместо этого создайте локализованную версию (Apple HIG).
Видео- и аудиоплееры. Воспроизведение относится к направлению средств массовой информации, а не к языку.
Полосы прокрутки. Положение полосы прокрутки W3C Notes является частью браузера и контролируется пользователем, а не страницей.

Когда изображения появляются в осмысленном порядке, например, на временной шкале или в ранжированном списке, измените их порядок, а не переворачивайте каждое изображение.

4. Решите, какие значки переворачиваются

Рекомендации Apple содержат самые четкие правила, и они одинаково хорошо работают и для веб-сайтов (Apple HIG):

Перевернуть:

Стрелки «Назад», «Далее» и «Назад», а также все, что перемещает элементы в фиксированном порядке. “Кнопка «Назад» должна указывать вправо” в RTL.
Индикаторы выполнения и ползунки, которые должны заполняться справа налево. Измените порядок любых чисел вдоль них, но никогда не переворачивайте цифры.
Значки, представляющие текст или направление чтения, например значки выравнивания текста или списка.
Значки, показывающие движение вперед или назад.

Не переворачивайте:

Логотипы, даже содержащие текст. Apple предупреждает, что перевернутый логотип “сбивает людей с толку и может иметь юридические последствия”.
Универсальные знаки, такие как галочка.
Объекты реального мира, такие как часы, которые “работают одинаково везде”.
Элементы управления, которые означают реальное направление, например “выравнивание вправо”, которые все равно должны указывать вправо.

Практический подход: пометьте каждый значок в вашей системе дизайна как mirror или fixed один раз и примените переворот с помощью одного правила CSS для mirror набор.

5. Обработка чисел, дат и смешанного текста

Числа. «Цифры в конкретном номере, таких как '541', номер телефона или номер кредитной карты, всегда отображаются в одном и том же порядке», — говорится в руководстве Apple. В иврите используются западноарабские цифры (0-9). Арабский текст может использовать западные или восточные арабские цифры (٠-٩), и употребление варьируется в зависимости от страны и даже региона. Выбирайте по рынку и поддерживайте согласованность выбора по ценам, датам и формам.

Смешанное направление. Арабские предложения часто содержат английские названия продуктов, URL-адреса или код. Двунаправленный алгоритм браузера размещает эти прогоны, но знаки препинания рядом с ними могут оказаться не на той стороне. Оберните предоставленные пользователем фрагменты или фрагменты неизвестного направления <bdi> или дайте им dir="auto", как предлагает W3C для вставленного текста.

Названия. Если заголовок страницы RTL начинается с латинских букв (аббревиатура, бренд), браузеры заметок W3C могут отображать его в неправильном порядке во вкладках и закладках. Добавление &rlm; (невидимая отметка справа налево) в начале заголовка исправляет это.

6. Выберите шрифты и размеры для сценария

Арабские буквы соединяются и меняют форму в зависимости от своего положения в слове, а в иврите и арабском языке нет заглавных букв. Два последствия для дизайна:

Выберите шрифты, созданные для сценария. Латинский веб-шрифт представляет собой системный шрифт для арабского языка, который часто выглядит несоответствующим. Загрузите специальный арабский или еврейский шрифт с хорошими подсказками для небольших размеров.
Размеры баланса. Apple отмечает, что текст на арабском или иврите может выглядеть слишком маленьким рядом с латинским текстом того же размера, написанным заглавными буквами, и что увеличение размера шрифта RTL примерно на 2 пункта часто уравновешивает его.
Не используйте арабский язык с интервалом между буквами. Дополнительное отслеживание разрывает соединения между буквами. Также избегайте text-transform: uppercase на элементах, которые могут содержать текст RTL; там это не имеет никакого эффекта, поэтому любой дизайн, в котором для акцентирования внимания используются заглавные буквы, нуждается в другой обработке.
Допускается разная высота линий. В арабском письме используется больше вертикального пространства для точек и отметок, поэтому проверьте высоту строк и обрезанный текст в кнопках.

7. Тестируйте с реальным контентом и реальными читателями

Макеты, заполненные латинским текстом-заполнителем, скрывают большинство проблем RTL. Перед запуском:

Загрузить реальный переведенный текст в каждом шаблоне, включая самые длинные строки, сообщения об ошибках и электронные письма.
Тестовые смешанные струны: арабское предложение с английским названием бренда, URL-адресом и ценой.
Проверьте формы от начала до конца: направление ввода, выравнивание заполнителей, сообщения проверки, поля телефона и карты (которые остаются слева направо).
Тест на мобильном устройстве, где жесты смахивания и внехолщовые меню должны открываться справа.
Спросите у местного читателя чтобы просмотреть основные маршруты. За считанные секунды они заметят перевернутую стрелку или неуместную запятую.
Сохраняйте основы SEO для каждого языка: каждая версия языка RTL имеет свой собственный URL-адрес, а hreflang связывает ее с другими языками. Посмотрите наш многоязычный обзор SEO.

Как ConveyThis помогает с языками RTL

ConveyThis переводит ваш сайт на арабский, иврит, персидский, урду и остальные 210 поддерживаемых языков и обслуживает каждый язык по своему URL-адресу. Для языков с направлением текста справа налево вы можете включить настройку, которая переключает переведенные страницы в положение справа налево, как показано в нашей справочной статье изменение направления текста. Когда он включен, переведенная страница устанавливается на dir="rtl" с текстом, выровненным по правому краю, в то время как ваши страницы на языке оригинала остаются такими, какими вы их создали.

Чего эта настройка не может сделать, так это исправить таблицу стилей, полную left и right. Чем чище ваш CSS (шаги 2–4), тем лучше работает автоматический переключатель. Что касается самой языковой работы, вы можете совершенствовать машинные переводы в визуальном редакторе, поддерживать соответствие терминов бренда глоссарию и менять изображения на каждом языке перевод изображений и медиа. Наше пошаговое руководство по перевод веб-сайта на арабский язык охватывает процесс от выбора языка до запуска, а также обзор локализации объясняет, как ConveyThis обрабатывает части, выходящие за рамки перевода.

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

Что такое RTL в веб-дизайне?

Дизайн RTL (справа налево) адаптирует веб-сайт для сценариев, читаемых справа налево, таких как арабский и иврит. Это означает установку dir=“rtl” на странице, зеркальное отображение макета и значков направления, а также сохранение неизменными логотипов, номеров, элементов управления мультимедиа и фотографий.

Должен ли я установить направление RTL в CSS или HTML?

В HTML. W3C рекомендует добавлять dir=“rtl” к элементу html и никогда не использовать CSS для установки базового направления, поскольку направление является частью смысла контента и должно работать даже без таблицы стилей.

Какие значки не следует отображать в RTL?

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

На арабском языке цифры пишутся справа налево?

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

Работают ли логические свойства CSS во всех современных браузерах?

Да, основные логические свойства, такие как margin-inline-start, padding-inline-end и text-align: start, поддерживаются во всех основных современных браузерах. Прежде чем полагаться на него, проверьте любое новое или менее распространенное свойство MDN.

Начните с перевода

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