CSS Zibaldone

• Home
  • Traduzioni
    • Risorse su Gecko
      • Immagini, tabelle e gap misteriosi

Immagini, tabelle e gap misteriosi

Non c'era quasi nessun problema quando si è cominciato a creare pagine web, con i soliti design basati sulle tabelle annidate e su molte immagini. Anche quando si inserisce un logo che si sposa bene col design, o si usano GIF spaziatrici da un pixel, i principi (e i pericoli) restano quasi gli stessi. Fino a poco tempo fa questo approccio funzionava, perché i browser di solito rendevano una cella di tabella esattamente delle stesse dimensioni dell'immagine contenuta.

Ma si arrivò al 2001 e alla nascita di browser basati sugli standard che rendevano le pagine usando HTML e CSS in luogo dei loro algoritmi privati. Grazie ad un oscuro capitolo delle specifiche CSS, ogni design basato su un layout preciso di piccole immagini in celle di tabella divennero dei disastri visivi. Tutto quello che serve è un browser moderno e il giusto DOCTYPE. Boom!

Contenuti

• 1. I componenti
• 2. Come è costruito il contenuto inline
• 3. Una soluzione?
  • 3.1 Impostare le immagini come blocchi
  • 3.2 Usare l'allineamento verticale
• 4. Cercando una soluzione
• 5. Raccomandazioni
• 6. Link correlati
• 7. Informazioni sul documento originale

1. I componenti

Diamo uno sguardo da vicino all'origine del problema e del perché questo è un problema. Iniziamo con un semplice caso, illustrato nella Figura 1: una tabella di una cella contenente un'immagine.

Ovviamente la maggior parte dei design sono parecchio più complicati di questo, ma non abbiamo bisogno di altro per i nostri scopi. Un'immagine, una cella: quanto basta. All'apparenza non c'è nulla di sbagliato in questo esempio, ma non doveva esserci, in quanto si tratta di un esempio di come i browser si comportano di solito.

Ora guardiamo come appare l'esempio in un browser moderno quando la pagina ha un DOCTYPE rigoroso.

Notate lo spazio aggiunto sotto l'immagine nella Figura 2. La marcatura resta la stessa, è la modalità di rendering ad essere diversa. Invece di stringere l'immagine stessa, il browser ora la confina sulla riga su cui si trova. L'immagine si trova su una riga perché le immagini sono contenuto inline. Ecco tutto.

2. Come è costruito il contenuto inline

Al fine di comprendere quanto è successo, osserviamo la costruzione di un box di riga, il posizionamento delle immagini all'interno di un box di riga e il posizionamento di un box di riga all'interno di una cella di tabella. Cominciamo da un box di riga con del testo, mostrato nella Figura 3.

La parte fondamentale della Figura 3 è la linea di base (rappresentata dalla linea blu) e il suo posizionamento all'interno del box di riga. Il posizionamento esatto della linea di base dipende dal font del box di riga (rappresentato in rosso) che è determinato dalla famiglia di font dell'elemento che contiene il box di riga. Non è possibile per un autore modificare la posizione della linea di base direttamente, così dove finisce è dove sarà sempre. Lo spazio sotto la linea di base viene detto spazio del discendente poichè è qui che vengono rappresentati i discendenti in lettere minuscole come "j", "y", e "q". La Figura 4 mostra cosa accade quando aggiungiamo un'immagine.

Notate dove si trova l'immagine: il suo limite inferiore viene allineato con la linea di base del box di riga. Questa posizione può essere modificata con l'allineamento verticale (ne parleremo tra breve) ma quasi nessuno lo fa. Togliamo il testo e lasciamo solo l'immagine, come nella Figura 5.

Abbiamo un'immagine sulla linea di base di un box di riga che contiene solo l'immagine. Consideriamo ora cosa succede quando mettiamo questa linea in una cella di tabella (Figura 6).

Ci siamo: si creano spazi mai visti prima. Va peggio con le immagini piccole, come quelle alte un pixel, mostrate nella Figura 7.

