Este documento es una traducción del tutorial "Figures & captions" propiedad de Bert Bos publicado en el sitio de W3C.
La versión en inglés de esta especificación es la única con valor normativo y puede encontrarse en: http://www.w3.org/Style/Examples/007/figures.html
(Esta página usa hojas de estilo CSS)
Modelo a escala de la torre Eiffel en Parc Mini-France
El HTML no tiene un elemento que permita insertar una figura con leyenda. Existió una propuesta en tal sentido (véase HTML3), pero nunca se introdujo en HTML4. Aquí hay un modo de simular un elemento de figura como el propuesto:
<div class="figure"> <p><img src="eiffel.jpg" width="136" height="200" alt="Eiffel tower"> <p>Modelo a escala de la torre Eiffel en Parc Mini-France </div>
Luego en la hoja de estilo usamos la clase "figure" para formatear la figura como deseemos. Por ejemplo, para situar la figura a la derecha en un espacio igual al 25% del ancho de los párrafos que la rodean, bastará usar estas reglas:
div.figure { float: right; width: 25%; border: thin silver solid; margin: 0.5em; padding: 0.5em; } div.figure p { text-align: center; font-style: italic; font-size: smaller; text-indent: 0; }
De hecho, sólo son imprescindibles las dos primeras declaraciones (float y width), el resto es solamente decorativo.
Aquí tenemos un problema, y es que la imagen puede ser demasiado ancha. En este caso, el ancho de la imagen es siempre 136 píxeles, mientras que el DIV ocupa el 25% del ancho del texto circundante. De modo que si el usuario estrecha el ancho de la ventana, puede ocurrir que la imagen se exceda del espacio del DIV (¡haga la prueba!)
Si conocemos el ancho de todas las imágenes en el documento, podemos añadir un ancho mínimo al DIV, de este modo:
DIV.figure { min-width: 150px; }
Otro modo es poner a escala la imagen en sí. Es lo que hemos hecho con la imagen que aparece aquí a la derecha. Tal vez podrá apreciar, si ensancha realmente mucho la ventana, que las imágenes JPEG no toleran muy bien los cambios de escala. Pero si la imagen es un diagrama o un gráfico en formato SVG, la verdad es que el cambio de escalas funciona a las maravillas. El HTML que usamos es éste:
<div class="figure"> <p><img class="scaled" src="st-tropez.jpg" alt="St. Tropez"> <p>Saint Tropez y su fuerte, bajo el sol vespertino </div>
Y la hoja de estilo es ésta:
div.figure { float: right; width: 25%; border: thin silver solid; margin: 0.5em; padding: 0.5em; } div.figure p { text-align: center; font-style: italic; font-size: smaller; text-indent: 0; } img.scaled { width: 100%; }
El único agregado es la última regla, que hace que la imagen sea tan ancha como el espacio interior del DIV (el área dentro del borde y del margen interno [padding]).
La propuesta actual (enero de 2003) respecto de XHTML2 incluye un elemento CAPTION, que puede usarse con OBJECT. De aceptarse dicha propuesta, ya no será necesario usar DIV y CLASS, pero (al menos en XHTML2) se podrá escribir:
<object data="eiffel.jpg"> <caption>Modelo a escala de la torre Eiffel en Parc Mini-France</caption> </object>