Tengo una aplicación web pequeña (una sola página con 4-5 vistas que luego paso a Android/iPhone con Cordova) que tiene texto en varios idiomas. En el pasado había controlado la internacionalización con CSS, pero cuando el número de frases creció (hasta unas 60), me pasé a una manera muy básica con JavaScript puro, sin plugins de ningún tipo.
El método es sencillo: tengo las diferentes cadenas en JSON, y la clave para cada cadena coincide con la un data-atributo del elemento que cambiará (marcado con una clase específica), entonces selecciono esos elementos y cambio su contenido. Algo como esto (simplificado):
// JSON con las cadenas traducidas a los diferentes idiomas
frases = {
"en": {
"idioma": "Change language:",
"lan-en": "English",
"lan-es": "Spanish"
},
"es": {
"idioma": "Cambiar idioma:",
"lan-en": "Inglés",
"lan-es": "Español"
}
}
// función que cambia todos los elementos al nuevo idioma
function cambiarIdioma(lang) {
var elems = document.querySelectorAll(".intfrase");
for (var x = 0; x < elems.length; x++)
elems[x].innerHTML = frases[lang][ elems[x].dataset.id ];
}
// cargar el idioma por defecto
cambiarIdioma("es");
<div>
<span data-id="idioma" class="intfrase"></span>
<button onclick="cambiarIdioma('es')" data-id="lan-es" class="intfrase"></button>
<button onclick="cambiarIdioma('en')" data-id="lan-en" class="intfrase"></button>
</div>
Ahora estoy ampliando y reescribiendo parte de la aplicación para mejorarla, y uno de los puntos que creo podrían ser mejorados es cómo se realiza la internacionalización, especialmente teniendo en cuenta que el número de frases se va a duplicar.
¿Cómo se puede mejorar lo que ya tengo? ¿Qué otros métodos hay para conseguir la internacionalización de una aplicación web? ¿Qué ventajas tienen?