Ora c'è ogni genere di spazio. Ce n'è abbastanza per far impazzire un designer.

3. Una soluzione?

C'è un ovvia soluzione: smettere di creare design dipendenti dalle tabelle e pieni di immagini da un pixel, ma di sicuro non è pratica per molti designer e di sicuro non aiuta a sistemare i vecchi design che vengono all'improvviso spazzati via nei browser moderni. C'è anche un'altra ovvia soluzione: assicuratevi che il vostro documento non causi la modalità di rendering standard.

Potete farlo usando un DOCTYPE che causi la modalità quirks o la modalità almost standards, o eliminando completamente il DOCTYPE. La mancanza di un DOCTYPE impedisce la validazione e non è raccomandata. Per gli autori che lavorano con documenti obsoleti, la modalità quirks è la scelta migliore. Nel caso in cui un autore stia scrivendo un nuovo documento o passando ad un design standard, la modalità almost standards è probabilmente una scelta migliore.

Ovviamente i documenti realizzati in XHTML o HTML Strict causeranno la modalità standard, così dobbiamo vedere due semplici modi per affrontare il problema in questi documenti e un certo numero di modi di usare queste soluzioni.

3.1 Impostare le immagini come blocchi

La prima soluzione, che funziona con i design dalla grafica più avanzata, è convertire l'immagine da elemento inline a elemento di blocco. Fatto questo, essa non genererà più un box di riga e il problema scompare (presupponendo che l'immagine sia l'unica cosa che occupa la cella di tabella). Nei termini più semplici, aggiungiamo uno stile come:

td img {display: block;}

Consideriamo la regola applicata a questa marcatura:

<table cellspacing="0" 
cellpadding="0" border="0" width="500">
<tr><td>
<img src="nav1.gif">
<img src="nav2.gif">
<img src="nav3.gif">
<img src="nav4.gif">
<img src="nav5.gif"></td></tr>
<tr><td style="background: red;">
<img src="smallred.gif" height="1" 
width="1"></td></tr>
<tr><td>
<p style="margin: 0.5em;">This is text in another cell of the
 table.  Within the textthere is an icon <img src="icon2.gif">
 that indicates a link to another site.  It's very worldly.  Lorem
ipsum, dolor sit amet...</p></td></tr></table>

Come vediamo nella Figura 8, funziona bene in alcuni casi ma non tanto bene in altri.

La sottile linea rossa mostra che la GIF spaziatrice da un pixel rende la cella alta un pixel, come voluto. Sfortunatamente, i bottoni nella cella superiore sono ora tutti di blocco e vengono impilati uno sopra l'altro invece di venire mostrati affiancati.

Una possibile soluzione è aggiungere una classe alle immagini che devono essere di blocco e quindi scrivere la regola per selezionarle.

td img.decoration {display: block;}
<td><img src="reddot.gif" class="decoration"></td>

A seconda del design, tuttavia, questo potrebbe portare a molte classi aggiunte per questo semplice effetto, specialmente nel caso in cui abbiamo molte celle da un pixel usate per creare delle linee una sopra l'altra. Se avete una marcatura con questo approccio, potete dare una classe alla riga di tabella invece che alle immagini. Quindi avreste:

tr.decoration img {display: block;}

... insieme con la seguente modifica nella marcatura:

<tr class="decoration"><td 
style="background: red;">
<img src="smallred.gif" 
height="1" width="1">
</td></tr>

Il risultato è che solo le immagini spaziatrici saranno rese di blocco, tralasciando le altre. Questo ci porta al risultato che vediamo nella Figura 9.

In alternativa potete dare una classe alle celle di tabella invece che alle righe, se va meglio per voi. In ogni caso, tuttavia, trasformare le immagini in elementi di blocco potrebbe avere effetti imprevisti se le vostre celle di tabella hanno più di un'immagine, come abbiamo visto nella Figura 8.

Naturalmente, pur avendo una sola cella spaziatrice nella Figura 9, c'è ancora uno spazio indesiderato sotto i bottoni di navigazione. Per eliminare questo spazio basterebbe mettere ogni immagine in una cella e renderle tutte di blocco, ma lasciamole tutte insieme in una sola cella per illustrare un altro approccio.

