La tecla de acceso 'n' lleva a la navegación de la página. Ir al inicio del contenido.

Este documento es una traducción. En caso de discrepancias o errores, la única versión normativa es el último original en inglés. Los derechos de autor originales corresponden al W3C, como puede verse al final de la página.

Traductor: English to Spanish Translation Team, Spanish Translation US.

s_gotoW3cHome Internacionalización
 

Imágenes de fondo que admiten la localización

Audiencia de destino: Los codificadores de CSS, los codificadores de XHTML/HTML (usando editores o lenguaje de script) y todos aquellos que planeen aplicar imágenes de fondo detrás de texto en columnas de ancho fijo.

Nota: Desde la traducción de este documento se han producido modificaciones en el original en Inglés. Consulte el registro de cambios.

Pregunta

¿Cómo puedo garantizar que al producirse la expansión textual durante una traducción las imágenes de fondo seguirán funcionando?

Información preliminar

El texto tiende a cambiar de tamaño cuando se traduce. Para obtener información básica al respecto, consulte El tamaño del texto en la traducción.

Esto significa que todas las imágenes de fondo que diseñó con tanto cuidado para acomodarlas detrás del texto original ahora podrían resultar muy pequeñas o muy grandes. En este artículo se analiza una forma de lidiar con esto.

NOTE! The examples chosen for this article show how to use graphics to achieve rounded corners and gradient effects that can now be done using CSS, without the need to download graphics and with simpler code. However, at the time of this update, the requisite CSS properties are not yet supported by all major browsers, and even then only by recent versions. Furthermore, you may want to still use graphics to achieve more complicated effects. Nevertheless, the article has been updated with links to live code that show how you could use CSS rather than images for these particular examples, assuming that the browser supports the necessary properties.

El problema

Como primer ejemplo, haremos algo simple. Suponga que quiere implementar un cuadro de ancho fijo en nuestra página. El texto puede expandirse hacia abajo, pero no hacia el costado.

También supongamos que queremos un fondo con una linda gradiente detrás del título del cuadro, una línea en la parte inferior y esquinas redondeadas. Para lograr estos efectos, los diseñadores a menudo prefieren usar una imagen de fondo detrás del título.

Un cuadro de diálogo en español.

El cuadro de ancho fijo en español tiene el título "Idioma de la interfaz" y una lista de botones de opción para seleccionar el idioma. Usa este gráfico para lograr el efecto gradual detrás del título:

el gráfico de fondo.

Nuestro CSS se vería así:

div.box h3 {
margin: 0;
padding: 6px 8px 4px 10px;
font-size: 130%;
color: #333;
background: url(img/h3-bg.gif) no-repeat top left;
}

El problema con esta técnica es que cuando traducimos este cuadro de diálogo a un idioma como el malayo, el texto del título se expande y ocupa dos líneas. Dado que el gráfico utilizado para el fondo en gradiente tiene sólo una línea de profundidad, ahora todo parece un lío.

El mismo cuadro de diálogo en malayo, sin que el fondo del título cubra todo el título.

Pueden surgir problemas similares cuando el texto se expanda en sentido horizontal. Por ejemplo, supongamos que la interfaz original en chino incluía una metáfora de pestañas con imágenes de fondo detrás de cada enlace, como aparece a continuación.

Imagen de pestañas que contienen texto en chino.

Si se utilizaran imágenes para las pestañas, se deberían rediseñar para cada traducción: un proceso que consume tiempo. Esto se debe a que las etiquetas tendrían tamaños diferentes en los distintos idiomas. A veces, se utiliza una sola imagen de fondo para la parte gráfica de las pestañas. Una vez más, se deberá rediseñar dicho fondo para cada traducción; de lo contrario, se vería algo así:

Imagen del texto en portugués que excede los límites de las pestañas definidas originalmente para chino.

Por supuesto, estas situaciones son sólo ejemplos. Estos problemas no sólo se limitan a encabezados de cuadros y pestañas, sino que también pueden surgir en cualquier lugar donde intente hacer coincidir gráficos de fondo con texto.

Respuesta

La forma de lidiar con este tipo de cuestiones es asegurarse de que sus fondos gráficos puedan expandirse de manera automática junto con el texto con el cual se relacionan y anticiparse al hecho de que los cuadros que contienen texto pueden aumentar durante la traducción y evitar espacios muy restringidos.

En las subsecciones siguientes, haremos una breve referencia a unas pocas soluciones posibles. Éstas son sólo ilustraciones de técnicas posibles. Para obtener más información sobre la manera de aplicarlas, consulte las fuentes originales citadas. Le dedicaremos un poco más de tiempo al primer ejemplo a fin de que pueda comprender la idea principal. Es posible que haya otras técnicas que sirvan. La clave es pensar cómo proporcionará flexibilidad al texto para que se agrande y se achique en las versiones en otros idiomas.

