Что происходит с вёрсткой письма при автопереводе почтовым клиентом
Если получатель открывает письмо на языке, отличном от языка интерфейса, Gmail и Apple Mail предлагают перевести его. После нажатия на «Перевести» письмо перерисовывается заново, и вёрстка часто разъезжается. В статистике это никак не отражается, поэтому проблема остаётся незамеченной.
Ситуация актуальна для всех, кто отправляет письма на английском русскоязычной базе и наоборот.
Что переводчик делает с письмом
Автоперевод работает с отрисованной страницей, а не с исходным HTML. Он находит текстовые узлы, заменяет их содержимое и сохраняет структуру. Отсюда возникают все проблемы.
Текст меняет длину. Русский текст в переводе на английский сокращается примерно на 10–15%, на немецкий удлиняется на 20–30%. Всё, что было подогнано по ширине пиксель в пиксель, ломается.
Кнопки перестают вмещать надпись. Кнопка фиксированной ширины с текстом «Купить» после перевода на немецкий получает надпись, которая не помещается. Текст либо выходит за границы, либо переносится на две строки и ломает высоту блока.
Заголовки переносятся иначе. Заголовок в две строки становится трёхстрочным, и первый экран письма смещается вниз.
Текст на картинках остаётся непереведённым. Если призыв к действию нарисован на баннере, он сохранит исходный язык. Получится письмо, где половина содержимого на русском, половина на английском.
| Элемент | Что происходит при переводе |
| Обычный текст | Переводится, меняет длину |
| Текст на кнопке, сделанной кодом | Переводится, может не поместиться |
| Текст на изображении | Не переводится |
| Alt-текст | Переводится |
| Прехедер | Переводится |
| Тема письма | Переводится отдельно, в списке писем |
Письмо Claude Code до и после автоперевода в Gmail. После перевода заголовок «Your Claude Code journey starts now» стал двухстрочным, блок с инструкцией вырос по высоте. Текст на иллюстрации перевода не затронул — код claude и /init остались без изменений, что хорошо видно в переведённой версии. Пример письма: Claude, Anthropic.
Как верстать, чтобы перевод не ломал письмо
Отказ от фиксированной ширины кнопок. Кнопка должна растягиваться под текст, то есть получать ширину по содержимому плюс внутренние отступы. Тогда более длинная надпись расширит её, а не выйдет за границы.
Запас по высоте блоков. Блок, рассчитанный ровно на две строки заголовка, при переводе сломается. Задавайте минимальную высоту вместо фиксированной.
Отказ от текста на картинках. Правило полезно и без учёта перевода, оно же помогает при отключённых изображениях. Текст поверх фонового изображения делается кодом.
Проверка на самых длинных языках. Немецкий и французский дают наибольший прирост длины. Письмо, которое переживает перевод на немецкий, переживёт любой другой.
Отдельно про Apple Mail
Apple Mail переводит письмо целиком, включая служебные надписи в футере. Иногда это приводит к искажениям. Юридическая формулировка про согласие на обработку данных переводится дословно и теряет смысл.
Если письмо содержит юридически значимый текст, его стоит продублировать изображением или вынести на страницу сайта ссылкой. Тогда автоперевод его не затронет.
Что проверить
- Кнопки растягиваются под длину текста
- У блоков с заголовками задана минимальная, а не фиксированная высота
- В письме нет текста, встроенного в изображения
- Письмо проверено с автопереводом на немецкий как на самом длинном языке
- Юридические формулировки не искажаются при переводе
Читайте также