Ответы, понравившиеся пользователю dom1n1k

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

Flying @Flying

Поскольку недавно пришлось добавлять в одном проекте арабский язык - поделюсь полученным опытом:

Вёрстку как правило переделывать не нужно, обычно достаточно изменения стилей, но только в случае если сам сайт свёрстан с применением современных техник, в первую очередь 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);     
        }
    }
}

Надеюсь это описание будет полезным :)

Войдите на сайт