RTL означает направление текста справа налево (right to left). Лишь несколько языков в мире используют направление текста RTL, но на них говорит более миллиарда человек. Добавить поддержку RTL в Вашу тему оформления просто, и это может значительно расширить ее рынок.
Вот две страницы: одна с направлением RTL, а другая — LTR (обычным):
| Английский — LTR | Иврит — RTL |
|---|---|
 |
 |
Вы можете видеть, как все элементы на странице RTL отображаются «перевернутыми» по горизонтали. Это похоже на взгляд на «обычную» страницу LTR через зеркало. Создать такое зеркальное отображение на самом деле довольно просто. Атрибут направления «dir» в CSS выполнит основную работу, и Вам нужно будет внести исправления лишь в нескольких местах.
Загрузка отдельного CSS-файла для языков RTL
WordPress знает, в каких языках используется направление текста RTL, и позволяет Вам легко настраивать их макет. Создайте новый файл rtl.css и поместите его в корневой каталог Вашей темы оформления.
WordPress загрузит файл rtl.css после загрузки обычного файла styles.css, поэтому CSS-файлу RTL нужно переопределить только те атрибуты, которые должны измениться. Это означает, что файл rtl.css обычно довольно мал для большинства тем оформления.
Установка направления страницы на RTL
Атрибут «direction» в CSS указывает браузеру направление страницы. Для языков RTL Вам нужно установить для него значение «rtl». Существует еще один «волшебный» атрибут, который следует задать для правильного отображения RTL. Он называется «unicode-bidi». Этот «волшебный» атрибут довольно легко понять, если Вы привыкли писать в формате RTL. Он управляет тем, как символы отображаются внутри строки.
Для правильного отображения RTL добавьте следующее в селектор .body:
{
direction:rtl;
unicode-bidi:embed;
}
И готово! Теперь Ваша тема оформления отображается в формате RTL. Почти. Эти два оператора сделают так, что большая часть страницы будет выглядеть правильно. Теперь Вам нужно обработать исключения.
Изменение направления текста, обтекания и очистки
Каждое место в CSS, где Вы задаете направление текста и элементы обтекания (float), требует ручного внимания.
Найдите все селекторы для text-align, float и clear. Если в каком-либо из них указано направление, измените «right» на «left» и наоборот. Вспомните о зеркальном отображении, которого мы пытаемся достичь, и это облегчит понимание данного преобразования.
Графика, подразумевающая направление
Еще одна вещь, на которую следует обратить внимание, — это графика, имеющая «направленный» смысл. Например, если Вы создаете слайд-шоу, у Вас могут быть стрелки для перехода к следующему и предыдущему элементам. Помните, что на языках RTL Ваш сайт будет выглядеть как в зеркале, поэтому Вам следует перевернуть и направляющую графику. Если Вы используете стрелку вправо для кнопки «Далее» в LTR, Вам следует указать стрелку влево для кнопки «Далее» в RTL.
Выбор пользовательских шрифтов
В языках RTL нет тех же шрифтов, что и в языках LTR. Если Вы используете нестандартные шрифты и макет Вашей темы оформления опирается на них, Вам следует найти шрифты для замены для этих языков. Если Вы выберете шрифт, которого не существует в языке RTL, браузер вернется к тому, что ему известно. Лучше, если Вы укажете альтернативные существующие шрифты, которые Вам нравятся.
Если Вы используете стандартные веб-шрифты, все в порядке.
Как протестировать Вашу тему оформления в RTL
При разработке CSS-файла для RTL всегда полезно тестировать то, что Вы делаете.
- Измените язык в файле wp-config.php на этот язык. Если Вы используете WPML, просто добавьте язык RTL на свой сайт.
Добавление языков RTL - Переведите жестко закодированные тексты Вашей темы оформления (по крайней мере, во фронтенде) на этот язык. WPML позволяет сделать это с помощью модуля Перевод строк.
Перевод текстов темы оформления - Получите пример контента на этом языке. Для удобного редактирования в формате RTL в админ-панели WordPress перейдите в свой профиль, прокрутите до настройки языка админ-панели и установите тот же язык, что и язык редактирования.
Редактирование контента в режиме RTL
Не знаете ни одного языка RTL? Просто воспользуйтесь сервисом Google Переводчик. Перевод в основном будет бессмысленным, но для целей разработки CSS этого достаточно.
Теперь просмотрите различные типы контента на Вашем сайте. Обязательно включите записи, страницы, главную страницу и любой созданный Вами пользовательский контент.
Для достижения наилучших результатов найдите того, кто говорит на этом языке, и попросите его проверить все для Вас. Ваш друг, говорящий на языке RTL, выявит оставшиеся 5% проблем, которые Вы упустите. Это «желательное», но не обязательное условие, поэтому не прекращайте работу над RTL, если Вы не знаете никого, кто мог бы помочь с тестированием. Как только Вы выпустите версию Вашей темы оформления с поддержкой RTL, Вы получите множество отзывов от Ваших клиентов. Если Вы выполните 95% работы, они будут рады внести исправления для оставшихся 5%.
Бонусный материал — админ-панель Вашей темы оформления на языках RTL
Основное требование для создания темы оформления, совместимой с RTL, заключается в том, чтобы фронтенд (публичный контент) корректно отображался на языках RTL. Это настоящая основа, без которой никто не сможет использовать Вашу тему оформления для создания сайтов на языках RTL.
Кроме того, многие пользователи захотят, чтобы админ-панель WordPress была на их языке. Это также означает, что экраны админ-панели Вашей темы оформления будут отображаться в ориентации RTL.
Простой способ добиться такой совместимости с RTL для экранов админ-панели Вашей темы оформления — использовать стандартные CSS-классы WordPress для элементов графического интерфейса. Правда, это означает, что Вы не сможете использовать причудливые CSS-эффекты для украшения Вашего графического интерфейса. Но это также означает, что Ваш графический интерфейс идеально впишется в админ-панель WordPress и будет корректно отображаться в LTR и RTL.
Если Вам необходимо использовать собственный CSS для экранов админ-панели, проверьте, как он выглядит на языке RTL. Те же правила, которым Вы следуете для CSS фронтенда, применимы и к бэкенду. Измените выравнивание, обтекание и очистку; избегайте абсолютного позиционирования и позаботьтесь об изображениях.
Отличный пример — тема оформления WordPress по умолчанию
К Вашему сведению, все темы оформления WordPress по умолчанию идеально адаптированы для языков RTL. Откройте тему оформления по умолчанию и найдите файл rtl.css. Вы увидите, какие изменения он вносит в CSS для темы оформления по умолчанию. Обычно эти изменения довольно малы и им легко следовать.