Le tecniche di Image Replacement

Sostituire testo con immagini grazie ai CSS. Analisi delle principali tecniche e confronto tra pro e contro nella loro implementazione

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: