Мультиязычная инфографика: как не сломать вёрстку слайда

Один и тот же слайд на русском, казахском и узбекском занимает разное место. Разбираем, как сверстать графику так, чтобы перевод не превращался в переделку.

Почему ломается вёрстка

Длина текста при переводе меняется на десятки процентов. Фраза, которая по-русски занимала одну строку, на другом языке уходит в две — и слайд, свёрстанный впритык, рассыпается.

Второй источник проблем — привычка уменьшать кегль ради влезания. На витрине это заканчивается нечитаемым текстом: карточку смотрят с телефона, а не с монитора.

Есть и третий источник поломок — направление и длина слов. Составные термины в некоторых языках заметно длиннее русских аналогов и не переносятся по строке так, как ожидает вёрстка.

Четвёртая причина — направление чтения и расстановка акцентов. Даже в языках с одинаковым направлением ключевое слово фразы может оказаться в конце, и композиция, построенная под русское начало предложения, перестаёт работать.

И пятая: числа и единицы. Разделители дробей, форматы дат и обозначения размеров отличаются, и подставленный без проверки перевод превращает понятную цифру в непонятную.

И шестая, организационная: перевод часто делают не те, кто верстал. Переводчик не видит макета и не знает, что фраза должна уместиться в две строки, — поэтому ограничение по длине лучше давать вместе с текстом на перевод.

Правило запаса по месту

Слайд верстается так, чтобы текстовый блок мог вырасти на треть без последствий. Это значит: меньше слов, больше воздуха, никаких длинных предложений поверх фото.

Хорошая проверка: сверстайте самый длинный из ваших языков первым. Если он влез, остальные влезут тем более.

Запас по месту стоит закладывать не только по ширине, но и по высоте. Текст, ушедший в дополнительную строку, сдвигает всё, что стоит ниже, — и если под блоком была картинка, композиция ломается целиком.

Практичнее верстать текст в отдельной зоне с фиксированными границами: тогда рост строки меняет только её содержимое, а не весь слайд.

И проверяйте самый длинный вариант в реальном размере слайда, а не в макете на весь экран. Текст, который в редакторе выглядит просторно, на карточке площадки занимает вдвое меньше места.

Игрушки на белом фоне
Органайзеры для хранения на белом фоне

Что выносить на слайд

Чем короче формулировка, тем проще её локализовать.

Полезно завести шаблон слайда с фиксированными зонами: место под заголовок, под подпись и под иконку. Тогда перевод меняет содержимое зоны, а не всю композицию.

Иконки экономят место, но требуют однозначности. Символ, понятный на одном рынке, на другом может ничего не значить, поэтому к иконке почти всегда нужна короткая подпись — и место под неё тоже закладывается заранее.

И избегайте идиом и игры слов. Формулировка, которая красиво звучит по-русски, в переводе либо теряет смысл, либо становится вдвое длиннее.

И держите один и тот же порядок блоков на всех языках. Когда на одном рынке преимущество стоит первым, а на другом третьим, сравнивать карточки между витринами становится невозможно даже вам самим.

  • Цифры и единицы — универсальны
  • Иконки вместо описаний свойств
  • Одно преимущество на слайд, а не список
  • Короткие подписи из двух-трёх слов
  • Схемы и размерные раскладки

Технический порядок

Графика собирается слоями поверх чистого кадра: фотография остаётся одна, текстовый слой меняется. Файл с исходной вёрсткой хранится, чтобы новый язык добавлялся за минуты.

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

Именование файлов тоже стоит продумать: артикул, код языка и номер слайда в имени избавляют от путаницы при загрузке на несколько витрин сразу.

Файл вёрстки стоит хранить не у дизайнера, а в общем месте вместе с фотографиями. Когда через полгода понадобится добавить язык, найти исходник оказывается сложнее, чем сделать заново — и слайды переделываются с нуля.

И держите текстовый слой отдельным: тогда обновление одной формулировки на пяти языках занимает минуты, а не требует пересборки всех макетов.

Шрифты и алфавиты

Не каждый шрифт содержит нужные символы. Перед стартом проверяется поддержка алфавитов, иначе часть букв заменится квадратами уже в экспорте.

Безопаснее выбрать один шрифт с широким набором символов и держать на нём всю линейку — так карточка выглядит единой на всех рынках.

И проверять экспорт глазами: подстановка недостающего символа другим шрифтом иногда происходит незаметно и портит только часть строки.

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

И один шрифт на все языки — не только про единство: разные гарнитуры имеют разную высоту строки, и слайды на разных рынках перестают выглядеть как один бренд.

И проверьте начертания: не у всех шрифтов полужирный и курсив содержат весь набор символов, даже если обычное начертание содержит. Это классическая причина, по которой ломается только заголовок.

Органайзеры для хранения на белом фоне
Игрушки на белом фоне

Что проверить перед загрузкой

Читается ли текст на экране телефона, нет ли смешения языков внутри галереи, не обрезаны ли строки, совпадают ли единицы измерения с местными.

Отдельно — правила площадки: цены, скидки и промо-формулировки запрещены во многих витринах независимо от языка.

Полезно хранить рядом с макетом текстовый файл со всеми строками на всех языках: тогда обновление формулировки не превращается в поиск по слоям.

К проверке добавьте сверку с местными требованиями к обозначениям. Размеры одежды, объёмы, вес и энергетическая ценность указываются по-разному, и слайд с чужими единицами читается как ошибка.

И проверяйте готовый слайд на телефоне при половинной яркости — это реальные условия, в которых его увидит покупатель, а не монитор дизайнера.

И сверьте, что во всех языковых версиях одинаковый порядок и количество слайдов. Пропущенный слайд на одном из рынков обнаруживается обычно через месяц, когда кто-то замечает, что карточка там выглядит короче.

Частые вопросы

Почему нельзя просто уменьшить шрифт?
Потому что карточку смотрят с телефона: мелкий текст не читается, и слайд перестаёт работать.
Как готовить слайды под несколько языков?
Верстать с запасом по месту, использовать короткие формулировки, иконки и цифры вместо длинных описаний.
Нужен ли отдельный дизайн под каждый рынок?
Обычно нет. Меняется текстовый слой, дизайн остаётся общим — это работает на узнаваемость.
Что делать с шрифтами?
Проверять поддержку алфавитов заранее и держать всю линейку на одном шрифте с широким набором символов.
Следующий шаг

Придержим слот за вами

Ближайшие свободные слоты — в расписании и в Telegram. Напишите объём и желаемые даты — пришлём точный расчёт и придержим день.
MPPHOTO · Москва · 8 (800) 5000-235 · @mpphotobot

Мы используем файлы cookie, Яндекс Метрику и чат поддержки Jivo, чтобы сайт работал корректно и мы понимали, какие страницы полезны. Нажмите «Только необходимые» — и аналитика с чатом на вашем устройстве отключатся. Подробнее — в политике использования cookie и политике обработки персональных данных.