Доброго времени суток. Запускаем мы в препрод проект (react, ant.design), лэндинг, сверстанный под английскую локаль, под все разрешения, даже под калькулятор. Потом приходит требование докинуть пару языков, и все едет) Например, была кнопочка JOIN, а стала кнопочка ПРИСОЕДИНИТЬСЯ (особенно больно в местах, где пространство сильно ограничено, и при некоторых разрешениях даже JOIN приходится ужимать шрифтом или шириной).
Есть ли какая-то общепринятая практика решения таких проблем? Дописывание стилей в зависимости от локали? Расширение текущих стилей под любую локаль? Возможно, переверстывание целого блока под локаль и создание отдельных компонент?
Спасибо
Присоединяюсь к конюмменту выше.
Требование мультиязычности должно быть на стадии продумывания макета. Что бы у дизайнера даже мысли не возникало, что у текста может быть фиксированный размер.
выше пишут все правильно. в идеальном мире так и надо.
на практике некоторые особо сложные кнопки проще заменить иконкой - да это будет не так юзабельно, но зато верстка не едет
Не, ну если ситуация уже такая, чтотнащо натягивать сову на глобус, то понятно чтотнадо костылить. Но это уже конкретные действия с уонкретным макетом, а не общее решание
Есть ли какая-то общепринятая практика решения таких проблем?
Тестить хотя бы иногда на английском, немецком и испанском.
Лучше избегать абсолютных значений размеров, а если нельзя - эллипсис и тултип с полным вордингом.
Возможно, переверстывание целого блока под локаль и создание отдельных компонент?
Ни в коем случае, этот рак имеет свойство разрастаться со временем. Лучше переосмысливать дизайн так, чтобы он был универсален.
ЗЫ Самое интересное начинается, когда речь заходит о RTL-языках (арабский, иврит и т.п.)
По опыту могу сказать, что лучше всего разрабатывать отдельный набор стилей под каждую локализацию. Можно извращаться и писать костыли, но в итоге вы придёте к тому, что нужно прорабатывать макеты под конкретные языки, как минимум компоненты интерфейса.
Выносим все ui блоки в свой ui-kit, и прокидываем туда локаль, которая будет модификатором для ваших элементов.
Ну и максимально разбиваем наши глупые компоненты: кнопка - отдельно, иконка-лоадер к этой кнопке - отдельно и так далее. Крупные ui элементы типа таблиц так же максимально разбиваем вплоть до cell и cellContent. Ну и пользуемся scss/sass миксинами и импортами, что позволит нам придерживаться dry.
Это основные советы, думаю ближе к проекту можно ещё что-то придумать для облегчения разработки
Простой
Средний
