Esta é a tradução do tutorial "Figures & captions" de autoria de Bert Bos publicado no site do W3C.

1. A versão oficial e original, em inglês, deste tutorial, encontra-se em: http://www.w3.org/Style/Examples/007/figures.html e os seus direitos são conforme:

Copyright ©2002 W3C® (MIT, INRIA, Keio), Todos os direitos reservados. São aplicáveis as disposições do W3C relativas a responsabilidade, marcas, uso de documentos e licença de software

2. A única versão oficial deste documento é a versão em língua inglesa que se encontra no sítio do W3C.

3. O presente documento traduzido para a língua portuguesa do Brasil, pode conter erros de tradução.

Este documento foi traduzido em 12 de dezembro de 2004 por: Maurício Samy Silva e encontra-se hospedado no seu sítio "CSS para WebDesign" em http://www.maujor.com/
A traduçao foi feita somente para este documento, vale dizer, as páginas remetidas pelos links aqui indicados, estão em sua versão original em língua inglesa.

Importante: O IE/Win até a presente data, não oferece o suporte CSS requerido para visualizar todos os efeitos mostrados neste tutorial. Use um browser compatível com as normas do W3C (standard-compliant).

Folhas de Estilo para Web
dicas & macetes CSS

(esta página usa Folhas de Estilos)

Imagens e legendas

Imagem escalável

Imagem com legenda em cima

XHTML

Imagens & legendas

Eiffel tower

Modelo da torre Eiffel no Parque Mini-France

Em HTML não existe um elemento (tag) específico que permita inserir uma imagem com respectiva legenda em um documento web. Um elemento com esta característica foi proposto quando dos estudos para as recomendações do HTML3 (Ver proposta), mas não chegou a ser implementado nem mesmo no HTML4. A seguir mostro uma maneira de simular com CSS o efeito de figura com legenda:

<div class="figura">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="torre Eiffel">
  <p>Modelo da torre
    Eiffel no Parque Mini-France
</div>

A seguir estilize a classe "figura" para formatá-la como você desejar. Por exemplo: para posicionar a figura à direita, em uma largura igual a 25% da largura do texto que a circunda escrevemos as regras CSS abaixo:

div.figura {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figura p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

Na verdade somente as duas primeiras declarações (float e width) são necessárias, as demais foram acresentadas apenas com fins decorativos.

Imagem escalÁvel

Há um problema com este exemplo que mostrei acima. A imagem tem uma largura total fixa e de 136px e a DIV que a contém tem uma largura de 25% da largura do texto que a circunda. Experimente ir diminuindo a largura da janela do seu navegador e observe a figura da torre Eiffel. Você notará que a partir de determinado momento a imagem "sairá para fora da DIV".

Se você conhece a largura de todas as imagens contidas no documento, poderá acresentar uma regra CSS a mais, estabelecendo uma largura mínima para a DIV, conforme mostrado abaixo:

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

Outra maneira é usar uma imagem escalável. Neste exemplo a imagem à direita é uma imagem escalável. Imagens JPEG quando distendidas perdem qualidade e degradam. Contudo se a imagem for no formato SVG, será perfeitamente escálavel e não perderá qualidade. A seguir o código que usamos no exemplo:

<div class="figura">
  <p><img class="escala" src="st-tropez.jpg"
    alt="St. Tropez">
  <p>Os fortes de Saint Tropez ao por do sol</div>

St. Tropez

Os fortes de Saint Tropez ao por do sol

E as regras de estilo :

div.figura {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figura p {
  text-align: center
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.escala {
  width: 100%;
}

O único acréscimo em relação ao exemplo anterior foi a regra CSS para a classe "escala": ela faz com que a imagem dentro da DIV tenha o mesmo tamanho da DIV. (a área do conteúdo, dentro da borda e do padding).

Imagem com legenda em cima

Cap Ferrat

O mar Mediterrâneo nas cercanias de Cap Ferrat

Você pode colocar a legenda da imagem na parte superior usando a regra CSS para formatação como tabela. Basta acresentar aos exemplos anteriores as seguintes regras CSS:

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

O sinal '+' faz com que a regra CSS seja aplicada ao parágrafo que se segue a outro parágrafo. No nosso caso trata-se do segundo parágrafo da DIV, ou seja aquuele que contém a legenda..

(Esta técnica não funciona adequadamente em browsers mais antigos, e em especial quando for usada com imagens escaláveis.)

Imagens no XHTML

A proposta atual (Janeiro 2003) para XHTML2 prevê o elemento CAPTION para ser usado juntamente com OBJECT. Se esta proposta for aceita e tornada uma recomendação no futuro não será necessário usar uma DIV e uma CLASSE e você poderá com XHTML2 escrever a regra CSS assim:

<object data="eiffel.jpg">
  <caption>Modelo da torre
    Eiffel no Parque Mini-France
</caption>
</object>

[CSS Feito] [CSS Válido] [XHTML1 Válido]

Bert Bos
criado em 17 Jan 2001;
atualizado $Data: 2004/01/06 21:54:41 $ GMT