Folhas Web de Linguagem de Estilo
Dicas e Truques CSS

Figuras e legendas

HTML não tem um elemento que lhe permita inserir uma figura com uma legenda. Foi uma vez proposto (ver HTML3), mas nunca chegou ao HTML4. Aqui está uma forma de simular uma figura:

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Torre Eiffel">
  <p>Modelo em escala da Torre Eiffel no Parque Mini-França
</div>

Então, na folha de linguagem de estilo, use a classe "figura" para formatar a figura da forma que desejar. Por exemplo, para flutuar a figura à direita, num espaço equivalente a 25% da largura em torno dos parágrafos. Estas regras irão fazer o truque:

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 facto, apenas as duas primeiras declarações (flutuar e largura) são essenciais, o resto é só decoração.

Escala da imagem

Existe um problema aqui, e isso é que, a imagem pode ser demasiado grande. Neste caso, a imagem é sempre de 136px de largura e os DIV são de 25% em torno do texto. Então, se tornar a janela mais estreita , pode ser que a imagem transborde o DIV (tente!).

Se souber a largura de todas as imagens no documento, pode adicionar uma largura mínima ao DIV, como esta:

DIV.figure {
  min-width: 150px;
}

Outra forma é ajustar a imagem por si própria. Isso é o que fizemos com a imagem aqui à direita. Como talvez veja, se fizer a janela muito grande, as imagens em JPEG não se ajustam muito bem. Mas se a imagem é um diagrama ou um gráfico no formato SVG, a escala funciona lindamente. Aqui é a mark-up é usada:

<div class="figure">

  <p><img class="scaled" src="st-tropez.jpg"
    alt="Saint Tropez">
  <p>Saint Tropez e a sua fortaleza ao entardecer
</div>

E esta é a folha de linguagem de estilo:

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%;
}

A única junção é a última regra: torna a imagem tão ampla quanto o interior do DIV (a área dentro da fronteira e do padding)

Colocar a legenda por cima

Pode colocar a legenda no topo, ao dizer ao navegador que a figura deve ser formatada como uma tabela. Basta adicionar estas regras à folha de linguagem de estilo das secções anteriores:

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

O + faz com que a regra para juntar o P siga outro P. Neste caso significa que, corresponde ao segundo P da figura, a qual contém a legenda.

(Essa técnica pode expor alguns problemas nos navegadores mais antigos, especialmente quando combinada com a escala da imagem, como eu aqui fiz.)

Figuras em XHTML

A actual proposta (janeiro 2003) para XHTML2 tem um elemento de LEGENDA que pode ser usada com o OBJECTO. Se essa proposta for aceite, não será mais necessário utilizar o DIV e a CLASSE, mas, pelo menos em XHTML2, pode escrever:

<object data="eiffel.jpg">
  <caption>Modelo em escala da Torre Eiffel no Parque Mini-França</caption>
</object>