Fogli di Stile per il Web
suggerimenti & trucchi sui CSS

Figure & didascalie

Lo HTML non ha un elemento che permetta di inserire una figura con didascalia. Una volta è stato proposto (vedere HTML3) ma mai adottato nello HTML4. Ecco qui un modo per simulare un tale elemento figura:

<div class="figure">
 <p><img src="eiffel.jpg" width="136"
 height="200" alt="Eiffel tower">
 <p>Scale model of the
 Eiffel tower in Parc Mini-France
</div>

Dopo nel foglio di stile si usa la classe "figure" per formattare la figura nel modo voluto. Per esempio, per rendere la figura flottante a destra, dentro uno spazio pari al 25% dell'ampiezza dei paragrafi circostanti, queste regole servono allo scopo:

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

Di fatto, solo le prime due dichiarazioni (float e width) sono essenziali, il resto è semplice decorazione.

ridimensionare un'immagine

C'è un problema qui e cioè che l'immagine potrebbe essere troppo larga. In questo caso, l'immagine è sempre 136 px larga e il DIV è il 25% del testo circostante. Quindi se si restringe la finestra, potrebbe essere che l'immagine ecceda il DIV (provare!).

Se si conosce l'ampiezza di tutte le immagini nel documento, si può aggiungere un'ampiezza minima al DIV, così:

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

Un altro modo è ridimensionare l'immagine stessa. Cioè quello che abbiamo fatto con l'immagine qui sulla destra. Come si può probabilmente vedere se si allarga molto la finestra, le immagini JPEG non si ridimensionano molto bene. Ma se l'immagine è un diagramma o un grafico nel formato SVG, il ridimensionamento funziona meravigliosamente. Ecco qui il codice di mark-up usato:

<div class="figure">
 <p><img class="scaled" src="st-tropez.jpg"
 alt="St. Tropez">
 <p>Saint Tropez and its
 fort in the evening sun
</div>

e questo è il foglio di stile:

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

L'unica aggiunta è l'ultima regola: essa rende l'immagine tanto larga quanto l'interno del DIV (l'area dentro il bordo e il padding).

mettere la didascalia in cima

Si può anche mettere la didascalia in cima, dicendo al browser che la figura dovrebbe essere formattata come una tabella. Semplicemente aggiungere queste regole al foglio di stile delle sezioni precedenti:

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

Il '+' fa applicare la regola ad un P che segue un altro P. Che significa in questo caso che la fa applicare al secondo P della figura, quello che contiene la didascalia.

(Questa tecnica può dare qualche bug nei browser più vecchi, specialmente quando combinata col ridimensionamento dell'immagine, come fatto qui.)

Figure in XHTML

L'attuale (Gennaio 2003) proposta per lo XHTML2 ha un elemento CAPTION (didascalia), che può essere usato con OBJECT. Se questa proposta viene accettata, non sarà più necessario usare DIV e CLASS ma, almeno nel XHTML2, si potrà scrivere:

<object data="eiffel.jpg">
 <caption>Scale model of the
 Eiffel tower in Parc
 Mini-France</caption>
</object>