Cómo terminar el texto envolvente

En la figura 5.11 adelantábamos un ejemplo de cómo quedaba una imagen con texto que envolviéndola. En ese caso usábamos una fotografía de tamaño considerable, y por tanto había numerosas líneas de texto a su izquierda. Después de la primera frase pusimos un punto y aparte, que como ya sabemos, se hace en HTML con la etiqueta <br>, y continuamos: «Desde las…».

Pero podemos imaginar otro caso, como el de la figura 5.17 en el que lo único que queremos es escribir unas pocas líneas que comenten la imagen pero continuar el resto del texto después (debajo) de la imagen. Si ponemos br sin más pasaremos a la siguiente línea, pero no al final de la imagen. Un primer método que se nos podría ocurrir para conseguir este efecto sería poner la etiqueta br muchas veces, tantas como líneas quepan hasta el final de la imagen. Sin embargo este sistema a parte de ser molesto, no funciona como puede comprobar el lector si decide probarlo.

Figura 5.17. Usando el atributo clear de la etiqueta br podemos terminar el texto envolvente y seguir escribiendo debajo de la imagen.

Pero entonces ¿existe alguna otra forma de conseguirlo? La respuesta es SI. Cuando se añadieron los valores right y left a los modos de alineamiento se introdujo también un nuevo atributo en la etiqueta br que nos permitiera tratar con este tipo de alineamiento. Ese atributo se llama clear, puede tomar los siguientes valores.

left

Provoca un salto de línea hasta el primer margen libre a la izquierda. Esto quiere decir que provocará un salto hasta la primera línea en la que no hay una imagen a la izquierda y por tanto se usa, en general, cuando hay una imagen alineada a ese lado. Este valor es el que hemos usado en el ejemplo de la figura 5.17. Su modo de uso es el siguiente:

right

Provoca un salto de línea hasta el primer margen libre a la derecha, por lo demás funciona idénticamente al valor anterior:

all

Provoca un salto hasta la primera línea que tiene tanto el margen izquierdo como el margen derecho libres. Es decir provoca el efecto de los dos valores anteriores combinados.

Ya empezamos a sentir que tenemos una gran control sobre la disposición de las imágenes en nuestra página, pero aún podemos manejar un parámetro más en relación a estas y al texto que las envuelve: el espaciado que hay entre ellas.

Fuente: Copyright Jorge Ferrer, Rodrigo Garcia y Victor García, licencia Documentación Libre GNU, Versión 1.1