or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-translation.mdindex.mdinitialization.mdjquery-integration.mdlanguage-management.mdresource-management.md
tile.json

language-management.mddocs/

Language Management

Language detection, switching, and text direction handling for i18next-client.

Capabilities

Language Switching

Change the current language with optional reinitialization.

/**
 * Set current language and optionally reinitialize
 * @param lng - Language code to set
 * @param options - Reinitialization options
 * @param callback - Function called when language change completes
 */
function setLng(lng, options, callback): void;

/**
 * Get current language code
 * @returns Current language code
 */
function lng(): string;

Usage Examples:

// Simple language change
i18n.setLng('es', function(t) {
  console.log('Language changed to Spanish');
  console.log(t('welcome')); // Now returns Spanish translation
});

// Language change with options
i18n.setLng('fr', {
  resGetPath: 'locales/__lng__/__ns__.json',
  useLocalStorage: true
}, function(t) {
  console.log('Language changed to French with custom options');
});

// Get current language
const currentLang = i18n.lng();
console.log('Current language:', currentLang); // e.g., "en-US"

// Check language before changing
if (i18n.lng() !== 'es') {
  i18n.setLng('es', function() {
    console.log('Switched to Spanish');
  });
}

Language Detection

Automatic language detection from various sources.

/**
 * Detect language from browser, URL, cookies, and localStorage
 * @returns Detected language code or fallback
 */
function detectLanguage(): string;

Usage Examples:

// Detect and use browser language
const detectedLang = i18n.detectLanguage();
console.log('Detected language:', detectedLang);

// Use detected language during initialization
i18n.init({
  lng: i18n.detectLanguage(), // Use detected language
  fallbackLng: 'en',
  resGetPath: 'locales/__lng__/__ns__.json'
}, function(t) {
  console.log('Initialized with detected language');
});

// Manual detection with fallback
const userLang = i18n.detectLanguage() || 'en';
i18n.setLng(userLang);

Text Direction

Get text direction for right-to-left (RTL) language support.

/**
 * Get text direction for current language
 * @returns 'ltr' for left-to-right or 'rtl' for right-to-left
 */
function dir(): string;

Usage Examples:

// Get text direction for current language
const direction = i18n.dir();
console.log('Text direction:', direction); // 'ltr' or 'rtl'

// Apply direction to document
document.dir = i18n.dir();
document.documentElement.setAttribute('dir', i18n.dir());

// CSS class based on direction
document.body.className = 'dir-' + i18n.dir();

// Conditional styling
if (i18n.dir() === 'rtl') {
  document.body.classList.add('rtl');
} else {
  document.body.classList.add('ltr');
}

// React/framework integration
const isRTL = i18n.dir() === 'rtl';

No Conflict Mode

Restore previous global i18n reference to avoid conflicts.

/**
 * Restore previous window.i18n reference and return i18next
 * @returns i18next instance
 */
function noConflict(): object;

Usage Examples:

// Store reference before potential conflict
const myI18n = i18n.noConflict();

// Use your instance
myI18n.init({
  lng: 'en',
  // ... options
}, function(t) {
  console.log(myI18n.t('welcome'));
});

// If there was a previous window.i18n, it's now restored

Language Detection Sources

The

detectLanguage()
function checks multiple sources in order:

1. Query String Parameter

// URL: https://example.com/?setLng=es
i18n.init({
  detectLngQS: 'setLng' // Parameter name (default)
});

2. Cookie

i18n.init({
  useCookie: true,
  cookieName: 'i18next', // Cookie name (default)
  cookieExpirationTime: 365 * 24 * 60 * 60 * 1000 // 1 year
});

3. Local Storage

i18n.init({
  detectLngFromLocalStorage: true
});
// Stores in localStorage key 'i18next_lng'

4. Navigator Languages

// Automatically detects from:
// - navigator.languages (Chrome)
// - navigator.userLanguage (IE)
// - navigator.language (standard)

5. Fallback Language

i18n.init({
  fallbackLng: 'en' // Used if no language detected
});

RTL Language Support

Comprehensive right-to-left language support with automatic detection:

// RTL languages automatically detected:
const rtlLanguages = [
  'ar', 'he', 'fa', 'ur', 'yi', 'ji', 'iw', 'ps', 'dv'
  // ... and many more Arabic, Hebrew, Persian variants
];

// Usage examples
i18n.setLng('ar', function() {
  console.log(i18n.dir()); // 'rtl'
  document.documentElement.dir = i18n.dir();
});

i18n.setLng('en', function() {
  console.log(i18n.dir()); // 'ltr'
  document.documentElement.dir = i18n.dir();
});

// CSS integration
.content {
  text-align: left;
}

[dir="rtl"] .content {
  text-align: right;
}

Language Persistence

Automatic language persistence across sessions:

i18n.init({
  // Cookie persistence
  useCookie: true,
  cookieName: 'i18next',
  cookieExpirationTime: 365 * 24 * 60 * 60 * 1000, // 1 year
  cookieDomain: '.example.com', // Optional domain
  
  // localStorage persistence  
  detectLngFromLocalStorage: true,
  
  // Detection priority: QS > Cookie > localStorage > Navigator > Fallback
  detectLngQS: 'lang',
  fallbackLng: 'en'
}, function(t) {
  console.log('Language persisted and restored');
});

// Manual persistence
i18n.setLng('es', function() {
  // Language is automatically saved to cookie/localStorage
  // Will be restored on next page load
});

Multi-Language Applications

Language Switcher Component

function createLanguageSwitcher(languages) {
  const currentLang = i18n.lng();
  
  languages.forEach(lang => {
    const button = document.createElement('button');
    button.textContent = lang.name;
    button.className = lang.code === currentLang ? 'active' : '';
    
    button.addEventListener('click', () => {
      i18n.setLng(lang.code, function(t) {
        // Update UI
        document.querySelector('[data-i18n="welcome"]').textContent = t('welcome');
        
        // Update direction
        document.documentElement.dir = i18n.dir();
        
        // Update active state
        document.querySelectorAll('.lang-button').forEach(btn => {
          btn.classList.remove('active');
        });
        button.classList.add('active');
      });
    });
    
    document.querySelector('.language-switcher').appendChild(button);
  });
}

// Usage
createLanguageSwitcher([
  { code: 'en', name: 'English' },
  { code: 'es', name: 'Español' },
  { code: 'ar', name: 'العربية' },
  { code: 'he', name: 'עברית' }
]);

Progressive Language Loading

function loadLanguageOnDemand(langCode) {
  return new Promise((resolve, reject) => {
    if (i18n.hasResourceBundle(langCode)) {
      // Already loaded
      resolve();
      return;
    }
    
    // Load language resources
    i18n.loadNamespaces(['translation', 'common'], () => {
      i18n.setLng(langCode, (err, t) => {
        if (err) {
          reject(err);
        } else {
          resolve(t);
        }
      });
    });
  });
}

// Usage
loadLanguageOnDemand('fr').then(() => {
  console.log('French loaded and activated');
}).catch(err => {
  console.error('Failed to load French:', err);
});