Як перекладати мови з написанням справа наліво (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. Здебільшого це працює автоматично. Але коли у вас є кілька заповнювачів або чисел, що прилягають до тексту RTL, візуальний порядок може стати непередбачуваним.
Поширені помилки перекладу
Загальні інструменти перекладу роблять кілька помилок, специфічних для RTL:
-
Зворотний порядок заповнювачів. Рядок, як
%1$s out of %2$s, може отримати заповнювачі, переставлені місцями, тому що AI перевпорядковує їх, щоб відповідати арабській граматиці. Це призводить до неправильного виводу, як "10 out of Page" замість "Page out of 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 вирішує цю проблему за допомогою Контекстно-залежного AI двигуна, який розуміє специфічні для RTL виклики нативно:
- Усі шість арабських форм множини генеруються автоматично. Наш двигун зчитує заголовок
Plural-Formsу вашому.poфайлі та створює рівно стільки форм, скільки потребує ваша цільова мова. Жодних порожніх слотівmsgstr, жодних англійських повернень. - Безпека заповнювачів. Змінні, як
%s,%dі%1$s, заблоковані під час перекладу. AI не може перевпорядкувати, видалити або пошкодити їх -- навіть коли арабська граматика пропонує інший порядок слів. Дізнайтеся більше про те, як блокування синтаксису захищає ваш код. - Двонаправлений контекст. AI розуміє, що рядки зі змішаним напрямком потребують спеціальної обробки та зберігають атрибути напрямку HTML.
Незалежно від того, чи локалізуєте ви тему блогу для аудиторії на івриті, чи перекладаєте повний магазин WooCommerce перською мовою, процес однаковий: завантажте свій .po файл, виберіть свою цільову мову та завантажте перекладений файл. Весь робочий процес займає хвилини, а не дні.
Для повного ознайомлення з процесом локалізації WordPress перегляньте наш повний посібник з локалізації WordPress.
Припиніть ставитися до RTL як до другорядної речі
Мови з написанням справа наліво представляють понад мільярд потенційних користувачів. Арабська є п'ятою за поширеністю мовою у світі. Іврит і перська обслуговують критичні ринки на Близькому Сході та в Центральній Азії.
Якщо ваш сайт WordPress не може обслуговувати цих користувачів з вишуканим, рідним досвідом, вони знайдуть конкурента, який може.
Хороша новина: WordPress вже має інфраструктуру. Вашій темі просто потрібен правильний CSS, а вашим .po файлам потрібен інструмент перекладу, який поважає складність мов RTL.
Готові перекласти свій сайт WordPress арабською, івритом або перською мовами? Почніть безкоштовно на SimplePoTranslate.com