Figuras y leyendas

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.

Cambio de escala de la imagen

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]).

Poner la leyenda encima

También se puede poner la leyenda encima, indicándole al navegador que la figura debe formatearse como una tabla. Basta añadir estas reglas a la hoja de estilo de las secciones previas:

div.figure p {
  display: table-cell;
  width: 100%;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

El signo "+" hace que la regla se aplique a elementos P que sigan a otros P. En este caso quiere decir que se aplica al segundo elemento P de la figura (el que contiene la leyenda).

(Esta técnica puede dejar al descubierto errores de programación en navegadores más antiguos, especialmente cuando se combina con el cambio de escala de la imagen, como aquí).

Figuras en XHTML

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>