Автоопределение языка пользователя

Библиотека Intro.js поддерживает локализацию интерфейса, позволяя адаптировать подсказки, кнопки и сообщения под язык пользователя. Автоопределение языка повышает удобство взаимодействия, особенно для веб-приложений с международной аудиторией.

Определение текущего языка

Intro.js использует объект конфигурации introJs().setOptions({...}) для задания локализованных текстов кнопок и подсказок. Чтобы автоматически определить язык пользователя, применяется стандартный API браузера:

const userLang = navigator.language || navigator.userLanguage;
  • navigator.language возвращает строку вида "en-US", "ru-RU", "fr-FR".
  • Если значение недоступно, navigator.userLanguage служит запасным вариантом (например, для старых версий Internet Explorer).

Сопоставление языка с локализацией Intro.js

Intro.js поставляется с предустановленными локализациями (i18n). Для корректной работы необходимо сопоставить язык браузера с поддерживаемой локалью Intro.js:

const availableLanguages = ["en", "ru", "fr", "de", "es"];
let langCode = userLang.split('-')[0]; // Извлекаем "en" из "en-US"

if (!availableLanguages.includes(langCode)) {
    langCode = "en"; // Язык по умолчанию
}
  • Разделение по дефису позволяет отделить код языка от регионального кода.
  • Проверка на доступность в массиве поддерживаемых языков предотвращает ошибки при загрузке неподдерживаемой локали.

Настройка локализованных кнопок

После определения языка можно задать текст кнопок через метод setOptions. Пример для нескольких языков:

const i18nTexts = {
    en: { nextLabel: "Next", prevLabel: "Back", skipLabel: "Skip", doneLabel: "Done" },
    ru: { nextLabel: "Далее", prevLabel: "Назад", skipLabel: "Пропустить", doneLabel: "Готово" },
    fr: { nextLabel: "Suivant", prevLabel: "Précédent", skipLabel: "Passer", doneLabel: "Terminé" }
};

introJs().setOptions({
    nextLabel: i18nTexts[langCode].nextLabel,
    prevLabel: i18nTexts[langCode].prevLabel,
    skipLabel: i18nTexts[langCode].skipLabel,
    doneLabel: i18nTexts[langCode].doneLabel
}).start();
  • Объект i18nTexts может быть расширен до любых языков и любых элементов интерфейса.
  • setOptions применяется перед вызовом .start(), чтобы все элементы подсказок корректно отображались на нужном языке.

Автоматизация через функцию

Для повторного использования логики автоопределения удобно создать отдельную функцию:

function getIntroJsLocalization() {
    const userLang = navigator.language || navigator.userLanguage;
    const langCode = (userLang.split('-')[0] || 'en');
    
    const i18nTexts = {
        en: { nextLabel: "Next", prevLabel: "Back", skipLabel: "Skip", doneLabel: "Done" },
        ru: { nextLabel: "Далее", prevLabel: "Назад", skipLabel: "Пропустить", doneLabel: "Готово" },
        fr: { nextLabel: "Suivant", prevLabel: "Précédent", skipLabel: "Passer", doneLabel: "Terminé" }
    };
    
    return i18nTexts[langCode] || i18nTexts.en;
}

const localization = getIntroJsLocalization();

introJs().setOptions(localization).start();
  • Функция возвращает объект с текстами для текущего языка.
  • Поддерживается расширяемость: можно добавлять новые языки без изменения основной логики.

Использование с динамическими подсказками

Intro.js позволяет задавать не только кнопки, но и текст подсказок для шагов (intro). При автоопределении языка можно динамически подставлять локализованные тексты:

const steps = {
    en: [
        { element: '#step1', intro: 'Welcome to the tutorial!' },
        { element: '#step2', intro: 'Click here to proceed.' }
    ],
    ru: [
        { element: '#step1', intro: 'Добро пожаловать в учебник!' },
        { element: '#step2', intro: 'Нажмите здесь, чтобы продолжить.' }
    ]
};

introJs().setOptions({
    steps: steps[langCode] || steps.en,
    ...getIntroJsLocalization()
}).start();
  • Такой подход позволяет полностью локализовать интерфейс: кнопки и тексты шагов.
  • Легко масштабируется на множество языков без дублирования кода.

Резервная локализация и fallback

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

const fallbackLang = 'en';
const selectedLang = availableLanguages.includes(langCode) ? langCode : fallbackLang;
  • Это предотвращает отображение пустых кнопок или ошибок при загрузке шагов.
  • Позволяет задавать единый стандартный язык для всех новых пользователей.

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

  • Для многоязычных сайтов рекомендуется хранить тексты локализации в отдельном JSON-файле и загружать его динамически.
  • Поддержка региональных вариаций (ru-RU, en-GB) обеспечивается через разбор строки navigator.language и сопоставление с основным кодом языка.
  • Можно объединять автоопределение языка с серверной локализацией: сервер передает выбранный язык, если он отличается от языка браузера.

Автоопределение языка в Intro.js обеспечивает максимально удобный и персонализированный пользовательский опыт, делая подсказки интуитивно понятными для любой аудитории.

Оглавление