RTL

Для языков с письмом справа налево мало выровнять текст по правому краю. Читатель ждёт, что меню начинается справа, боковая колонка стоит слева, стрелка «далее» указывает влево, а поле поиска с лупой отражено зеркально. Сайт, сделанный только для левостороннего письма, на таком языке выглядит перевёрнутым и неудобным. Противоположное направление обозначают LTR — left-to-right.

Как WordPress определяет направление

Направление задаётся языком сайта или пользователя. Функция language_attributes() в шаблоне выводит на тег html атрибут dir="rtl", функция is_rtl() возвращает true. Дальше WordPress помогает со стилями:

• если в папке темы лежит файл rtl.css, ядро подключает его автоматически поверх основных стилей;
• для стилей, подключённых через wp_enqueue_style(), вызов wp_style_add_data( $handle, 'rtl', 'replace' ) велит загружать вместо файла его зеркальную копию с суффиксом -rtl.

Зеркальные копии обычно не пишут руками, а генерируют инструментами вроде RTLCSS при сборке темы.

Пример: логические свойства CSS

Современный способ — писать стили так, чтобы они сами подстраивались под направление. Вместо «левый» и «правый» в CSS используют «начало» и «конец» строки:

.card {
    margin-inline-start: 1rem;   /* вместо margin-left */
    padding-inline-end: 2rem;    /* вместо padding-right */
    text-align: start;           /* вместо text-align: left */
    border-inline-start: 3px solid #2a7ae2;
}

При dir="rtl" такие отступы и рамка автоматически переедут на другую сторону, и отдельный файл стилей не понадобится.

Что легко упустить

Иконки со стрелками и прогресс-бары нужно отражать, а логотипы, цифры, телефоны и фрагменты кода — нет. Флексбокс и гриды меняют порядок колонок сами, а абсолютное позиционирование через left — нет. Проверять удобно на тестовой копии, временно переключив язык сайта на арабский или иврит. Тема подготовки сайта к разным языкам подробнее раскрыта в статье об интернационализации.