Перевод, локализация и изготовление видеороликов
42,34
рейтинг
9 февраля 2015 в 10:12

Разработка → Сайты справа налево: как подключить 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.commoner.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 с удовольствием поможем как с локализацией на арабский и иврит, так и с лингвистическим тестированием уже локализованных продуктов и сайтов.
Автор: @alconost voron
Alconost, Inc.
рейтинг 42,34
Перевод, локализация и изготовление видеороликов

Комментарии (13)

  • 0
    По-моему, рассмотренные подходы очень слабые с точки зрения написание таких стилей и их поддержки. Есть же препроцессоры и лучше использовать их ( Пример возможных миксинов), стили пишешь один раз и в одном месте, а потом просто генерятся два файла под разные раскладки
  • 0
    Берем Less делаем 2 билда для RTL и для простой версии если пользуемся webstorm/phpstorm настраиваем File Watcher для 2х версий.
    Ну или Gulp/Grunt по вкусу, хотя Gulp немного вкуснее и готово. Вторую часть статьи можно попросту выкинуть. А вот за первую спасибо.
  • 0
    Делали подобное на Twitter Bootstrap. Кастомный CSS один, плюс Bootstrap нормальный и RTL. Если четко следовать идеологии Bootstrap, Работает на ура.
  • 0
    На самом деле это не цифры пишутся слева направо, а мы с вами пишем цифры справа налево: европейцы, заимствуя позиционную систему счисления у арабов, направление письма не развернули, хотя было бы логично.
    • 0
      А в языке у них тоже справа налево? Условно: один и десять и пятьсот и тысяча?
      • +2
        У них как у немцев. ۱۹۴۵ (1945) — это «тысяча и девятьсот и пять и сорок» (أَلْفٌ وَتِسْعُمِئَةٍ وَخَمْسَةٌ وَأَرْبَعُونَ). Тут куда не разворачивай — всё криво будет. А у нас как раз логично: пишется как читается.
    • 0
      Европейцы действительно не стали ничего разворачивать, но это сделало запись более логичной: число читается с той же стороны с которой пишется. Ну по крайней мере так в языках без извращений типа немецкого (где после сотен идут единицы, а уж после тех — десятки). У арабов та же придурь, что, по крайней мере объясняет почему они изначально выбрали «не вполне логичное» направление письма.

      Но тут, на самом деле, речь совсем о другом. Речь о том, что если вы напишите какие-нибудь буквы из LTR языка (ну, скажем, русского), то слева вы увидите первую букву, чуть правее — вторую, ещё правее — третью. Если вы напишите буквы из RTL языка (арабского или иврита), то вы, разумеется, увидите первую букву справа, следующую — левее, третью — ещё левее.

      А вот что будет, если вы напишите число арабскими арабскими цифрами (то есть цифрами, которыми пользуются арабы)? Ответ неожиданный: если ничего не делать, то при стандартных настройках первая цифра будет слева, следующая — правее, третья — ещё правее. Браузер за вас сам всё сделает, не надо даже думать об этом! Но ещё веселее будет со знаками ">" и "<". Если они будут идти после арабской буквы, то они «сами собой» развернутся, если после арабской (неважно — арабской или «арабской арабской») цифры — то нет! Так что подвох может случиться даже с самыми «обычными» буквами из US ASCII.

      В общем одним CSS'ом можно обойтись далеко не всегда. Иногда ещё и код приходится переделывать…

      P.S. О том, что в арабском каждая буква имеет четыре варинта написания тоже как бы заботится браузер сам по себе, но вы можете просто не ожидать, что написав три раза одну и ту же букву (ну скажем "ڠ") вы получите в результате слово в котором она написана тремя разными способами (в данном случае "ڠڠڠ")…
      • 0
        > Если они будут идти после арабской буквы, то они «сами собой» развернутся
        А как называется свойство, отвечающее за это, в стандарте Unicode, не подскажете?
        • 0
          Там есть аж четыре свойства: Bidi_Class, Bidi_Control, Bidi_Mirrored, Bidi_Mirroring_Glyph. Wikipedia включает короткое описание, на unicode.org есть подробное описание.
          • 0
            Это как раз те свойства, которые я не смотрел. Спасибо.
      • 0
        В русском тоже, от 10 до 20 сначала единицы потом десяток: одиннадцать, двенадцать…
        • 0
          Ну это всё-таки такие «цельные» слова. Но да, в этом случае в русском тоже небольшая аномалия, согласен.
        • 0
          Это вы ещё с языками, не следующими десятичной логике, не сталкивались. Во французском, например, 71 будет звучать как «шестьдесят и одиннадцать», а в грузинском — «три по двадцать и одиннадцать».

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Разработка