Что такое i18n? Практическое руководство по интернационализации

Подведите итог этому посту следующим образом: 9 мин чтения

ЧатGPT

Недоумение

Грок

Google ИИ

Интернационализация (i18n) — это работа, которую вы выполняете в коде, чтобы продукт можно было адаптировать к любому языку или региону без необходимости его реинжиниринга. W3C определяет это как “проектирование и разработку продукта, приложения или контента документа, который обеспечивает легкую локализацию для целевых аудиторий, различающихся по культуре, региону или языку” (W3C). На практике это означает повсеместное использование Unicode, отсутствие жестко запрограммированных строк, обращенных к пользователю, форматирование дат, чисел и множественного числа с учетом локали, а также макеты, которые выдерживают более длинный текст и скрипты справа налево.

Ключевые выводы

i18n — это инжиниринг; локализация (l10n) — это адаптация к одному рынку, которую делает возможной i18n. “18” и “10” подсчитывают буквы между первой и последней буквой каждого слова.
Пять привычек, которые предотвращают большинство ошибок i18n: сквозной UTF-8, внешние строки, обработка множественного числа и переменных в стиле ICU, API-интерфейсы форматирования локали платформы и гибкие макеты.
Никогда не стройте предложения путем объединения фрагментов. Порядок слов и правила множественного числа слишком сильно различаются в разных языках.
Проверьте с помощью псевдолокализации еще до того, как переводчик увидит строки.
Веб-сайт, который уже работает и не был создан для i18n, все равно можно сделать многоязычным на уровне рендеринга, без рефакторинга кодовой базы.

i18n, l10n и g11n: разница

Срок	Означает	Что это значит
i18n	интернационализация	Создание продукта, чтобы он может поддержка любого региона
л10н	локализация	Адаптируем его для один локаль: перевод, форматы, изображения, юридический текст
г11н	глобализация	Бизнес-процесс, который объединяет оба варианта для выхода на новые рынки

В W3C перечислено, что обычно включает в себя интернационализация: устранение барьеров для локализации (Unicode и кодировка символов), поддержка таких функций, как двунаправленный текст, поддержка локальных соглашений для дат, календарей, чисел и имен, а также “отделение локализуемых элементов от исходного кода”, чтобы правильная версия загружалась для каждого пользователя (W3C).

Вот простой тест того, выполнена ли работа i18n: для добавления нового языка потребуются переводчики и некоторая настройка. Если нужен разработчик, значит что-то упущено.

1. Используйте Unicode (UTF-8) от начала до конца

UTF-8 является стандартом для Интернета и используется 99,1% веб-сайтов, кодировка символов которых известна (W3Techs, 28 сентября 2026 г). В наши дни ошибки редко встречаются в HTML. Они происходят в слоях вокруг него:

Столбцы базы данных и соединения, для которых не установлен полный UTF-8. В MySQL, utf8 является 3-байтовым подмножеством; использовать utf8mb4 или смайлики и некоторые символы CJK будут потеряны.
Строковые функции, которые считают байты вместо символов, которые обрезают «Zürich» или «東京» посередине символа.
Экспорт CSV открыт в программе для работы с электронными таблицами с неправильной кодировкой.
Сортировка по порядку байтов вместо локальной сортировки, которая помещает “Äpfel” после “Zebra”.

Объявите кодировку один раз (<meta charset="utf-8">), установите его для каждого соединения и используйте сравнение с учетом локали, например Intl.Collator в JavaScript.

2. Экстернализуйте каждую строку, обращенную к пользователю

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

{
  "cart.title": "Your cart",
  "cart.empty": "Your cart is empty",
  "cart.checkout": "Go to checkout"
}

Каждая локаль получает свой собственный файл, и код запрашивает cart.title. Фреймворки следуют той же схеме: в Vue библиотека vue-i18n предоставляет $t для “перевода сообщений локали” и $i18n для глобального экземпляра, который управляет локалями и сообщениями (документы Vue-I18N). React (react-intl, i18next), Angular (@angular/localize), Django, Rails и Laravel поставляют эквиваленты.

Несколько правил, которые избавят вас от боли в будущем:

Дайте переводчикам контекст. “Открыть” может быть глаголом (открыть файл) или прилагательным (магазин открыт). Добавьте описание к каждому ключу.
Не используйте ключ повторно только потому, что английский текст совпадает. “Сохранить” на кнопке и “Сохранить 20%” на баннере — это разные сообщения на большинстве языков.
По возможности не допускайте использования разметки в строках или используйте для нее заполнители, чтобы переводчики не могли взломать ваш HTML.

3. Никогда не объединяйте предложения; используйте заполнители и правила множественного числа

Это выглядит безобидно:

'You have ' + count + ' new messages';

Он ломается двумя способами. Порядок слов меняется между языками, а правила множественного числа — нет “1 по сравнению со всем остальным”. Правила множественного числа Unicode CLDR дают английскому языку две кардинальные категории (одна, другая), японскому - одну, русскому и польскому - четыре (одна, несколько, много, другое) и арабскому - шесть (ноль, один, два, несколько, много, другое) (Юникод CLDR).

Используйте формат сообщения, который знает эти правила, например ICU MessageFormat:

