Interfaces multilingües y localización

1) Principios

1. La lengua no es piel. Los textos, formatos, dirección de escritura, ilustraciones, bloques legales e incluso la navegación cambian.
2. Primero las llaves, luego los textos. Estructurar las claves y parámetros semánticos - las traducciones vienen más tarde.
3. Pseudolocalización - hasta la salida. Coge desbordamientos, líneas «duramente cosidas» y anglicismos ocultos.
4. Los folbacks son predecibles. 'ru-UA → es → en'. No hay fallos «silenciosos».
5. Seguridad. No hay HTML de traducción a DOM sin saneamiento; playsholder sólo posicional/con nombre.
6. A11y-equivalencia. Letras alt, etiquetas aria, abreviaturas... todo se localiza.

2) Estrategia local

Códigos del sistema: 'language-REGION' (por ejemplo, 'pt-BR', 'en-GB').
Selección local: perfil de usuario → configuración; de repuesto - auto-detect por navegador/geo (con confirmación).
Multi-región: distingue el idioma del derecho: 'es-ES' ≠ 'es-MX' (diferentes leyes/pagos/límites).
Cadena Folback: IU es el idioma más cercano; los textos legales son una versión estrictamente regional, de lo contrario el bloque y la solicitud de confirmación.

3) Arquitectura y contenido de la información

Áreas clave: navegación, CTA, errores, formularios, sugerencias, notificaciones, correos electrónicos, PDF/banners.
Extensiones de texto: reserva de ancho de + 30-40% (alemán/finlandés). Leyout es elástico (flex/grid).
Tono/estilo: diccionario de marca (términos, sin «traducción de argot» en lugares críticos).
Imágenes/iconos: evite el texto en las imágenes; si lo necesita, almacene las versiones locales.

4) Arquitectura i18n

Claves: 'domain. section. intent` → `payments. withdraw. error. insufficient_funds`.
Playsholder: con nombre ('{amount}', '{minutes}'), tiene formato fuera de línea.
ICU MessageFormat: multiplicidad, género, concordancia.
Archivos: por local y dominios ('/i18n/{ locale }/{ domain} .json '), las chancas se cargan perezosamente.
Servidor/cliente: render universal, local en cookie + HTTP-Vary.

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

5) Formato: números, fechas, monedas, unidades

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');

Unidades menores: almacena los importes en centavos/centavos; formatee en el cliente.
Tiempo relativo: 'Intl. RelativeTimeFormat`.
Unidades: 'Intl. NumberFormat({ style:'unit', unit:'meter' })`.
Calendario/semana: 1er día de la semana y formato de fecha - local.

6) RTL y envío de la carta

Apoye 'dir =' rtl' para 'ar', 'he', 'fa'; utilice 'dir =' auto 'para el contenido del usuario.
Invierta iconos/chevron's; espejalte carrusel y steppers.
Los números/símbolos de las monedas son ventanas LTR (evite el caos BiDi mixto).
Propiedades lógicas CSS ('inline-start/end') en lugar de left/right.

7) Formularios y entrada

Nombres/direcciones: permita apóstrofos/diacríticos/apellidos dobles.
Teléfonos: almacenamiento E.164; máscaras - suaves, con soporte de inserción.
Formatos de dirección: orden de campo por país; índice/estado puede estar ausente.
Teclados: 'inputmode', 'autocomplete' correctos para el local.
Playsholder: ejemplos en lenguaje/formato local.

8) Pseudolocalización y pruebas

Reemplace automáticamente las líneas por '【 MKH, 】' + + + + '(~ 35%).
Incluya la pseudolocal en el ensamble dev como 'qps-ploc'.
Capturas de pantalla con contexto para traductores: retroiluminación de playsholders y textos largos.
Pruebe: recortes, transferencias, desbordamientos, líneas «cosidas rígidamente», RTL.

9) Notificaciones, correos electrónicos, plantillas

Plantilla de correo electrónico y temas: para cada lugar; separe los textos y la hoja de trabajo.
Fechas/sumas en el tema - formateado localmente.
Enlaces «Configurar notificaciones» - siempre en el idioma del correo electrónico.
SMS: breve, sin comillas de varias líneas; UTM - sin localización.

