Imágenes de fondo que admiten la localización

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

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.

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:

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.

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.

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í:

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.

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.

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.

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.

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:

y .

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.

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.

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.

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.

• No haga el ancho máximo demasiado angosto. Recuerde que no sólo las palabras extranjeras son más largas que el texto original, sino que también algunos idiomas crean sustantivos compuestos al unir los componentes para formar una sola palabra. Por ejemplo, la frase en inglés "Input processing features" se traduce como "Eingabeverarbeitungsfunktionen" en alemán.

• Asegúrese de que el traductor sepa dónde se usará el texto en cuadros de ancho restringido, y por cuánto, y pídale que agregue guiones cortos dentro de las palabras largas (es decir, ­ o ­). En los exploradores principales, estos guiones son generalmente invisibles, pero cuando una palabra es demasiado ancha para su cuadro, Internet Explorer y Opera la separarán y el guión aparecerá al final de la línea, como en este ejemplo: