Interfaces multi-langues et localisation

1) Principes

1. La langue n'est pas un skin. Les textes, les formats, la direction de l'écriture, les illustrations, les blocs juridiques et même la navigation changent.
2. D'abord les clés, puis les textes. Structurez les clés de sens et les paramètres - les traductions arrivent plus tard.
3. Pseudolocalisation - jusqu'à la sortie. Attrapez les débordements, les lignes « durement cousues » et les anglicismes cachés.
4. Les folbacks sont prévisibles. 'ru-UA → ru → en'. Pas d'échec « silencieux ».
5. La sécurité. Pas de HTML à partir de la traduction vers DOM sans assainissement ; les placcholders sont uniquement positionnels/nommés.
6. A11y-équivalence. Alt-textes, aria-labels, abréviations - tout est localisé.

2) Stratégie locale

Codes système : 'language-REGION' (par exemple 'pt-BR', 'en-GB').
Sélection locale : profil utilisateur → configuration ; de secours - auto-detect par navigateur/geo (avec confirmation).
Multi-région : distinguer la langue du droit : 'es-ES' ≠ 'es-MX' (lois/paiements/limites différentes).
Chaîne Folback : UI est la langue la plus proche ; textes juridiques - version strictement régionale, sinon bloc et demande de confirmation.

3) Architecture et contenu de l'information

Domaines clés : navigation, CTA, erreurs, formulaires, conseils, notifications, lettres, PDF/bannières.
Extensions de texte : réserve de largeur + 30-40 % (allemand/finnois). Layout est élastique (flex/grid).
Ton/style : dictionnaire de la marque (termes, sans « traduction d'argot » aux endroits critiques).
Images/icônes : éviter le texte en images ; Si vous en avez besoin, gardez les versions locales.

4) Architecture i18n

Les clés sont : 'domain. section. intent` → `payments. withdraw. error. insufficient_funds`.
Listes de lecture : nommées ('{amount}', '{minutes}'), formatées en dehors de la ligne.
ICU MessageFormat : pluralité, genre, alignement.
Fichiers : par local et par domaine ('/i18n/{ locale }/{ domain} .json '), les cuves sont chargées paresseusement.
Serveur/client : rendu universel, local dans le cookie + HTTP-Vary.

json
{
"betslip": {
"placed": "Ставка на сумму {amount} {currency} принята",
"timeout": "Ожидаем подтверждение… ~{seconds, plural, one {# сек} few {# сек} many {# сек} other {# сек}}"
}
}

5) Formatage : nombres, dates, devises, unités

js const nf = new Intl.NumberFormat('uk-UA', { style:'currency', currency:'UAH' });
nf.format(2000); // 2 000,00 ₴

const df = new Intl.DateTimeFormat('tr-TR', { dateStyle:'medium', timeStyle:'short' });
df.format(new Date());

const pl = new Intl.PluralRules('ru-RU');

Unités mineures : stocker les montants en cents/centimes ; formater sur le client.
Temps relatif : 'Intl. RelativeTimeFormat`.
Unités : 'Intl. NumberFormat({ style:'unit', unit:'meter' })`.
Calendrier/semaine : 1er jour de la semaine et format de la date - local.

6) RTL et la direction de l'écriture

Soutenir 'dir = « rtl » pour' ar ',' he ',' fa '; utilisez 'dir =' auto 'pour le contenu utilisateur.
Inverser les icônes/chevron 's ; miroirs carrousels et steppers.
Nombres/symboles de devises - fenêtre LTR (éviter le chaos mixte BiDi).
Propriétés logiques CSS ('inline-start/end') au lieu de left/right.

7) Formulaires et entrées

Noms/adresses : admettez les apostrophes/diacritiques/doubles noms de famille.
Téléphones : stockage E.164 ; Les masques sont doux, avec le support d'insertion.
Formats d'adresse : ordre des champs par pays ; l'indice/État peut ne pas être disponible.
Claviers : 'inputmode', 'autocomplete' corrects pour le local.
Playholders : exemples en langue/format local.

8) Pseudo-localisation et tests

Remplacez automatiquement les lignes par '【 Ĥěļļő 】' + extension '+ + +' (~ 35 %).
Incluez la pseudo-fibre dans l'assemblage dev sous la forme 'qps-ploc'.
Captures d'écran avec contexte pour les traducteurs : mise en surbrillance des lecteurs et des textes longs.
Testez : coupures, transferts, débordements, lignes « durement cousues », RTL.

9) Notifications, lettres, modèles

Modèle de lettre et thème - pour chaque local ; séparez les textes et la mise en page.
Dates/montants dans le sujet - sont formatés par local.
Les liens « Configurer les notifications » sont toujours dans la langue de la lettre.
SMS : bref, sans guillemets multi-lignes ; UTM - pas de localisation.

10) Sécurité et fiabilité

N'interprétez jamais la traduction comme HTML, utilisez des inserts sécurisés.
Les placcholders ne sont que des données, pas des marques.
Logs/métriques - sans secret, mais avec un local pour le traçage des problèmes.
Folback si le fichier de traduction n'est pas disponible - « silencieux » (montrez l'anglais + télémétrie).

11) Performance

Traductions par itinéraire/domaine ; pré-chargement pour les fréquents.
Кеш CDN с `ETag`/`Cache-Control`.
Évitez les revendeurs lorsque vous changez de local - contexte i18n avec mémoire.

12) Spécificités iGaming

Disclaymer et jeu responsable : les formulations dépendent du pays (18 +/21 +, régulateurs, lignes d'aide).
KYC/AML : termes juridiquement corrects (par exemple, « Source de fonds », « Bénéficiaire effectif »), options de chute/naissance.
Méthodes de paiement : noms locaux (PIX, Papara, SEPA) et conditions (ETA/commissions) - strictement par région.
Coefficients et format : 'decimal/fractional/american' - explications locales et exemple.
Textes juridiques : versions régionales inchangées ; interdiction du folback sur une autre juridiction.

13) Tokens de système de conception (exemple)

json
{
"i18n": {
"fallback": ["en"],
"rtl": ["ar", "he", "fa"],
"textExpansionPct": 0.35,
"screenshotHints": true
},
"typography": {
"lineHeight": { "ui": 1.4, "dense": 1.3 },
"hyphens": "auto",
"tabularNums": true
},
"layout": {
"minLabelWidth": 96,
"gap": { "sm": 8, "md": 12, "lg": 16 }
},
"a11y": {
"ariaMirroring": true,
"altTranslate": true,
"contrastAA": true
}
}

14) Snappets

ts import i18n from 'i18next';
import ICU from 'i18next-icu';
import { initReactI18next } from 'react-i18next';

i18n.use(ICU).use(initReactI18next).init({
lng: 'uk-UA',
fallbackLng: ['ru', 'en'],
load: 'languageOnly',
interpolation: { escapeValue: false },
resources: {} // пусто — грузим лениво
});

export async function loadNamespace(ns: string, lng = i18n.language){
const mod = await import(`/i18n/${lng}/${ns}.json`);
i18n.addResourceBundle(lng, ns, mod.default, true, true);
}

json
{
"notifications": "{count, plural, one {# уведомление} few {# уведомления} many {# уведомлений} other {# уведомления}}"
}

js const money = (v, c, l) => new Intl.NumberFormat(l, {style:'currency', currency:c}).format(v/100);
const rel = (v, unit, l) => new Intl.RelativeTimeFormat(l, {numeric:'auto'}).format(v, unit);
// money(250000,'EUR','de-DE') → 2.500,00 €

js const rtl = new Set(['ar','he','fa']);
document.documentElement.dir = rtl.has(locale.split('-')[0])? 'rtl': 'ltr';

js const pseudo = s => s.replace(/[aAeEiIoOuU]/g, m => ({a:'à',e:'ê',i:'ï',o:'ô',u:'û'}[m.toLowerCase()]        m)).replace(/([^\s])/g,'$1\u0301');

15) Vides/Erreurs/Graisfules de dégradation

Pas de traduction de clé : nous montrons l'anglais + logons 'missing _ key'.
Pas de fichier local : folback et bannière « Partie de l'interface en anglais ».
Texte trop long : multi-lignes, 'line-clamp' par endroit, tooltip avec texte complet.

16) Métriques et contrôle de qualité

Coverage % par clé/localisation (cible ≥ 98 %).
Time-to-Translate (TTT) pour les nouvelles versions.
Bug rate L10n : coupures visuelles, défauts RTL, formats erronés.
Reading ease (sondage subjectif) et NPS per locale.
Validation juridique par région (liste de compliments).

17) Anti-modèles

La concaténation des lignes dans le code (« Vous avez gagné » + amount + « ! ») brise la grammaire.
Texte en images/icônes sans versions locales.
Des largeurs rigides pour l'anglais.
Remplacement du droit du pays dans la langue (utiliser 'es-ES' pour le Mexique).
Traduction en HTML à partir de CMS sans sanitariz.
C'est la même clé avec des significations différentes à différents endroits.

18) Liste de vérification QA

Lignes et clés

• Placcholders nommés ; pas de concaténation.
• UCI-pluralisation/genre où il faut.
• La chaîne Folback fonctionne.

Layout et la disponibilité

• Marge de largeur + 30-40 %; 'line-clamp', transfert de mots.
• Les labels Alt/aria sont localisés.
• RTL miroir icônes/navigation ; les nombres sont lisibles.

Formats

• Dates/devises par « Intl. » ; montants des unités mineures.
• Adresse/téléphone/nom - règles flexibles par pays.

Sécurité/performance

• Les traductions n'exécutent pas le HTML ; XSS est exclu.
• Fainéants chants, kesh CDN, sans trop de relents.

iGaming-spécificité

• Lignes d'aide Diskleimer/18 +/- par juridiction.
• Les textes KYC/AML sont légalement rapprochés.
• Noms de paiement/ETA/commissions - locaux.

19) Documentation dans le système de conception

Разделы: i18n Tokens, Guides (ICU/Plural/RTL), Patterns (Emails/SMS/Toasts), Legal Strings per Region.
Outils : pseudo-fibre, capture d'écran, rapport coverage, linter de clé.
Processus : glossaire, mémoire de traduction, captures d'écran contextuelles, jalousie par un locuteur natif.

Résumé succinct

L'IU multilingue est un travail systémique au niveau de l'architecture, du design, du contenu et du droit. Organisez les clés et les folbacks, utilisez l'UCI et « Intl », soutenez RTL, lancez la pseudo-fibre à l'avance et assurez-vous que la formulation régionale est correcte. Le produit sera alors ressenti par la famille - des ratios et des paiements aux lettres et à l'aide - dans chaque pays et pour chaque utilisateur.