3.2 Usare l'allineamento verticale

L'altra soluzione è lasciare l'immagine inline e alterare il suo allineamento verticale rispetto al box di riga. Per esempio potremmo provare:

td img {vertical-align: bottom;}

Questo fa in modo che il limite inferiore delle immagini sia allineato con la parte inferiore del box di riga, invece che con la linea di base. Come possiamo vedere nella Figura 10, questo ha l'effetto voluto: lo spazio sotto le immagini della barra di navigazione è sparito. Tuttavia, la cella decorativa è ancora troppo alta e le altre immagini non sono allineate rispetto al testo intorno.

Possiamo dare di nuovo una classe alle immagini, alle celle e alle righe per ridurre l'effetto. Tuttavia questi stili non risolvono il problema delle immagini di un pixel, dato che il box di riga che le circonda avrà l'altezza del font della cella, e non si restringerà. L'immagine si sposta sulla parte inferiore della cella, ma la cella non si stringe attorno all'immagine. Inoltre qualsiasi altra immagine con un'altezza inferiore al box di riga ha ancora uno spazio attorno (come per la cella spaziatrice rossa). L'immagine di un pixel viene allineata ora con la parte inferiore della cella, ma il box di riga è sempre delle dimensioni del font.

Guardate per esempio la Figura 11, dove la dimensione del font viene aumentata di molto. Le immagini della barra di navigazione ora hanno uno spazio intorno, e lo spaziatore rosso è anche più grande.

È difficile evitarlo, perché in questo approccio le immagini sono ancora inline e partecipano ancora alla creazione del box di riga. Se il box di riga diventa più alto, compare lo spazio attorno alle immagini.

4. Cercando una soluzione

Grazie all'implementazione di Mozilla dei CSS2, il problema delle immagini inline all'interno delle celle di tabella è giunto all'attenzione del Gruppo di Lavoro sui CSS. Ci sono state molte proposte per risolvere il problema, ma uno degli approcci più promettenti è la proprietà line-box-contain, che è stata proposta per i CSS3. Adottando questa proprietà i browser potrebbero emulare il tradizionale comportamento del restringimento attorno al contenuto con la seguente regola:

td {line-box-contain: font replaced;}  /* proposta per i CSS3 */

There are other possible fixes contained within the current CSS3 Working Drafts, such as line-height-policy. Obviously, the sooner a solution can be found and implemented, the happier authors everywhere will be.

5. Raccomandazioni

Mancando il supporto ai CSS3, è difficile fornire un approccio graduale alla soluzione del problema, perché la soluzione ottimale per un dato documento dipende soprattutto dalla sua struttura. Se il vostro documento usa una marcatura di transizione, assicuratevi che il vostro DOCTYPE segua questa linea e non causi la modalità standard. Questo impedirà ai browser di usare il rendering standard e i problemi saranno evitati. Se usate una marcatura rigorosa, o volete essere in modalità standard, ricordate queste linee guida:

• Ogni immagine singola in una cella di tabella (per esempio immagini da un pixel) dovrebbe essere resa di blocco.
• Ogni immagine in una cella di tabella con altre immagini dovrebbe essere allineata verticalmente con la parte inferiore del box di riga.
• Ogni immagine in una cella di tabella con altre immagini e del testo dovrebbe avere il suo allineamento verticale modificato quanto necessario, se non del tutto.

Con una saggia unione di approcci e con la riduzione dei trucchi con le immagini da un pixel (che in browser che supportano i CSS non sono necessari) è possibile ridurre questo strano effetto del supporto agli standard. La soluzione migliore sarebbe quella di assicurarsi che le immagini siano sempre in una cella propria, permettendo così agli autori di renderle di blocco, ma come sempre questo dipende dal design dell'autore.

6. Link correlati

• La modalità Almost Standards di Gecko
• La modalità quirks di Mozilla

7. Informazioni sul documento originale