Menú Cerrar

Detectar el idioma del navegador

Una de esas cosas recurrentes que tiene la programación web es la de querer mostrar el contenido traducido o preparado según el idioma del usuario. El problema viene después, cuando decides si lo haces con PHP o con Javascript, lo desarrollas y justo en ese momento, cuando está todo acabado y lo publicas, es cuando te preguntas si no le hubiera gustado más al usuario elegir el idioma haciendo click en un enlace con una banderita (mucho más bonito para el SEO, donde va a parar…).

Siempre he preferido el libre albedrío pero también surgen necesidades concretas en las que no todo se basa en hacer una redirección. Con PHP podríamos ver que trae la variable $_SERVER[‘HTTP_ACCEPT_LANGUAGE’] o con la IP por ejemplo, pero esto lo dejo para otro post futuro sin fecha. En el navegador tenemos el API de Geolocalización con sus coordenadas, caer en la tentación de usar algún otro API o base de datos hasta tener una localización exacta y dar por detectado el idioma asociado al lugar. Pero esto es muy engañoso y hay otra forma más sencilla. El problema que tiene asociar la localización es el hecho de que queremos el idioma y aunque haya quien lo de por sentado lugar != idioma. El hecho de estar en un sitio no quiere decir que hables el idioma local y oficial, puedes ser un extranjero utilizando tu tableta, móvil, portátil o cualquier otro dispositivo, etc.

La forma de detectar el idioma es leer el valor de las propiedad window.navigator.language o también puede servir por motivos sentimentales en versiones de Internet Explorer anteriores a la versión 10 navigator.browserLanguage. Hay muchas forma de hacerlo, se pueden poner condiciones según que navegador y etc. La forma más sencilla, rápida y limpia de leer el idioma es:

var idiomaEnBruto = window.navigator.language||navigator.browserLanguage;

Cada navegador tiene un formato para la cadena devuelta: es, es-ES, es-es, etc. Para poder tratar el idioma correctamente lo mejor es extraer los dos primeros caracteres:

var idioma = idiomaEnBruto.slice(0,2);

Teniendo el idioma en esta nueva minicadena ya sólo queda utilizarla:

1

En el código del ejemplo he utilizado switch para modificar contenido según el idioma. Al final del código Javascript he dejado comentado un ejemplo de como sería hacer una redirección con location.href, para la que no haría falta un switch.

Recomiendo mirar el listado de códigos de la ISO 639-1 en la Wikipedia.