English to Spanish Translation by Trusted Translations, Inc.

Otras Traducciones de W3 en Spanish Translator Services

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

Hojas de estilo para la Web
Trucos y sugerencias para CSS

(Esta página usa hojas de estilo CSS)

Agregar leyendas a las figuras

Cambio de escala de la imagen

Leyenda encima

XHTML

Figuras y leyendas

Torre Eiffel

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.

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>

St. Tropez

Saint Tropez y su fuerte bajo el sol vespertino

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

Cap Ferrat

El Mediterráneo cerca de Cap Ferrat

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>

CSS ¡CSS válido!¡HTML 4.0 válido!

Bert Bos
creado el 17 de enero de 2001;
última actualización $Date: 2007/01/15 13:04:18 $ GMT