Es importante tener en cuenta que las soluciones descriptas más abajo se basan en un código que cumple con los estándares y se diseñaron inicialmente para permitir accesibilidad, dado que las personas con problemas visuales a menudo desean aumentar el tamaño del texto. Esta técnica sirve también en el caso de la localización.

Títulos en cuadros de ancho fijo

Una forma de abordar este tema es mediante el uso de un gráfico que tenga tres o cuatro líneas de profundidad detrás del título. En este ejemplo se emplea una técnica descripta en el libro de Dan Cederholm, Bulletproof Web Design.

Una versión más grande del gráfico de fondo.

Al adjuntar el gráfico con la propiedad de fondo CSS, en realidad, sólo se mostrará la cantidad necesaria para visualizar el título.

Observe que el gráfico ya no proporciona la línea sólida debajo del título. Sin embargo, aún podemos aplicar dicha línea si se agrega al CSS, como a continuación.

div.box h3 {
margin: 0;
padding: 6px 8px 4px 10px;
font-size: 130%;
color: #333;
background: url(img/h3-bg.gif) no-repeat top left;
border-bottom: 1px solid #E0CFAB;
}
				

Ahora esto producirá el efecto que estamos buscando en la versión traducida.

El cuadro en malayo, ahora presenta un buen aspecto.

Por supuesto, se debe usar una técnica similar para la parte inferior del cuadro, dado que el texto también podría cambiar y, con un contenido diferente, agregar o quitar líneas de texto.

See an example of how to do this in CSS, for browsers that support the necessary CSS properties.

Pestañas

Esta técnica se basa en el artículo "Puertas correderas de CSS", escrito por Doug Bowman. La idea principal es similar a la de la sección anterior, a pesar de que es un poco más complicada para codificar. Cada pestaña tiene dos gráficos de fondo:

Una imagen de fondo para el lateral izquierdo de la pestaña. y Una imagen de fondo para el lateral derecho de la pestaña..

Los dos gráficos están adjuntados como fondos a dos elementos diferentes que se superponen. Sólo las partes necesarias de los gráficos son visibles, y el resultado parece un solo fondo. (El artículo describe código adicional para la pestaña seleccionada actualmente y la línea en la base de las otras pestañas).

Las siguientes pestañas en chino e italiano usan exactamente el mismo código -sólo el texto de la etiqueta ha cambiado- pero las pestañas ubican los diversos tamaños de etiquetas de manera perfecta, incluso cuando el texto se contrae en vez de expandirse.

Estos ejemplos están diseñados dentro de esta página -no son gráficos- así que puede probar el comportamiento de expansión/contracción mediante el aumento o reducción del tamaño del texto para esta página en Firefox.

Observe que hemos dejado espacio de expansión a la derecha de las pestañas. Debería considerar esto también. Si no hay suficiente espacio disponible, deberá encontrar una solución que permita a las pestañas acomodarse en otra línea y dejar que el cuadro o la columna se expanda hacia abajo a fin de contenerlo.

See an example of how to do this in CSS, for browsers that support the necessary CSS properties.

Cuadros

Este ejemplo utiliza la adaptación de otra técnica descripta en el libro de Dan Cederholm, Bulletproof Web Design, y también hace uso de la técnica de puertas correderas.

El código fuente XHTML para cada cuadro es el mismo, excepto por el texto. El CSS también es el mismo.

Se utilizó una propiedad de ancho máximo a fin de asegurar que el ancho del cuadro nunca sea mayor que 250 px, pero podrá ser menor (posiblemente como en el caso del japonés, si su tamaño de fuente es el predeterminado para esta página). Esto hace que se agreguen nuevas líneas al cuadro si el texto que contiene es largo. No obstante, los gráficos que crean el borde y las esquinas redondeadas aún se ven bien.

Puede encontrar el código utilizado para el XHTML y CSS si examina el texto fuente para esta página.

Sin embargo, todavía queda un posible problema. Si una sola palabra es más larga que la configuración de ancho máximo, sobresaldrá del lateral del cuadro. Por ejemplo, con las configuraciones de fuentes predeterminadas, es probable que la palabra para internacionalización (интернационализации) no entre en un cuadro cuyo ancho máximo esté configurado en 100 px. Aquí se pueden hacer dos cosas.

See an example of how to do this in CSS, for browsers that support the necessary CSS properties.

Dinos qué piensas (en Inglés).

Suscripción a feed RSS.

Nuevos recursos

Noticias de la página de inicio

Twitter (Noticias de la página de inicio)

‎@webi18n

Lecturas complementarias

De: Richard Ishida, W3C. Traductor: English to Spanish Translation Team, Spanish Translation US..

XHTML 1.0 válido
CSS válido
Codificado en UTF-8

Traducido del inglés con fecha 2007-06-14. Traducción modificada por última vez el 2012-09-16 16:42 GMT.

Para ver el historial de cambios del documento, busque qa-resizing-backgrounds en la bitácora de internacionalización.