Практично кожен сайт зараз розробляється із підтримкою багатомовності. Проте це може виявитись непростою справою, якщо потрібно використовувати різні напрямки письма. Тож в нашому записі ми розповідаємо про те, як налаштувати стандарти відображення сторінок на своєму сайті.
У загальному випадку LTR (left-to-right) та RTL (right-to-left) — це напрямки письма (LTR — зліва направо, RTL — справа наліво). Проте у контексті теми ми будемо розглядати LTR та RTL як стандарти відображення сторінок. Для прикладу, ось знімок екрана одного і того ж сайту англійською мовою та івритом:
Як бачимо, сторінки виглядають практично дзеркально. Отже, якщо сайт, над яким ви працюєте, повинен відображатися на івриті, арабській мові, або на одній з менш поширених мов з напрямком письма справа наліво (Aramaic, Southern Balochi, Bakthiari, Sorani, Dhivehi, Persian, Gilaki, Kurdish, Mazanderani, Western Punjabi, Pashto, Sindhi, Uyghur, Urdu, Yiddish) вам потрібно, щоб сайт виглядав відповідно до RTL стандартів. У такому випадку імовірно знадобиться одночасна підтримка RTL та LTR, наприклад, підтримка івриту та англійської мови. Для цього ви можете використати одне з наступних трьох рішень:
- Створити окремий css файл для LTR та css файл для RTL (тобто підключається лише цей css файл).
Переваги: відповідний css файл завантажується лише один раз.
Недоліки: Будь-які зміни у css файлі потрібно дублювати (навіть у випадку, якщо зміни не впливають на стиль відображення сторінки).
- Створити додатковий css файл для RTL (тобто додатково підключається css файл, який переписує лише ті властивості з основного css файлу, які залежать від стилю відображення сторінки).
Переваги: При зміні css не потрібно дублювати зміни які не впливають на стиль відображення сторінки.
Недоліки: Для RTL відображення буде завантажуватись 2 файли замість одного.
- Задати підтримку LTR та RTL в одному файлі.
Переваги: Лише один файл.
Недоліки: Більше коду в одному файлі, а отже і більша ймовірність помилки при внесенні змін.
Припустимо, у вас є css файл для LTR і вам потрібно створити окремий css файл для 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.commoner.com — цей сервіс змінить лише ті властивості, які залежать від напрямку письма (вставляємо LTR css — отримуємо css для RTL);
- https://github.com/twitter/css-flip — утиліта та відповідний додаток для Sublime — https://sublime.wbond.net/packages/CSS%20RTL%20generator, які дозволяють віддзеркалити css.
Тож проблем з отриманням RTL css з LTR виникнути не повинно. Наступним етапом є підключення css. Принцип простий — перевіряємо мову (чи напрямок письма) і відключаємо відповідний/додатковий css, або використовуємо css файл, який підтримує LTR та RTL. Якщо ви підключаєте додатковий css файл, який переписує властивості основного, зверніть увагу, що він має підключатися після основного файлу css. Якщо у вас єдиний 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 css з LTR потрібно звернути особливу увагу на тестування, оскільки існує ймовірність того, що сервіс може віддзеркалити те, що вам не потрібно. Окрім того, варто звернути увагу на спрайти, адже вони, на жаль, не віддзеркалються автоматично. Виходом з ситуації може бути створення окремих спрайтів для RTL. Якщо ви пишете на SCSS і вам потрібна підтримка LTR та RTL, спробуйте Directional-SCSS: https://github.com/tysonmatanich/directional-scss.