6 consejos rápidos para sitios web internacionales

Viernes, 31 de mayo de 2013

Nota de los editores: tras analizar anteriormente varias formas de gestionar
la internacionalización para la búsqueda web de Google,
aquí tenéis una publicación de miembros del equipo de Google Web Studio con consejos para desarrolladores web.

Muchos sitios web existen en más de un idioma, y cada vez hay más sitios web disponibles en
más de un idioma. Sin embargo, crear un sitio web para más de un idioma no significa simplemente
traducirlo o localizarlo (L10N) y ya está. Requiere algunas cosas más, todas las cuales
están relacionadas con la internacionalización (I18N). En esta publicación compartimos algunos consejos para sitios web
internacionales.

Haz que las páginas sean compatibles con I18N en el marcado, no en las hojas de estilo

El idioma y la direccionalidad son inherentes al contenido del documento. Por lo tanto, si es posible, siempre debes usar marcado, no hojas de estilo, con fines de internacionalización. Usa
@lang y @dir, al menos en el elemento html

Evita inventar tus propias soluciones como clases o ID especiales.

En cuanto a la internacionalización en las hojas de estilo, no siempre puedes confiar en CSS: la especificación CSS define que los agentes de usuario conformes
pueden ignorar propiedades como direction o unicode-bidi.
(En el caso de XML, la situación vuelve a cambiar. XML no ofrece un marcado de internacionalización especial, por lo que
aquí es aconsejable usar CSS).

Usa una sola hoja de estilo para todas las configuraciones regionales

En lugar de crear hojas de estilo independientes para la direccionalidad LTR y RTL, o incluso para cada idioma,
agrupa todo en una sola hoja de estilo. Esto hace que tus reglas de internacionalización sean mucho
más fáciles de entender y mantener.

Así que, en lugar de incrustar una hoja de estilo alternativa como

simplemente usa tu

hoja existente.

Al adoptar este enfoque, tendrás que complementar las reglas CSS existentes con sus equivalentes internacionales: Usa el selector de atributos [dir=’rtl’]

Dado que recomendamos mantener la hoja de estilo que ya tienes (consejo n.º 2), necesitas una forma diferente de seleccionar los elementos a los que debes aplicar un estilo distinto para la otra direccionalidad. Como los contenidos RTL requieren un marcado específico (consejo n.º 1), esto debería ser fácil: para la mayoría de los navegadores modernos, podemos simplemente usar
[dir='rtl'].

Aquí tienes un ejemplo:

Usa la :lang() pseudoclase

Para orientar documentos de un idioma en particular, usa la pseudoclase :lang() . (Ten en cuenta
que estamos hablando de documentos, no de fragmentos de texto, ya que orientar fragmentos de un idioma en particular
complica un poco las cosas).

Por ejemplo, si descubres que el formato de negrita no funciona muy bien para los documentos en chino
(lo cual es cierto), usa lo siguiente:

Refleja los valores relacionados con la izquierda y la derecha

Al trabajar con contenidos LTR y RTL, es importante reflejar todos los valores que cambian de direccionalidad. Entre las propiedades a tener en cuenta se encuentran todo lo relacionado con bordes, márgenes
y rellenos, pero también las propiedades relacionadas con la posición, floato
text-align.

Por ejemplo, lo que es text-align: left en LTR debe ser
text-align: right en RTL.

Existen herramientas para facilitar la “inversión” de la direccionalidad. Una de ellas es
CSSJanus, aunque se ha escrito
para el ámbito de “hoja de estilo separada”, no para el de “misma hoja de estilo”.

No pierdas de vista los detalles

Presta atención a los siguientes elementos:

• Imágenes diseñadas para la izquierda o la derecha, como flechas o fondos, fuentes de luz en
  box-shadow y text-shadow values, así como posicionamiento y animaciones de JavaScript:
  Es posible que sea necesario intercambiarlas y adaptarlas para la direccionalidad opuesta.
• Tamaños de fuente y tipografías, especialmente para alfabetos no latinos: Dependiendo de la escritura y la fuente, el tamaño de fuente predeterminado
  puede ser demasiado pequeño. Considera ajustar el tamaño y, si es necesario, la fuente.
• Especificidad
  CSS:
  Al usar el gancho [dir='rtl'] (o [dir='ltr']) (consejo n.º 2), estás
  utilizando un selector de mayor especificidad. Esto puede generar problemas. Solo tenlo en cuenta y
  ajústalo en consecuencia.

Si tienes alguna pregunta o comentario,
visita el Foro de ayuda para webmasters de internacionalizacióno deja tus comentarios aquí.

Escrito por
Jens O. Meiert
y
Tony Ruscoe,
líderes técnicos de Google Web Studio