Как правильно верстать сайт с арабскими и хинди языком?

Работаем над back-end задачами, проект многоязычный - 7 языков. Верстка сделана для английской версии, планировалось, что другие языки будут реализованы по принципу с англ версией. Но сейчас выяснилось, что Арабский и язык Хинди пишутся в другой ориентации, соответственно для них нужна отдельная верстка. Можно ли как-нибудь их реализовать без необходимости верстать.

PS на данный момент сделана английская верстка, все другие языки лежат в макетах zeplin
  • Вопрос задан
  • 1666 просмотров
Решения вопроса 3
@Flying
Поскольку недавно пришлось добавлять в одном проекте арабский язык - поделюсь полученным опытом:

Вёрстку как правило переделывать не нужно, обычно достаточно изменения стилей, но только в случае если сам сайт свёрстан с применением современных техник, в первую очередь flexbox. Если у вас там float'ы или таблицы - то ой, задача по сложности вырастет на пару порядков и почти наверняка не обойдётся без доработки html кода. Если же в этом аспекте всё в порядке и ваш проект построен на flexbox - то основная масса изменений сводится к одной строчке CSS:
body {
    direction: rtl;
}

это "перевернёт" все горизонтальные flexbox'ы и по сути сделает за вас всю основную массу работы по адаптированию сайта к RTL языкам. Конечно, в зависимости от того как именно у вас будет подключаться стиль (отдельные стили для RTL или только патч или всё вместе) реальный селектор может быть, к примеру html[dir=rtl] + body, но это уже детали.

Тем не менее, даже если flexbox автоматизирует для вас кучу ручного труда - есть целый ряд ситуаций когда необходимы доработки вручную. Основных направлений несколько:

  1. Горизонтальные отступы. Это самая большая часть работы по адаптации т.к. вам необходимо будет "перевернуть" и их тоже, заменив, к примеру, margin-left на margin-right и наоборот, то же самое для padding'а
  2. Абсолютное / относительное позиционирование в горизонтальной плоскости. Речь идёт о свойствах left и right, их, как можно догадаться, тоже необходимо поменять местами
  3. Размеры шрифтов. Поскольку, к примеру, арабский шрифт, обычно выглядит меньше и тоньше чем, к примеру, английский - возможно возникнет потребность увеличить размеры шрифтов (font-size, line-height) и, возможно, подстроить стилизацию (font-weight)
  4. text-align - в ряде ситуаций может потребоваться изменить его на противоположный
  5. :first-child и :last-child, стоит быть внимательным и перепроверить корректность получаемого результата, к примеру если к этим псевдо-элементам добавляется дополнительный отступ - вам, возможно, придётся менять местами и селекторы
  6. Нужно адаптировать визуальные элементы содержащие направление, к примеру стрелки / уголки и т.п. В ряде случаев их можно повернуть, но где-то необходимо будет рисовать отдельную версию


Если вы используете CSS препроцессоры - то я очень рекомендую написать mixin'ы для рендера этих свойств и адаптировать код таким образом чтобы изменяющиеся стили рендерились через них. Я выложил набор mixin'ов которые использовал в своём проекте, среди них нет mixin'ов для отступов и шрифтов т.к. у меня эти вопросы решаются по-другому, но думаю что там не будет ничего сложного.

Общая схема адаптации которую я использовал в проекте:
  1. Добавление direction: rtl
  2. "Переворачивание" отступов, это самая большая часть работы т.к. они чаще всего встречаются
  3. Проверка вёрстки, для каждого выпавшего элемента добавление патчей с использованием mixin'ов, ссылку на которые я дал выше
  4. Подбор изменений для шрифтов, адаптация шрифтовых параметров


Пример выдернутого наудачу из проекта куска для демонстрации патчей, это стиль добавления иконки к строке текста, для RTL языка её нужно было опускать ниже:
&.with-icon {
    $icon-size: 1.85em;
    @include offset(h $icon-size 0);

    &:before {
        // Позиция иконки меняется на противоположную
        @include hpos($left: -1em, $auto: true);
        font-size: $icon-size;
        // Подстраивается высота иконки относительно текста
        @include ltr() {
            top: 45%;
        }
        @include rtl() {
            top: 65%;
            // Стоит обратить внимание что для RTL языков иконка дополнительно переворачивается, 
            // там стрелка, так что работает нормально, но в других местах это может быть по-другому
            transform: translateY(-50%) rotate(180deg);     
        }
    }
}


Надеюсь это описание будет полезным :)
Ответ написан
alexey-m-ukolov
@alexey-m-ukolov Куратор тега HTML
Для них не нужна отдельная разметка, но нужны специальные стили.
Посмотрите доклады на тему интернационализации вёрстки, их довольно много, эта тема хорошо разобрана. Если я правильно помню, ребята из Badoo или 2Гис даже какой-то автоматический инструмент сделали для конвертации и на Хабре об этом писали пару лет назад. Сходу не смог найти пост, думаю, самым простым будет найти контакты кого-нибудь из этих компаний и спросить.
Ответ написан
sergski
@sergski
web-developer
в body для подобных языков нужно указывать direction: rtl;
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы