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 didascali 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>