In questo articolo presenterò alcune tecniche di Image Replacement, indicandone
i principali pro e contro. Anzitutto, cerchiamo di capire di cosa parleremo.
Una tecnica di Image Replacement è un modo per sostituire mediante
i fogli di stile un' informazione testuale con un' informazione visuale. Questa
informazione testuale generalmente è un header, cioè il logo o il titolo di
una sezione di una pagina web, ma in via teorica sarebbe possibile rimpiazzare
con un background il contenuto di un' intera pagina web. Ho parlato
di un' informazione visuale, ma in realtà più propriamente avrei dovuto parlare
di immagine di sfondo. Vedremo in seguito il perchè.
La soluzione html ai contenuti visuali
Un informazione visuale, espressa attraverso il tag <img>
ha un contenuto visuale effettivo.
E' buona norma l'uso degli attributi alt e title.
Ricordo che l' alt è un attributo per le immagini che ha molteplici
funzioni:
- Viene mostrato quando l' immagine non è presente sul sito
- Quando l' utente ha impostata l' opzione del browser che consente di non caricare nè
visualizzare le immagini. - Viene riportato il testo associato nei browser testuali
- Viene pronunciato dagli screen reader
L' attributo alt è necessario per la validazione di una pagina html.
Mentre l' attributo title è opzionale e serve per indicare un titolo o una breve
descrizione di un immagine e, anche se non è un attributo obbligatorio, è decisamente
consigliato.
Immagini con contenuti testuali
La maggior parte dei siti professionali come header di ogni pagina html usa
un' immagine con un logo, un brand o una scritta con un font particolare per
far sì che il sito abbia un aspetto grafico accattivante e che l' immagine della
ditta sia facilmente riconducibile a tale logo. Ecco un buon codice html per
riportare un' immagine al posto del classico <h1> testuale.
Supponiamo che la ditta si chiami "Pippo Pippo" e che faccia ombrelli:
<div id="header">
<h1>
<img src="logo.jpg" alt="Logo della ditta Pippo Pippo" title="Pippo Pippo, ombrelli e affini dal 1956">
</h1>
</div>
Pro e contro dell' uso delle immagini
L' uso di immagini con contenuti testuali attraverso il tag img ha, oltre
i vantaggi derivanti dell' uso dell' alt text, il vantaggio che, a differenza
di un' immagine di background, viene stampata di default dai browsers. Ha uno svantaggio
non indifferente però, che è quello di non consentire personalizzazioni del contenuto.
Non è possibile, se non sovrascrivendo l' immagine o modificando l' html, cambiare la presentazione
della ditta con un nuovo logo o un classico header testuale.
Le tecniche di Image Replacement
Veniamo ora alle tecniche di Image Replacement. Tutte le tecniche di image replacement
hanno lo scopo di "nascondere" visivamente una porzione di testo e di mostrare al suo posto
un' immagine che viene indicata attraverso la proprietà background dei css.
La Fahrner Image Replacement (FIR)
Credo che la prima tecnica di image replacement usata nel web sia in assoluto la
Fahrner Image Replacement
sul sito Css Zen Garden.
Css Zen Garden, per i pochi che non lo conoscono, è una dimostrazione di cosa si può realizzare
per mezzo del design basato sui CSS come viene definita sul sito stesso.
L' autore di Css Zen Garden ha provveduto un template base con html e css, consentendo ai partecipanti
la quasi totale modifica della presentazione attraverso i soli fogli di stile. Per far ciò, si è avvalso
della FIR e ne ha consigliato l' uso ai partecipanti. Vediamo di che si tratta, ecco l' html usato proprio nella
versione base di CSS Zen Garden:
<div id="pageHeader">
<h1><span>CSS Zen Garden</span></h1>
</div>
Ed ecco il css:
#pageHeader h1 {
background: transparent url(/001/h1.gif) no-repeat top left;
margin-top: 10px;
width: 219px;
height: 87px;
float: left;
}
#pageHeader h1 span {
display: none
}
In sostanza si tratta di attribuire un background all' h1 e di nascondere il testo
contenuto all' interno dello span modificando la proprietà display e dichiarando
che lo span dell' header non deve essere reso visivamente.
Una tecnica non accessibile
Probabilmente la sezione 508, una legge americana che impone
una sorta di bollino blu per l' accessibilità dei siti web ha sensibilizzato molto i webdesigner
verso l' accessibilità, non solo in America, spingendoli al testing di pagine web con screen reader,
browser testuali e dispositivi alternativi di visualizzazione delle pagine web per persone con disabilità.
Un articolo comparso il 20 Ottobre 2003 su
A List Apart ha presentato l' enorme svantaggio della FIR dal punto di
vista dell' accessibilità. Gli screen reader sono programmi che leggono siti web usati da persone affette
da ipovisione. La maggiorparte degli screen reader visualizza una pagina html mediante il motore di rendering di
Internet Explorer della Microsoft e la legge ad alta voce. Non è consentito nella maggiorparte dei casi disabilitare il foglio
di stile dell' autore attraverso uno screen reader. Quello che è risultato da questo articolo è che un testo che non
viene mostrato, impostandolo a display:none non verrà neanche pronunciato dalla maggiorparte degli screen
reader.
Rendere la FIR accessibile
Curiosando in rete, ho trovato l' idea per rendere la FIR accessibile. Ecco la regola css da applicare allo span innestato
(la regola relativa all' h1 rimane invariata rispetto alla versione originale):
h1 span{
display: block;
width: 0;
height: 0;
line-height: 0; /* attribuisce dimensioni nulle */
overflow: hidden;
clip: rect(0,0,0,0); /* nasconde il testo */
}
L' idea dietro una regola css simile può anche essere prestata ai principi dell' accessibilità per realizzare
sezioni di testo visibili agli screen readers e ai text browsers ma non visualizzate dai browsers moderni.
Un esempio su tutti potrebbe essere la lista delle accesskey di un sito.
Le altre tecniche di Image Replacement
Molti appassionati ed esperti di fogli di stile si sono prodigati per fornire alternative accessibili alla FIR.
Le tecniche di Image Replacement si possono suddividere in due gruppi principali:
- Tecniche con markup aggiuntivo
- Tecniche con markup minimale
Mentre la FIR rientra nel primo gruppo, molti autori si sono orientati verso l' ideazione di tecniche
senza markup aggiuntivo, permettendo così di usare le tecniche in entrambe le fasi di scrittura di una pagina web:
il design-time e il restyle-time. Il desing-time è la fase di stesura del codice html e del foglio
di stile associato, mentre il restyle-time riguarda unicamente la modifica del foglio di stile.
E' facile capire che una tecnica di image replacement con markup minimale consente pieno controllo della presentazione
attraverso immagini senza prevederne l' uso in fase di scrittura dell' html o senza modifiche successive all' html stesso.
Vedremo brevemente alcune delle nuove tecniche di image replacement e ne spiegheremo vantaggi e svantaggi.
Tecniche di Image replacement con markup minimale
In questa sezione presenteremo velocemente le tecniche con markup minimale. Sostanzialmente le tecniche sono due,
ed entrambe purtroppo per le diversità di interpretazione dei vari browser usano degli hack ossia
dei "trucchi" per nascondere alcune proprietà a determinati browsers.
Leahy/Langridge Image Replacement (LIR)
Seamus Leahy e
Stuart Langrigde sono arrivati indipendentemente
e quasi contemporaneamente a questa tecnica senza markup aggiuntivo che sfrutta i principi del Box Model, impostando
ad altezza nulla l' <h1> (e di conseguenza nascondendo il testo mediante la proprietà
overflow) ed usando un padding-bottom per mostrare il background. Ecco il css relativo ad un
<h1>testo da rimpiazzare con un' immagine</h1>
h1{
padding-top: 133px; /*altezza dell' immagine*/
width: 243px;
background-image: url(ex1.gif); /*l' immagine*/
background-repeat: no-repeat;
overflow: hidden; /*nasconde il testo*/
height: 133px; /* Hack di Tantek per WIN IE5.x */
voice-family: ""}"";
voice-family:inherit;
height: 0;
}
Text Indent negativo di Mike Rundle
Mile Rundle
ha pensato invece di portare fuori dall' area visibile il testo dell' header, usando un valore
molto alto di text-indent negativo. Un text-indent negativo ha l' effetto di traslare sulla sinistra
la prima riga di testo di un elemento html. Il risultato in questo caso è che il testo è talmente traslato da non
essere visibile. Purtroppo questa tecnica nella versione originale non funziona sulle versioni di Internet Explorer
per Mac e necessita di un hack.
La Cover-Up span
Ideata da Tom Gilder è attualmente, oltre alla FIR,
l' unica tecnica di image replacement con markup aggiuntivo. Usa uno span senza contenuto
testuale viene anteposto al testo dell' header. Vediamo l' html:
<h1><span></span>Nome del sito</h1>
Lo span attraverso un posizionamento assoluto viene a coprire il testo. Ecco il css:
h1{
position: relative;
width: 300px;
height: 100px
}
h1 span{
position: absolute;
width: 100%;
height: 100%;
background: url(...) no-repeat
}
A differenza delle altre tecniche non usa hack per poter funzionare sul maggior numero di browsers, e personalmente
ritengo che sia la migliore tecnica di image replacement in assoluto dato che è, e soprattutto sarà, compatibile con
tutti i browsers con supporto minimo dei css. L' unico svantaggio è che richiede uno span aggiuntivo.
Per dovere di cronaca, riporto il link verso un altro autore che ha avuto la stessa idea:
Graphical Headings di Levin Alexander.
E la stampa?
Nessuno degli autori qui presentati si è preoccupato nel rispettivo articolo di fornire le regole css per adattare
la sua tecnica di image replacement alla stampa. C'è da dire che un qualsiasi browser di default non stampa le
immagini di background. L' unica tecnica che stampa degnamente il testo dell' header senza aggiunte di un foglio stile
per la stampa è la cover-up span, dato che non naconde il testo ma lo copre soltanto. L' unico neo è che le dimensioni
dell' header testuale in fase di stampa saranno quelle assegnate via css. Ecco il css per ovviare a questo problema:
<style type="text/css" media="print">
h1, h1 span{ position: static; width: auto; height: auto}
<style>
In maniera simile è possibile riadattare le altre tecniche di image replacement per la stampa, basterà
reimpostare ai valori di default le proprietà usate ed eventualmente attribuire un immagine di background
inesistente che ridefinirà quella reale.
Usare javascript?
Su alistapart di recente è stato pubblicato un articolo di
Christian Heilmann che presenta una tecnica
che usa javascript e DOM per effettuare l' image replacement. Se javascript è disabilitato viene mostrato il testo,
mentre se è abilitato e il browser con cui si sta visualizzando la pagina è dom-compatibile, il testo
viene rimosso e sostituito da un img. La tecnica è curiosa e geniale, ma ha ancora qualche
problema. Se tra le impostazioni del browser c'è javascript abilitato, ma le immagini disabilitate, non
verrà mostrato nè il testo nè l' immagine.
Conclusioni e links
In questo articolo abbiamo parlato en passant delle principali tecniche di image replacement.
Le tecniche presentate, a parte la FIR in versione originate, sono tutte accessibili e compatibili con browser di ultima generazione,
browsers testuali e screen reader.
Non c'è modo purtroppo di forzare la stampa delle immagini di background di una pagina web, se non
quello di consigliare all' utente di abilitare la relativa opzione, scelta decisamente opinabile e sconsigliabile.
A questo punto l' unico modo per stampare degnamente una pagina html che usa l' image replacement via css è quella
di consentire la stampa del testo anzichè dell' immagine. Se proprio non si vuole rinunciare alla stampa del logo
e degli header grafici della pagina web, gli unici due modi sono:
- Usare il tag img con adeguato alt text ed evitare le tecniche di image replacement
- Usare la tecnica di Image Replacement con javascript e dom
Inoltre c'è da dire che per la maggiorparte dei siti, a meno che soggetti a frequenti restyling o che
rientrino tra quei siti che presentano diversi stili alternativi, forse la soluzione del tag img
è ancora la più adeguata.
Vediamo ora i link e gli approfondimenti sulle cose di cui abbiamo parlato:
Articoli sulla FIR e le tecniche alternative
Link diretti alle tecniche originali qui presentate:
