Поскольку недавно пришлось добавлять в одном проекте арабский язык - поделюсь полученным опытом:
Вёрстку как правило переделывать не нужно, обычно достаточно изменения стилей,
но только в случае если сам сайт свёрстан с применением современных техник, в первую очередь flexbox. Если у вас там float'ы или таблицы - то ой, задача по сложности вырастет на пару порядков и почти наверняка не обойдётся без доработки html кода. Если же в этом аспекте всё в порядке и ваш проект построен на flexbox - то основная масса изменений сводится к одной строчке CSS:
body {
direction: rtl;
}
это "перевернёт" все горизонтальные flexbox'ы и по сути сделает за вас всю основную массу работы по адаптированию сайта к RTL языкам. Конечно, в зависимости от того как именно у вас будет подключаться стиль (отдельные стили для RTL или только патч или всё вместе) реальный селектор может быть, к примеру
html[dir=rtl] + body, но это уже детали.
Тем не менее, даже если flexbox автоматизирует для вас кучу ручного труда - есть целый ряд ситуаций когда необходимы доработки вручную. Основных направлений несколько:
- Горизонтальные отступы. Это самая большая часть работы по адаптации т.к. вам необходимо будет "перевернуть" и их тоже, заменив, к примеру,
margin-left на margin-right и наоборот, то же самое для padding'а
- Абсолютное / относительное позиционирование в горизонтальной плоскости. Речь идёт о свойствах
left и right, их, как можно догадаться, тоже необходимо поменять местами
- Размеры шрифтов. Поскольку, к примеру, арабский шрифт, обычно выглядит меньше и тоньше чем, к примеру, английский - возможно возникнет потребность увеличить размеры шрифтов (
font-size, line-height) и, возможно, подстроить стилизацию (font-weight)
text-align - в ряде ситуаций может потребоваться изменить его на противоположный
:first-child и :last-child, стоит быть внимательным и перепроверить корректность получаемого результата, к примеру если к этим псевдо-элементам добавляется дополнительный отступ - вам, возможно, придётся менять местами и селекторы
- Нужно адаптировать визуальные элементы содержащие направление, к примеру стрелки / уголки и т.п. В ряде случаев их можно повернуть, но где-то необходимо будет рисовать отдельную версию
Если вы используете CSS препроцессоры - то я очень рекомендую написать mixin'ы для рендера этих свойств и адаптировать код таким образом чтобы изменяющиеся стили рендерились через них. Я
выложил набор mixin'ов которые использовал в своём проекте, среди них нет mixin'ов для отступов и шрифтов т.к. у меня эти вопросы решаются по-другому, но думаю что там не будет ничего сложного.
Общая схема адаптации которую я использовал в проекте:
- Добавление
direction: rtl
- "Переворачивание" отступов, это самая большая часть работы т.к. они чаще всего встречаются
- Проверка вёрстки, для каждого выпавшего элемента добавление патчей с использованием mixin'ов, ссылку на которые я дал выше
- Подбор изменений для шрифтов, адаптация шрифтовых параметров
Пример выдернутого наудачу из проекта куска для демонстрации патчей, это стиль добавления иконки к строке текста, для 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);
}
}
}
Надеюсь это описание будет полезным :)
Простой
