Internacionalización

La Web está disponible para todas las personas del mundo, como lo indica su nombre. Esto significa que tu sitio web está potencialmente disponible para cualquier persona que tenga acceso a Internet, sin importar dónde se encuentre, qué dispositivo use o qué idiomas hable.

El objetivo del diseño adaptable es que tu contenido esté disponible para todos. Aplicar esa misma filosofía a los idiomas humanos es la fuerza impulsora detrás de la internacionalización, que consiste en preparar tu contenido y tus diseños para un público internacional.

Propiedades lógicas

El inglés se escribe de izquierda a derecha y de arriba hacia abajo, pero no todos los idiomas se escriben de esta manera. Algunos idiomas, como el árabe y el hebreo, se leen de derecha a izquierda, y algunos tipos de letra japoneses se leen de forma vertical en lugar de horizontal. Para adaptarse a estos modos de escritura, se introdujeron propiedades lógicas en CSS.

Si escribes código CSS, es posible que hayas usado palabras clave direccionales como "izquierda", "derecha", "arriba" y "abajo". Esas palabras clave hacen referencia al diseño físico del dispositivo del usuario.

Por otro lado, las propiedades lógicas hacen referencia a los bordes de una caja en relación con el flujo de contenido. Si cambia el modo de escritura, el CSS escrito con propiedades lógicas se actualizará según corresponda. Este no es el caso de las propiedades direccionales.

Mientras que la propiedad direccional margin-left siempre hace referencia al margen del lado izquierdo de una caja de contenido, la propiedad lógica margin-inline-start hace referencia al margen del lado izquierdo de una caja de contenido en un idioma de izquierda a derecha y al margen del lado derecho de una caja de contenido en un idioma de derecha a izquierda.

Para que tus diseños se adapten a los diferentes modos de escritura, evita las propiedades direccionales. En su lugar, usa propiedades lógicas.

.byline {
  text-align: right;
}

.byline {
  text-align: end;
}

Cuando CSS tiene un valor direccional específico, como left o right, hay una propiedad lógica correspondiente. Donde antes teníamos margin-left, ahora también tenemos margin-inline-start.

En un idioma como el inglés, en el que el texto fluye de izquierda a derecha, inline-start corresponde a "izquierda" y inline-end corresponde a "derecha".

Del mismo modo, en un idioma como el inglés, en el que el texto se escribe de arriba hacia abajo, block-start corresponde a "arriba" y block-end corresponde a "abajo".

Si usas propiedades lógicas en tu CSS, puedes usar la misma hoja de estilo para las traducciones de tus páginas. Incluso si tus páginas se traducen a idiomas que se escriben de derecha a izquierda o de abajo hacia arriba, tu diseño se ajustará según corresponda. No es necesario que crees diseños separados para cada idioma. Si usas propiedades lógicas, tu diseño responderá a cada modo de escritura. Esto significa que tu diseño puede llegar a más personas sin que tengas que dedicar tiempo a crear diseños separados para cada idioma.

Las técnicas de diseño de CSS modernas, como grid y flexbox, usan propiedades lógicas de forma predeterminada. Si piensas en términos de inline-start y block-start en lugar de left y top, te resultará más fácil comprender estas técnicas modernas.

Toma un patrón común, como un ícono junto a un texto o una etiqueta junto a un campo de formulario. En lugar de pensar "la etiqueta debería tener un margen a la derecha", piensa "la etiqueta debería tener un margen al final de su eje intercalado".

label {
  margin-right: 0.5em;
}

label {
  margin-inline-end: 0.5em;
}

Si esa página se traduce a un idioma de escritura de derecha a izquierda, no será necesario actualizar los estilos. Puedes imitar el efecto de ver tus páginas en un idioma de derecha a izquierda usando el atributo dir en tu elemento html. Un valor de ltr significa "de izquierda a derecha". Un valor de "rtl" significa "de derecha a izquierda".

Si quieres experimentar con todas las permutaciones de las direcciones del documento (el eje de bloques) y los modos de escritura (el eje intercalado), aquí tienes una demostración interactiva.

Identifica el idioma de la página

Es una buena idea identificar el idioma de tu página con el atributo lang en el elemento html.

<html lang="en">

Ese ejemplo es para una página en inglés. Puedes ser aún más específico. A continuación, te indicamos cómo declarar que una página usa inglés de EE.UU.:

<html lang="en-us">

Declarar el idioma de tu documento es útil para los motores de búsqueda. También es útil para las tecnologías de asistencia, como los lectores de pantalla y los asistentes de voz. Si proporcionas metadatos de idioma, ayudarás a este tipo de sintetizadores de voz a pronunciar tu contenido correctamente.

El atributo lang puede ir en cualquier elemento HTML, no solo en html. Si cambias de idioma en tu página web, indica ese cambio. En este caso, una palabra está en alemán:

<p>I felt some <span lang="de">schadenfreude</span>.</p>

Cómo identificar el idioma de un documento vinculado

Hay otro atributo llamado hreflang que puedes usar en los vínculos. El hreflang adopta la misma notación de código de idioma que el atributo lang y describe el idioma del documento vinculado. Si hay una traducción de toda tu página disponible en alemán, vincúlala de la siguiente manera:

<a href="/path/to/german/version" hreflang="de">German version</a>

Si usas texto en alemán para describir el vínculo a la versión en alemán, usa hreflang y lang. Aquí, el texto "Deutsche Version" está marcado como en idioma alemán, y el vínculo de destino también está marcado como en alemán:

<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>

También puedes usar el atributo hreflang en el elemento link. Esto va en el head de tu documento:

<link href="/path/to/german/version" rel="alternate" hreflang="de">

Sin embargo, a diferencia del atributo lang, que se puede incluir en cualquier elemento, hreflang solo se puede aplicar a los elementos a y link.

Ten en cuenta la internacionalización en tu diseño

Cuando diseñes sitios web que se traducirán a otros idiomas y modos de escritura, ten en cuenta los siguientes factores:

• Algunos idiomas, como el alemán, tienen palabras largas de uso común. Tu interfaz debe adaptarse a estas palabras, por lo que debes evitar diseñar columnas estrechas. También puedes usar CSS para introducir guiones.
• Asegúrate de que tus valores de line-height puedan admitir caracteres como acentos y otros signos diacríticos. Las líneas de texto que se ven bien en inglés pueden superponerse en otro idioma.
• Si usas una fuente web, asegúrate de que tenga un rango de caracteres lo suficientemente amplio como para abarcar los idiomas a los que traducirás el contenido.
• No crees imágenes que contengan texto. Si lo haces, deberás crear imágenes separadas para cada idioma. En su lugar, separa el texto y la imagen, y usa CSS para superponer el texto en la imagen.

Piensa en el público internacional

Los atributos como lang y hreflang hacen que tu código HTML sea más significativo para la internacionalización. Del mismo modo, las propiedades lógicas hacen que tu CSS sea más adaptable.

Si estás acostumbrado a pensar en términos de top, bottom, left y right, puede ser difícil comenzar a pensar en block start, block end, inline start y inline end. Pero vale la pena. Las propiedades lógicas son clave para crear diseños verdaderamente responsivos.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre internacionalización.

A continuación, aprenderás a abordar los diseños a nivel de la página, también conocidos como diseños macro.