10) Seguridad y confiabilidad

Nunca interprete la traducción como HTML, use inserciones seguras.
Los jugadores son sólo datos, no marcas.
Los logs/métricas son sin secreto, pero con un local para los problemas de treasing.
Folback si el archivo de traducción no está disponible - «silencioso» (mostrar inglés + telemetría).

11) Rendimiento

Traducciones a través de rutas/dominios; precarga para frecuentes.
Кеш CDN с `ETag`/`Cache-Control`.
Evite los rerenders cuando cambie de lugar - contexto i18n con memoización.

12) Especificidad de iGaming

Discleimers y juego responsable: las formulaciones dependen del país (18 +/21 +, órganos reguladores, líneas de ayuda).
KYC/AML: términos legalmente correctos (por ejemplo, «Fuente de fondos», «Propietario beneficiario»), variantes de casos/nacimientos.
Métodos de pago: nombres locales (PIX, Papara, SEPA) y condiciones (AETA/comisiones) - estrictamente por región.
Coeficientes y formato: 'decimal/fractional/american' son explicaciones y ejemplos locales.
Textos jurídicos: versiones regionales sin cambios; Prohibición del folback a otra jurisdicción.

13) Tokens del sistema de diseño (ejemplo)

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) Snippets

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) Vacío/errores/degradación de graysful

No hay traducción de clave: mostramos inglés + lógica 'missing _ key'.
Sin archivo local: folback y banner «Parte de la interfaz en inglés».
Texto demasiado largo: multidireccional, 'line-clamp' en su lugar, tooltip con texto completo.

16) Métricas y control de calidad

Coverage% por clave/ubicación (destino ≥ 98%).
Time-to-Translate (TTT) para nuevos lanzamientos.
Bug rate L10n: recortes visuales, defectos RTL, formatos erróneos.
Reading ease (encuesta subjetiva) y NPS per locale.
Validación legal por región (checklist de cumplimiento).

17) Antipatternas

Concatenación de líneas en el código («Has ganado» + amount + «!») - rompe la gramática.
Texto en imágenes/iconos sin versiones locales.
Anchos rígidos bajo inglés.
Sustitución del derecho de país por el idioma (utilizar 'es-ES' para México).
Traducción vía HTML desde CMS sin saneamiento.
La misma clave con diferentes significados en diferentes lugares.

18) Lista de comprobación de QA

Cadenas y claves

• Playsholder con nombre; no hay concatenación.
• La pluralización de la UCI/género donde se necesita.
• La cadena Folback funciona.

Layout y accesibilidad

• Reserva de ancho + 30-40%; 'line-clamp', transferencia de palabras.
• Las etiquetas alt/aria están localizadas.
• RTL espejo iconos/navegación; los números son legibles.

Formatos

• Fechas/monedas a través de 'Intl.'; sumas de unidades menores.
• Dirección/teléfono/nombre - reglas flexibles para el país.

Seguridad/rendimiento

• Las traducciones no ejecutan HTML; XSS excluido.
• Chanquis perezosos, caché CDN, sin demasiados rerenders.

iGaming-especificidad

• Diskleimers/18 +/líneas de ayuda - por jurisdicción.
• Los textos de KYC/AML están legalmente conciliados.
• Los nombres de pago/AETA/comisiones son locales.

19) Documentación en el sistema de diseño

Разделы: i18n Tokens, Guides (ICU/Plural/RTL), Patterns (Emails/SMS/Toasts), Legal Strings per Region.
Herramientas: pseudolocal, captura de pantalla de pantalla, informe de coverage, linter de claves.
Proceso: glosario, memoria de traducción, capturas de pantalla contextuales, rugido por el hablante nativo.

Resumen breve

La IU multilingüe es un trabajo de sistema a nivel de arquitectura, diseño, contenido y derecho. Organice las llaves y los folbacks, use la UCI e 'Intl', apoye la RTL, ejecute el pseudolocal con antelación y asegure la corrección legal del lenguaje regional. Luego, el producto se sentirá nativo -desde los coeficientes y pagos hasta los correos electrónicos y la referencia- en cada país y para cada usuario.