Как перевести языки RTL в WordPress: арабский, иврит, фарси
Вы только что закончили перевод своей темы WordPress на арабский язык. Вы загружаете .mo файл, переключаете язык сайта, и результат нечитаем. Текст перетекает влево, кнопки перекрываются, и ваш тщательно разработанный макет выглядит так, будто его пропустили через измельчитель бумаги.
Добро пожаловать в мир языков с написанием справа налево (RTL) -- где перевод - это только половина дела.
Арабский, иврит и фарси (персидский) являются одними из самых распространенных языков на земле. Только на арабском языке говорят более 400 миллионов человек. Если ваш сайт WordPress игнорирует эту аудиторию, вы упускаете серьезные деньги. Но обслуживание этих пользователей требует больше, чем просто замену английских слов арабскими. Это требует переосмысления всего направления вашего макета.
Это руководство охватывает все, что вам нужно знать: как RTL работает в WordPress, как исправить ваш CSS, как работать с .po файлами со строками RTL и как избежать наиболее распространенных ошибок.
Как RTL работает в WordPress
WordPress имеет встроенную поддержку RTL. Когда вы устанавливаете язык своего сайта на арабский (ar), иврит (he) или фарси (fa), WordPress автоматически добавляет dir="rtl" к тегу <html> и загружает таблицу стилей rtl.css, если ваша тема ее предоставляет.
Это теория. На практике большинство тем поставляются с минимальной или сломанной поддержкой RTL.
Что на самом деле меняется
Когда активируется режим RTL, браузер зеркально отображает весь макет страницы:
- Текст течет справа налево.
- Боковые панели меняются сторонами.
- Меню навигации меняют порядок.
- Значения отступов и полей переворачиваются (левый становится правым).
- Значки с направленным значением (стрелки, шевроны) должны быть зеркальными.
Если CSS вашей темы был написан только для LTR, каждое объявление margin-left, padding-right, float: left и text-align: left теперь борется с механизмом RTL браузера.
Исправление вашего CSS для RTL: практическое руководство
Самый чистый подход - использовать CSS Logical Properties, которые автоматически адаптируются к направлению письма документа. Вместо left и right вы используете inline-start и inline-end.
До: физические свойства (ломается в RTL)
/* LTR-only CSS -- breaks in Arabic */
.sidebar {
float: left;
margin-right: 20px;
}
.nav-arrow {
padding-left: 10px;
text-align: left;
}
.card {
border-left: 3px solid #0073aa;
}
После: логические свойства (работают в обоих направлениях)
/* Direction-agnostic CSS -- works in both LTR and RTL */
.sidebar {
float: inline-start;
margin-inline-end: 20px;
}
.nav-arrow {
padding-inline-start: 10px;
text-align: start;
}
.card {
border-inline-start: 3px solid #0073aa;
}
С логическими свойствами вы пишете свой CSS один раз, и он работает правильно как на английском, так и на арабском языке без каких-либо переопределений.
Метод переопределения [dir="rtl"]
Если вы не можете реорганизовать всю свою таблицу стилей, вы можете нацеливаться на RTL, используя селекторы атрибутов:
[dir="rtl"] .sidebar {
float: right;
margin-left: 20px;
margin-right: 0;
}
[dir="rtl"] .nav-arrow {
padding-left: 0;
padding-right: 10px;
text-align: right;
}
Это работает, но удваивает ваше бремя обслуживания. Каждый раз, когда вы обновляете свои стили LTR, вы также должны обновлять переопределения RTL.
Перевод PO-файлов со строками RTL
Сам перевод создает проблемы, выходящие за рамки макета. Языки RTL имеют уникальные характеристики, которые ставят в тупик большинство автоматизированных инструментов.
Двунаправленный текст (Bidi) в PO-файлах
Реальная сложность появляется, когда текст RTL и LTR смешиваются в одной строке. Рассмотрим этот распространенный шаблон WordPress:
msgid "Powered by %s"
msgstr "مدعوم بواسطة %s"
Заполнитель %s будет заменен английским названием продукта, например "WooCommerce". В отображаемом выводе браузер должен отображать арабский текст, идущий справа налево, затем переключаться на слева направо для английского слова, а затем потенциально переключаться обратно.
Это называется двунаправленным текстом (или "bidi"), и он обрабатывается алгоритмом Unicode Bidirectional. Большую часть времени он работает автоматически. Но когда у вас есть несколько заполнителей или чисел, прилегающих к тексту RTL, визуальный порядок может стать непредсказуемым.
Распространенные ошибки перевода
Общие инструменты перевода делают несколько RTL-специфичных ошибок:
-
Обратный порядок заполнителей. Строка типа
%1$s out of %2$sможет поменять заполнители местами, потому что ИИ переупорядочивает их в соответствии с арабской грамматикой. Это приводит к неправильному выводу, например "10 из Page" вместо "Page из 10". Узнайте больше о защите переменных кода во время перевода. -
Нарушение направленности HTML. Если ваша строка содержит встроенный HTML, например
<span dir="ltr">, наивный переводчик может удалить атрибутdirили перевести его. -
Отсутствующие формы множественного числа. Арабский язык имеет шесть форм множественного числа -- ноль, один, два, несколько, много и другие. Это самая сложная система множественного числа из всех языков, поддерживаемых WordPress. Инструмент, который генерирует только две формы (например, английское единственное/множественное число), оставит ваш арабский
.poфайл сломанным. Для глубокого погружения в то, как работает множественное число Gettext, см. наше руководство по сложной плюрализации в WordPress.
Вот как выглядит правильно переведенная арабская строка множественного числа в .po файле:
# Arabic: nplurals=6
msgid "%d comment"
msgid_plural "%d comments"
msgstr[0] "لا تعليقات"
msgstr[1] "تعليق واحد"
msgstr[2] "تعليقان"
msgstr[3] "%d تعليقات"
msgstr[4] "%d تعليقًا"
msgstr[5] "%d تعليق"
Если какие-либо из этих шести форм пусты или неверны, WordPress вернется к английской строке для этого конкретного количества. Ваши пользователи увидят "5 comments" на английском языке, разбросанные по в остальном полностью арабскому интерфейсу.
Тестирование вашей реализации RTL
Перевода и исправления CSS недостаточно. Вам нужно проверить результат в реальном браузере.
Краткий контрольный список для тестирования
- Переключите язык WordPress на арабский в Настройки > Общие. Не просто добавляйте
dir="rtl"вручную -- используйте настоящую языковую настройку, чтобы WordPress загружал свои собственные переопределения RTL. - Проверьте меню навигации. Они зеркальны? Открываются ли выпадающие списки в правильном направлении?
- Проверьте поля формы. Вводимый текст должен течь справа налево. Текст заполнителя должен быть выровнен по правому краю.
- Проверьте содержимое смешанного направления. Строки, содержащие как арабский, так и английский (например, названия брендов или URL-адреса), должны отображаться в правильном визуальном порядке.
- Протестируйте на мобильных устройствах. Ошибки макета RTL часто более серьезны на экранах меньшего размера, где меньше места для ошибок выравнивания.
Если ваши переводы не отображаются вообще, проблема может быть не связана с RTL -- сначала проверьте компиляцию .mo файла и пути к файлам.
Трюк с инструментами разработчика браузера
В Chrome DevTools вы можете временно принудительно включить RTL на любой странице, не изменяя настройки WordPress:
/* Paste in DevTools console as: document.documentElement.dir = 'rtl' */
html {
direction: rtl;
}
Это дает вам быстрый предварительный просмотр того, как ваша тема обрабатывает RTL, прежде чем вы даже начнете переводить.
Автоматизация перевода RTL правильным способом
Ручной перевод языков RTL - это дорого и медленно. Профессиональные арабские переводчики взимают премиальные ставки, и трудно найти кого-то, кто понимает как язык, так и специфичный для WordPress синтаксис Gettext.
SimplePoTranslate решает эту проблему с помощью движка Context-Aware AI, который изначально понимает RTL-специфичные проблемы:
-
Все шесть арабских форм множественного числа генерируются автоматически. Наш движок считывает заголовок
Plural-Formsв вашем.poфайле и создает ровно столько форм, сколько требуется вашему целевому языку. Никаких пустых слотовmsgstr, никаких английских запасных вариантов. -
Безопасность заполнителей. Переменные, такие как
%s,%dи%1$s, блокируются во время перевода. ИИ не может переупорядочивать, удалять или повреждать их -- даже когда арабская грамматика предполагает другой порядок слов. Подробнее о том, как блокировка синтаксиса защищает ваш код. -
Двунаправленный контекст. ИИ понимает, что строки смешанного направления требуют специальной обработки, и сохраняет атрибуты направленности HTML.
Независимо от того, локализуете ли вы тему блога для аудитории иврита или переводите полный магазин WooCommerce на персидский язык, процесс один и тот же: загрузите свой .po файл, выберите целевой язык и загрузите переведенный файл. Весь рабочий процесс занимает минуты, а не дни.
Для полного пошагового руководства по процессу локализации WordPress см. наше полное руководство по локализации WordPress.
Перестаньте относиться к RTL как к запоздалой мысли
Языки с написанием справа налево представляют более миллиарда потенциальных пользователей. Арабский язык является пятым по распространенности языком в мире. Иврит и персидский языки обслуживают критически важные рынки на Ближнем Востоке и в Центральной Азии.
Если ваш сайт WordPress не может обслуживать этих пользователей с помощью отполированного, естественно выглядящего опыта, они найдут конкурента, который сможет.
Хорошая новость: у WordPress уже есть инфраструктура. Вашей теме просто нужен правильный CSS, а вашим .po файлам нужен инструмент перевода, который учитывает сложность языков RTL.
Готовы перевести свой сайт WordPress на арабский, иврит или персидский? Начните бесплатно на SimplePoTranslate.com