Tecniche di Text Replacement in HTML/CSS

Il modo corretto di inserire titoli in grafica in una pagina Web è quello per sostituizione tramite i fogli di stile (vedi Progressive Enhancement in Accessibilità e Usabilità: unobtrusive Javascript). Questa tecnica permette di rendere accessibile il contenuto del sito a prescindere dalla visualizzazione grafica imposta dai fogli di stili. Inoltre, crawler e spider, avranno una lettura corretta dell’HTML ignorando la sostituzione grafica offerta all’utente finale. Inserire direttamente un’immagine (TAG img), infatti, rende il testo del titolo inaccessibili ai normali lettori ASCII (crawler, spider, blog plugin, screen-reader, etc…).
Altro vantaggio da non sottovalutare è la possibilità di caricare un foglio di stile in relazione alla lingua, rendendo in questo modo il sito localizzato anche a livello di immagini.
La tecnica di sostituizione tramite CSS può essere applicata limitatamente anche a siti Web già online, dove l’HTML, per varie ragioni, non è alterabile. La condizione necessaria e sufficiente affinchè si possa applicare la tecnica di sostituzione è quella di poter accedere in modo univoco al titolo/testo da sostituire. Ad esempio, se abbiamo una condizione di questo tipo:

1
<h1 id=”titolo_uno”>Questo è il titolo numero uno</h1>

Grazie all’attributo id presente nel TAG H1, un possibile codice CSS potrebbe essere:

1
2
3
4
5
h1#titolo_uno {
    text-indent:-1000000px;
    display:block;width:100px;height:30px;
    background: url(images/titolo-in-grafica.gif) no-repeat;
}

Non avendo a disposizione un selettore univoco, come l’id del precedente caso, le cose ovviamente si complicano, e ogni caso va analizzato separatamente, cercando di recuperare univocità nella struttura DOM HTML.

Se invece siete voi a scrivere il codice HTML, consiglio questa sintassi, che garantisce una buona taggatura:

1
<h1 id=”titolo_uno” title=”Questo è il titolo numero uno”><span>Questo è il titolo numero uno</span></h1>

Ed il suo relativo CSS:

1
2
3
4
5
h1#titolo_uno span { display:none }
h1#titolo_uno {  
    display:block;width:100px;height:30px;
    background: url(images/titolo-in-grafica.gif) no-repeat;
}

In questo modo si evita il text-indent:-1000000px, rendendo tutto più pulito, nonostante l’aggiunta dello span. Il testo vero e proprio scompare grazie allo span ma rimane il title (tooltips) sopra al titolo in grafica.
Questa procedura ha il grosso vantaggio di non richiedere Javascript per essere utilizzata, rendendola semplice e facile da applicare anche per i meno esperti.

4 commenti a: “ ”

  1. 24 giu, 2008 Angelo:

    Usare il text-indent così non mi sembra correttissimo, però con la seconda soluzione si risolve tutto.. mi piace, è una buona tecnica..la terrò in considerazione per i prossimi lavori!

    RispondiQuota
  2. 24 giu, 2008 Giovambattista Fazioli:

    @Angelo: concordo, il text-indent normalmente è una “pezza” quando non è possibile scrivere un codice HTML migliore. La seconda, invece, la uso sempre anch’io quando ho a che fare con titoli che “possono” essere sostituiti da grafica più avanti.
    Nei prossimi giorni presenterò anche un’altra tecnica davvero interessante per sostituire testo con grafica… poi mi dirai se è “simpatica” come l’ho trovata io :)

    RispondiQuota
  3. 24 giu, 2008 Angelo:

    non mancherò! ;)

    RispondiQuota
  4. 25 giu, 2008 Tecniche di Text Replacement in Flash | Undolog.com:

    [...] Text Replacement che presento oggi è, per certi aspetti, davvero interessante. A differenza della classica sostituizione per immagine tramite CSS, questa tecnica usa un filmato Flash per sovrascrivere i titoli del nostro sito. Nonostante sia un [...]

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
                   <code></code> // blocco generico
                   [cc_actionscript][/cc_actionscript] // Actionscript
                   [cc_actionscript3][/cc_actionscript3] // Actionscript 3
                   [cc_css][/cc_css] // CSS Style Sheet
                   [cc_html][/cc_html] // HTML
                   [cc_js][/cc_js] // Javascript
                   [cc_objc][/cc_objc] // Objective-C
                   [cc_php][/cc_objc] // PHP
                   [cc_sql][/cc_sql] // SQL