Сайти справа наліво: як підключити RTL-стандарт

Коли непідготовлена людина бачить сайт на арабській, івриті або будь-якому іншому RTL (right-to-left) мовою, у нього паморочиться голова: справа наліво розташовуються не тільки текст, але і елементи інтерфейсу.



Коли ми в Alconost вперше зіткнулися з необхідністю локалізувати сайт на арабську, а потім протестувати його, нам довелося вивчити, як саме RTL користувачі дивляться на світ:
  • замість підкреслення, курсив або р о з р я д к і араби зазвичай користуються надчеркиванием;
  • дробовий перенесення слова на інший рядок не допускається;
  • порожній простір у рядку усувається розтягуванням букв;
  • цифри пишуться зліва направо;
  • в арабському розділові знаки пишуться зліва направо;
  • в івриті та арабською немає великих літер.
А якщо в RTL текст треба вставити слово на латиниці, воно пишеться як зазвичай: зліва направо. Такий змішаний RTL-LTR текст перетворюється у відмінний тренажер для очей :)

Отже, якщо сайт, з яким ви працюєте, має відображатися на івриті, арабською мовою чи на інших рідкісних мовах з напрямком письма справа наліво, вам потрібно, щоб сайт підтримував RTL стандарти. Причому, ймовірно, вам знадобиться одночасна підтримка RTL і LTR — наприклад, підтримка англійської мови та івриту.



Способи підключення RTL

Ви можете використовувати один з наступних способів:
● Створити окремі css файли для LTR і RTL (тобто підключається тільки один css файл).
Переваги: потрібний файл завантажується тільки один раз.
Недоліки: будь-які зміни в css файлі потрібно дублювати (навіть якщо зміни не впливають на стандарти відображення сторінок).
● Створити додатковий css-файл для RTL (тобто підключається додатковий css файл, який переписує з основного css файлу тільки ті властивості, які залежать від стандарту відображення сторінки).
Переваги: Не потрібно дублювати зміни, які впливають на стандарт відображення сторінки при зміні css файлів.
Недоліки: Завантаження двох файлів для RTL відображення замість одного.
● Підключити підтримку RTL і LTR в одному файлі.
Переваги: Всього один файл.
Недоліки: Великий обсяг коду в одному файлі може привести до помилки при внесенні змін.

Як це реалізувати

Якщо у вас є css файл для LTR і вам потрібно створити ще один файл для RTL, ви повинні скопіювати і перейменувати файл і переписати властивості, які залежать від стандартів листи. Аналогічно з додатковим css файлом (залишаємо тільки ті властивості, які потрібно переписати). Це відбувається таким чином:
float: left потрібно замінити на float: right; margin-right margin-left; padding: 10px 30px 5px 0 на padding: 10px 0 5px 30px і т. д.
Це може зайняти досить багато часу, якщо у вас багато коду в css файлі. Це фактично механічні зміни, в яких просліджується чітка логіка, так що ви, ймовірно, захочете використовувати ресурси, які зроблять цю роботу за вас. Ось деякі приклади таких сервісів:
http://www.rtl-er.com — цей сервіс видасть вам css файл з переписаними властивостями, в залежності від стандарту відображення (при введенні LTR css ви отримаєте додатковий css для RTL);
http://cssjanus.простолюдин.com — цей сервіс змінює тільки ті властивості, які впливають на стандарт відображення (при введенні LTR css ви отримуєте додатковий css для RTL);
https://github.com/twitter/css-flip — утиліта і відповідний додаток для Sublime — sublime.wbond.net/packages/CSS%20RTL%20generator, які дозволяють «віддзеркалити» css файл.

Підключення CSS

Отже, з отриманням RTL css з LTR проблем виникнути не повинно. Наступний етап — підключення css. Принцип простий — ми перевіряємо мову або стандарт відображення і відключаємо відповідний/додатковий css або використовуємо css файл, який підтримує і RTL, і LTR. Якщо ви підключаєте додатковий css файл, який переписує властивості вихідного файлу, упевніться, що він підключається після вихідного файлу. Якщо у вас є всього один файл для LTR і RTL, тоді ви зможете підключити відповідні властивості до стандартів відображення з допомогою селекторів типу [dir=«ltr»] та [dir=«rtl»].

Покроковий аналіз підключення додаткового RTL css файлу теми для Wordpress:
● Аналізуємо вигляд сторінки мовою, вимагає підтримки RTL. Зверніть увагу на css файли, що визначають розміщення тих елементів, які потрібно віддзеркалити (тих, які будуть відображатися за стандартом RTL).
● Створюємо RTL-версії потрібних файлів і зберігаємо їх у ту ж папку з вихідними файлами, додаючи до назв префікс «rtl-».
● Знаходимо, де підключаються потрібні нам файли. Для цього можна використовувати утиліту grep: grep-r «studio.css" '/home/voron/ssh/wp-content/themes/studio'
● Підключаємо в знайденому файлі css для RTL:
// тут підключається css (знайдений з допомогою grep):
wp_enqueue_style( 'studio', get_template_directory_uri() . '/_inc/css/studio.css', array(), $version );
// тут підключається додатковий css файл, за умови, що він потрібен:
if (is_rtl()) {
wp_enqueue_style( 'studio-rtl', get_template_directory_uri() . '/_inc/css/studio-rtl.css', array(), $version );
}

деif (is_rtl()) — це функція Wordpress, яка перевіряє, чи відповідає поточний мову сторінки стандарту листи з напрямком справа наліво.

Якщо ж ви використовуєте сервіси, які автоматично конвертують RTL в LTR, ви повинні приділити більше уваги тестування, оскільки є ризик, що сервіс може віддзеркалити те, що вам не потрібно. Також потрібно звернути увагу на спрайт, так як вони не відображаються автоматично. Проблема може бути вирішена шляхом створення окремих спрайтів для RTL. Якщо ви використовуєте SCSS і вам потрібна підтримка LTR і RTL, спробуйте Directional-SCSS.



До речі, ми в Alconost з задоволенням допоможемо з локалізацією на арабська та іврит, так і з лінгвістичним тестуванням вже локалізованих продуктів і сайтів.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.