6 consejos para internacionalización de sitios web

jueves, 20 de junio de 2013


Nota de los editores: Tras previamente estudiado diversas maneras de manejar la internacionalización de sitios multirregionales y multilingües, hoy presentamos este post de los miembros del equipo de Google Web Studio con consejos para los desarrolladores web.

Existen muchos sitios web multilingües y cada vez más y más sitios web están disponibles para más de un idioma. Sin embargo, la construcción de un sitio web multilingüe no significa simplemente traducir o localizar. Se requiere un par de cosas más, todas ellas están relacionadas con la internacionalización. En este artículo compartimos algunos consejos para los sitios web internacionales.

1. Haz que las páginas internacionalizacionales estén preparadas para el markup, no en hojas de estilo

El idioma y direccionalidad son inherentes a los contenidos del documento. Si es posible, por lo tanto, cuando internacionalización se refiere se debería utilizar el markup adecuado, y no hojas de estilo. Utiliza @lang y @dir , al menos en el elemento html :

<html lang="ar" dir="rtl">

Es aconsejable evitar soluciones propias como clases especiales o IDs.

En cuanto a internacionalización en las hojas de estilo, no se puede depender siempre de CSS: El CSS espec define que según los user agents se podria ignorar propiedades como direction o unicode-bidi . (Para XML, la situación cambia de nuevo. XML no ofrece un markup especial para internacionalización, así que aquí es recomendable utilizar CSS.)

2. Usa una hoja de estilos para todos las regiones

En lugar de crear hojas de estilos diferentes para LTR y RTL texto bidireccional, o incluso para cada idioma, es recomendable empaquetar todo en una hoja de estilos. Eso hace que la internacionalización se maneje mejor y sea mucho más fácil de entender y mantener.

Así que en lugar de usar una hoja de estilos alternativa como

<link href="default.rtl.css" rel="stylesheet">

sólo tienes que utilizar la ya existente

<link href="default.css" rel="stylesheet">

Al tomar este enfoque tendrás que complementar las reglas CSS existentes por parte de sus homólogos internacionales:

3. Utiliza los botones [dir='rtl'] selector de atributos

Dado que se recomienda seguir con la hoja de estilo (consejo n º 2), se necesita una forma diferente de seleccionar los elementos que se necesitan para dar un estilo diferente a la otra direccionalidad. Como contenido RTL requieren markup específico (consejo nº 1), esto debería ser fácil: Para los navegadores más modernos, se puede simplemente utilizar [dir='rtl'] .

He aquí un ejemplo: 

aside {
 float: right;
 margin: 0 0 1em 1em;
}

[dir='rtl'] aside {
 float: left;
 margin: 0 1em 1em 0; 
}

4. Utiliza: :lang() pseudo clase

Para hacer referencia a los documentos de un idioma en particular, usa el :lang() pseudo clase. (Ten en cuenta que estamos hablando de los documentos, no de fragmentos de texto, ya la orientación de fragmentos de un idioma en particular hace las cosas un poco más complejo.)

Por ejemplo, si se descubre que el formato en negrita no funciona muy bien para los documentos en chino (que de hecho no lo hace), puedes utilizar lo siguiente: 

:lang(zh) strong,
:lang(zh) b {
 font-weight: normal;
 color: #900;
}

5. refleja los valores izquierda (left-) y derecha (rigth-related)

Cuando se trabaja con dos LTR y RTL contenido que es importante para reflejar todos los valores que cambian la direccionalidad. Entre las características a tener en cuenta esta todo lo relacionado con los bordes, márgenes y rellenos (paddings), y también las propiedades relacionadas con la posición, float o text-align .

Por ejemplo, el text-align: left en la LTR que tiene que ser text-align: right en RTL.

Existen herramientas para hacer más fácil el cambio de la direccionalidad. Una de ellas es CSSJanus, aunque esta escrito para el campo “separate style sheet” y no la “same style sheet”.

6. Ten cuidado con los detalles

Cuidado con los siguientes elementos:

  • Imágenes diseñadas para derecha e izquierda como flechas o fondos, " light sources" en los box-shadow y text-shadow values y el posicionamiento y animaciones en JavaScript: Ya que pueden requerir intercambios y "acomodaciones" para la direccionalidad contraria.
  • Tamaños de fuentes, y tipos de fuentes, especialmente para los alfabetos no latinos: Dependiendo del script, y la fuente, el tamaño de fuente por defecto puede ser demasiado pequeño. Es recomendable considerar la posibilidad de ajustar el tamaño y, si es necesario, el tipo de letra.
  • CSS specificity : Cuando se utiliza el [dir='rtl'] (o [dir='ltr'] ) (consejo nº 2), se está utilizando un selector de mayor especificidad. Esto puede llevar a problemas y a ajustes en consecuencia.
Si tienes alguna pregunta o comentario, pásate por el Foro de ayuda para webmasters .

Escrito por Jens O. Meiert and Tony Ruscoe , Tech Leads, Google Web Studio, P ublicado por Javier Pérez , equipo de Calidad de búsqueda.