La World Wide Web está disponible para todas las personas del mundo: ¡está justo allí en el nombre! Eso significa que tu sitio web podría estar 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 hacer que tu contenido esté disponible para todos. Aplicar esa misma filosofía a los lenguajes humanos es la fuerza que impulsa la internacionalización: prepara 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 abajo, pero no todos los idiomas se escriben de esta manera. Algunos idiomas, como el árabe y el hebreo, leen de derecha a izquierda, y otros tipos de letra en japonés leen verticalmente en lugar de horizontal. Para adaptarse a estos modos de escritura, se introdujeron propiedades lógicas en CSS.
Si escribes CSS, es posible que hayas usado palabras clave direccionales como “izquierda”, “derecha”, “superior” e “inferior”. Esas palabras clave se refieren a la disposición física del dispositivo del usuario.
Las propiedades lógicas, por otro lado, se refieren a los bordes de un recuadro en relación con el flujo de contenido. Si cambia el modo de escritura, las CSS escritas con propiedades lógicas se actualizarán en consecuencia. Ese no es el caso de las propiedades direccionales.
Mientras que la propiedad direccional margin-left siempre hace referencia al margen en el lado izquierdo de un cuadro de contenido, la propiedad lógica margin-inline-start se refiere al margen en el lado izquierdo de un cuadro de contenido en un idioma de izquierda a derecha, y el margen en el lado derecho de un cuadro de contenido en un idioma de derecha a izquierda.
Para que tus diseños se adapten a diferentes modos de escritura, evita las propiedades direccionales. Usa propiedades lógicas.
.byline {
text-align: right;
}
.byline {
text-align: end;
}
Cuando CSS tiene un valor direccional específico, como left o right, existe una propiedad lógica correspondiente. Mientras que antes tuvimos margin-left, ahora también tenemos margin-inline-start.
En un idioma como el inglés, donde el texto va de izquierda a derecha, inline-start corresponde a "left" y inline-end a "right".
Del mismo modo, en un idioma como el inglés, en el que el texto se escribe de arriba abajo, block-start corresponde a "top" y block-end a "bottom".
Si utilizas propiedades lógicas en el CSS, puedes usar la misma hoja de estilo para las traducciones de tus páginas. Incluso si tus páginas están traducidas a idiomas escritos de derecha a izquierda o de abajo hacia arriba, tu diseño se ajustará en consecuencia. No es necesario que hagas diseños separados para cada idioma. Al usar propiedades lógicas, tu diseño responderá a cada modo de escritura. Eso significa que tu diseño puede llegar a más personas sin que tengas que pasar tiempo creando diseños separados para cada idioma.
Las técnicas modernas de diseño de CSS, 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, encontrarás estas técnicas modernas más fáciles de comprender.
Toma un patrón común, como un ícono junto a una parte del texto o una etiqueta junto a un campo del formulario. En lugar de pensar que "la etiqueta debería tener un margen a la derecha", piensa que "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 está traducida a un idioma 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 el 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 combinaciones de instrucciones sobre cómo llegar de documentos (el eje de bloque) y los modos de escritura (el eje intercalado), puedes ver una demostración interactiva.
Identificar el idioma de la página
Te recomendamos que identifiques el idioma de tu página usando el atributo lang en el elemento html.
<html lang="en">
Ese ejemplo es para una página en inglés. Puedes ser incluso más específico. A continuación, te mostramos 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 tecnologías de asistencia, como lectores de pantalla y asistentes de voz. Si proporcionas metadatos de idioma, ayudas a que este tipo de sintetizadores de voz pronuncien tu contenido correctamente.
El atributo lang puede usarse 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>
Identifica el idioma de un documento vinculado
Hay otro atributo llamado hreflang que puedes usar en los vínculos.
hreflang toma 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 así:
<a href="/path/to/german/version" hreflang="de">German version</a>
Si utilizas 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 alemán, y el vínculo de destino también está marcado 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 se encuentra en el head de tu documento:
<link href="/path/to/german/version" rel="alternate" hreflang="de">
Sin embargo, a diferencia del atributo lang, que puede incluirse en cualquier elemento, hreflang solo se puede aplicar a elementos a y link.
Considera la internacionalización en tus diseños
Cuando diseñes sitios web que se traducirán a otros idiomas y modos de escritura, ten en cuenta estos factores:
- Algunos idiomas, como el alemán, tienen palabras largas en común. Tu interfaz debe adaptarse a estas palabras, por lo que debes evitar diseñar columnas estrechas. También puedes usar CSS para ingresar guiones.
- Asegúrate de que los valores de
line-heightpuedan admitir caracteres como tildes y otros signos diacríticos. Las líneas de texto que se ven bien en inglés podrían superponerse en un idioma diferente. - Si usas una fuente web, asegúrate de que tenga un rango de caracteres lo suficientemente amplio como para cubrir los idiomas a los que vas a traducir.
- No crees imágenes que contengan texto. Si lo haces, tendrás que crear imágenes distintas 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 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 realmente responsivos.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre internacionalización.
En inglés, ¿cuál es el lado físico right de una caja?
block-starttopblock-endbottominline-startleftinline-end¿Qué atributo deberías agregar a tu código HTML para que sea más significativo para la internacionalización?
englishlanglanguagei18nA continuación, aprenderás a abordar los diseños de nivel de página, también conocidos como diseños de macros.