{count, plural,
  =0 {You have no new messages}
  one {You have # new message}
  other {You have # new messages}}

Русский переводчик может затем добавить few и many формы без каких-либо изменений в вашем коде. То же самое относится к роду, порядковым номерам (“1-й, 2-й”) и спискам (“A, B и C”).

4. Пусть платформа форматирует даты, цифры и валюту

03/04/2026 4 марта в США и 3 апреля в большинстве стран Европы. 1,234.5 на английском языке написано 1.234,5 на немецком языке и 1 234,5 по-французски. Не пишите собственное форматирование. Каждая современная платформа имеет встроенные данные о местоположении, и в JavaScript это Intl API (МДН):

new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(1234.5);
// "1.234,50 €"

new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long' }).format(new Date('2026-09-27'));
// "27 septembre 2026"

Некоторые связанные с этим решения стоит принять заранее:

Сохраняйте время в формате UTC и преобразуйте его в часовой пояс пользователя для отображения.
Храните валюту отдельно от региона. Франкоговорящий посетитель Канады платит в канадских долларах, а не в евро. Форматирование числа в виде валюты — это i18n; определение цены — это бизнес-решение.
Не предполагайте, как формируются имена и адреса. У многих людей нет “имени” и “фамилии” в западном смысле, а почтовые индексы не всегда являются числовыми.

5. Разрабатывайте макеты, которые растягиваются и переворачиваются

Переведенный текст часто длиннее английского, и короткие строки растут больше всего. W3C суммирует ориентировочные цифры IBM: строки длиной до 10 символов могут увеличиваться на 200–300% в европейских языках, в то время как текст длиной более 70 символов увеличивается примерно до 130% (W3C, Размер текста в переводе). Их пример — итальянское превращение “views” в “visualizzazioni”.

Для работы с пользовательским интерфейсом это означает:

Нет кнопок фиксированной ширины или вкладок, подходящих для английских этикеток.
Текст не встроен в изображения. Его невозможно перевести, не перерисовав изображение.
Поддержка письменности справа налево (арабский, иврит, персидский, урду) с dir="rtl" на <html> элемент и логические свойства CSS (margin-inline-start вместо margin-left), поэтому макет отражает сам себя.
Выберите шрифты, охватывающие сценарии, которые вы планируете поддерживать, или определите резервные варианты.

6. Обрабатывайте обнаружение локали и URL-адреса намеренно

Решите, как выбирается локаль пользователя и как она запоминается:

Явный выбор (переключение языка) всегда выигрывает.
В противном случае используйте браузер Accept-Language заголовок как предложение, а не принудительное перенаправление.
Введите локаль в URL (/de/, de.example.com) для любой общедоступной страницы, поэтому поисковые системы могут совместно использовать, кэшировать и индексировать каждую языковую версию. Одни только файлы cookie делают переведенные страницы невидимыми для Google.

Если у продукта есть общедоступные страницы, URL-адреса этих языков также нуждаются в аннотациях hreflang; см руководство по хрефлангу.

7. Тест с псевдолокализацией

Например, псевдолокализация заменяет исходные строки измененной версией до того, как появится какой-либо реальный перевод [Ýöûŕ çåŕţ îš éɱþţý !!!!]. Акценты выявляют проблемы с кодировкой, отступы выявляют макеты, которые разрываются под длинным текстом, а скобки выявляют усечение и любую жестко закодированную строку, которая не изменилась. Многие библиотеки i18n и инструменты сборки могут генерировать псевдолокаль; запускайте набор тестов пользовательского интерфейса на ней в каждом выпуске.

Добавьте их и в свой контрольный список:

Переключитесь на локаль RTL и проверьте навигацию, значки с направлением (стрелки, индикаторы выполнения) и выравнивание форм.
Тестовая сортировка и поиск с использованием символов с ударениями.
Проверяйте электронные письма, PDF-файлы, сообщения об ошибках и push-уведомления, о которых часто забывают.

Контрольный список i18n для новых проектов

УТФ-8 (utf8mb4 в MySQL) в файлах, базах данных, соединениях и API
Все строки, обращенные к пользователю, в файлах ресурсов с контекстом для переводчиков
Формат сообщения ICU (или эквивалент) для множественного числа, пола и переменных
Intl или API локали платформы для дат, чисел, валюты, списков и сортировки
Хранение UTC и отображение часового пояса для каждого пользователя
Гибкие макеты, логические свойства CSS, dir поддержка атрибутов
Локаль в URL для публичных страниц, hreflang для поисковых систем
Псевдолокализация в КИ

Когда сайт уже существует

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

В этом случае перевод может происходить на уровне рендеринга. ConveyThis считывает текст, который уже выводит ваш сайт, переводит его на любой из 210 языков и обслуживает каждый язык по его собственному URL (подпапка или поддомен в бизнес-плане и выше, или ?lang параметр) с автоматическим добавлением hreflang. Языки справа налево переключают направление текста, изображения можно заменять на каждом языке, и глоссарий и память переводов сохраняйте единообразие названий и терминов продуктов. Он устанавливается как Плагин WordPress, приложение Shopify или один скрипт в любом другом стеке, поэтому работа i18n в вашей кодовой базе может продолжаться по собственному графику. Чтобы узнать о деловой стороне адаптации контента к каждому рынку, прочтите наше руководство что включает в себя локализация контента.

Часто задаваемые вопросы

Почему интернационализация обозначается аббревиатурой i18n? Между первой “i” и последней “n” в слове “интернационализация” находится 18 букв. Локализация (l10n) следует той же схеме.

I18n — это то же самое, что перевод? № Перевод — это часть локализации. i18n — это инженерия, которая позволяет осуществлять перевод и любую другую локальную адаптацию без изменения кода.

Когда следует начинать проект i18n? В начале. Экстернализация строк и использование локальных API обходятся недорого в первый день и дорого при модернизации в зрелую кодовую базу.

Что такое $i18n в Вью? В vue-i18n, $i18n это глобальный экземпляр, который управляет локалями и сообщениями, и $t это функция, которая возвращает переведенное сообщение для ключа (vue-i18n).

Следующий шаг

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