El inglés es el idioma más hablado del mundo, la lingua franca que todos usamos para viajar y hacer negocios en todo el mundo. Es como el Arameo en tiempos de Jesucristo, vamos. No hablarlo o entenderlo al menos al leerlo es una gran barrera para multitud de puestos de trabajo y en especial para los programadores y demás técnicos, ya que la mayor parte de los documentos están en este idioma, siendo predominantes las empresas estadounidenses en el mundo del software y el hardware, y adoptando este idioma todas las empresas que se quieren internacionalizar.
Por suerte, aunque no lo entiendas, la propia Internet te ofrece la solución en forma de traductores on-line, el más utilizado de los cuales es Google Translator.
Permiten traducir entre varias decenas de idiomas permitiéndonos, por ejemplo, leer una página en Chino traduciéndola por completo al español o al inglés en unos instantes. Las traducciones aún dejan bastante que desear en muchos casos (ver figuras varias en este artículo como ejemplo), pero está mejorando cada día y al menos sirve para enterarnos de qué va la cosa.
Google Chrome lleva integrada de serie la traducción de esta herramienta, de modo que en cuanto detecta una página que no está en alguno de los idiomas que hemos declarado como propios en el navegador, te ofrece automáticamente si quieres traducirla:
De este modo lo tenemos tan fácil como pulsar un botón.
Otras herramientas y extensiones para otros navegadores ofrecen una funcionalidad parecida.
Aunque esto es estupendo en la mayoría de los casos, puede ofrecer varios problemas, tanto desde el punto de vista de los usuarios como de los desarrolladores de páginas y aplicaciones web.
Vamos a aprender cómo podemos controlar el posible proceso de traducción de una página desde nuestro código. Pero antes...
Problemas como usuario
El primer problema viene como usuario y es que, por defecto, Chrome suele tener configurado solamente el idioma local del usuario como idioma propio. Es decir, la mayor parte de las veces el único idioma que reconoce como propio es el español. Si hablas otros idiomas (especialmente inglés) es un fastidio que te ofrezca traducir las páginas en este idioma cada vez que entras, sobre todo antes que sacaba una barra bastante intrusiva para preguntártelo, que te comía parte del espacio disponible para leer la página. Ahora al menos saca un diálogo mucho más discreto como el que se ve en la figura anterior.
Para solucionarlo como usuario es muy sencillo: vete al menú de Chrome y en Ajustes despliega los Ajustes avanzados. En la zona de idiomas pulsa el botón de ajustes de lenguaje y entrada de datos, y añade todos los lenguajes que hables:
De este modo, aunque tengas marcada la casilla de traducir páginas (ver check en la figura anterior, que está marcado por defecto), no te ofrecerá la traducción de ninguno de los idiomas que tengas en esa lista salvo que lo marques explícitamente.
Problemas como programador
De todos modos los problemas más graves pueden venir para los programadores, porque no tenemos forma alguna de controlar qué idiomas tiene el usuario en su navegador ni si se le ofrece la traducción o no.
En ocasiones no querremos que se traduzcan las páginas por diversos motivos:
- Si son aplicaciones y no páginas de contenido, porque nos puede descuadrar por completo la interfaz, que además si es dinámica puede variar de un momento a otro y tener partes generadas por script que el traductor no captará. Puede quedar un verdadero "churro".
- Páginas de contenido en las que no nos interesa ofrecer una traducción por el motivo que sea, bien de la página completa o bien de algunas partes en concreto (por ejemplo listados con nombres que deben ir siempre en el idioma original y no ser traducidos).
- Sabemos que la traducción va a ser mala y llevar a equívocos y preferimos que no se haga nunca.
¿Cómo podemos controlar el proceso de traducción de un modo sencillo y predecible?
Controlando el idioma de nuestras páginas
En el caso de páginas / aplicaciones completas debemos asegurarnos primeramente de que estamos indicando el idioma de manera correcta.
Para ello tenemos básicamente dos mecanismos:
- El atributo lang
- La meta-cabecera de idioma del contenido
Es habitual ver páginas con código como este por ahí:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Language" content="es-ES" />
<title>Mi página</title>
</head>
<body>
....
</body>
</html>
Fíjate en que hay dos elementos (destacados en rojo) para marcar el idioma de la página.
El primero es el atributo "lang" que puede utilizarse en cualquier etiqueta para indicar el idoma de partes concretas de la página. De todos modos por regla general se indica en el elemento raíz de la página (<html>) ya que toda ella suele estar en el mismo idioma. Aquí es donde deberemos indicar el idioma de la página casi siempre.
Es también el atributo que utilizan los lectores de pantalla para personas con dificultades visuales para leer en voz alta la página (o trozos concretos marcados con otro idioma) en el idioma apropiado, por lo que es un atributo de accesibilidad importante.
Aparte de este atributo también hemos incluido una etiqueta de tipo <meta> con información sobre el lenguaje del contenido. En este caso además hemos especificado con mayor precisión el idioma: no solo es español sino más concretamente español de España (es-ES).
Por regla general no es necesario incluir esta etiqueta meta y de hecho no está recomendado, pero en realidad tiene su razón de ser. Ambas suelen ser coherentes y marcar el mismo idioma, pero en realidad la meta está pensada para indicar el lenguaje de la audiencia del documento, no el lenguaje en el que está escrito.
Por ejemplo, si la página forma parte de un curso de inglés para españoles, aunque esté escrita en inglés, el idioma de la audiencia seguiría siendo "es-ES" y así lo indicaríamos en la etiqueta meta.
En cualquier caso, y como ya he dicho, lo normal es que no la utilicemos y usemos tan solo el atributo "lang" en la raíz.
Bien, una vez que tenemos el idioma bien especificado, ¿qué tenemos que hacer para impedir que la página se traduzca a otros idiomas a pesar de que el navegador se lo quiera ofrecer al usuario?
En el caso concreto de Google, su servicio de traducción reconoce una cabecera de tipo meta como esta:
<meta name="google" value="notranslate">
(fuente), que es un poco sui-generis pero funciona: aunque vayas explícitamente a Google Translator y le digas que traduzca la página, hará caso omiso y no la traducirá.
Lo que ocurre es que esto es una solución muy parcial y demasiado específica. Bien es cierto que el dominio sobre los traductores online que tiene Google es enorme, más incluso diría yo (sin datos en los que apoyarme) que en el caso de las búsquedas, así que servirá para el 90% de los casos.
¿Pero qué pasa si queremos algo más estándar y que nos de más control?
Mayor control sobre el proceso de traducción
Una vez más el W3C viene a nuestro rescate. Dentro de HTML han definido un atributo específicamente pensado para esto que se llama, como no, translate.
Este atributo puede tener dos valores: "yes" y "no" y como es evidente sirve para controlar si se debe traducir o no un contenido.
Lo podemos aplicar a cualquier elemento de la página.
Por ejemplo, si no queremos que se traduzca la página entera, lo podemos colocar directamente en el cuerpo de la misma:
<body translate="no">
Pero lo interesante es que nos permite un mayor control granular de qué partes queremos que se traduzcan y cuáles no:
<p>El título original del libro era <span lang="es" translate="no">El ingenioso hidalgo don Quijote de la Mancha</span> y se publicó en 1605</p>
De este modo, por ejemplo, podemos marcar un fragmento concreto del texto envolviéndolo con una etiqueta, indicando en ésta el idioma en el que está escrito y además, en este ejemplo, indicando que no debe traducirse nunca. Cuando el traductor pase por este párrafo traducirá todo pero dejará el título original de "El Quijote" en español aunque el usuario esté leyendo la página traducida a otro idioma.
Soporte de traductores
He estado probando esta etiqueta con diversos traductores online (tampoco hay tantos) y he encontrado que la etiqueta translate funciona correctamente en los siguientes traductores de páginas:
pero no le hacen caso los siguientes:
Y no he encontrado modo de traducir páginas (solo párrafos sueltos) en otros bastante conocidos como:
- Babelfish (uno de los más antiguos y conocidos, antes perteneciente a Yahoo)
- Babylon
por lo que no aplica la etiqueta tampoco.
Con los tres primeros que sí la soportan cubrimos la práctica totalidad de los usuarios, ya que Google y Bing son los que se usan en occidente y Yandex es el líder sin duda en Rusia y países relacionados. La verdad es que desconozco cuál será el traductor más utilizado en, China para cubrir esa área también, y me encantaría probarlo, pero no lo he podido hacer.
Gracias a un uso inteligente de los atributos lang y translate podemos controlar muy detalladamente el proceso de traducción de nuestras páginas y aplicaciones.
¡Espero que te sea útil!
💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor
