Semantica scorretta: header con parole non distanziate

Un effetto grafico piuttosto comune su siti espositivi non particolarmente carichi di contenuto per pagina è quello di formattare i titoli con le parole tra di loro non distanziate, ma colorate con colori diversi (spesso alternati). Sebbene questo effetto sia assolutamente semplice da ottenere mediante poche e semplici regole CSS, soffermiamoci su quei piccoli accorgimenti aggiuntivi necessari per evitare di rompere il modello semantico ed ottenere i soliti effetti imprevedibili ed imprevisti. Analizziamo, quindi, varie idee di approccio al problema per approfondimenti successivi.

Nell’eventualità che non sia chiaro il tipo di risultato che voglio ottenere, vi consiglio di dare una occhiata al sito di Flavio Naspetti, dove ho utilizzato proprio il suddetto effetto.

La soluzione tradizionale

La soluzione tradizionale è tanto semplice quanto semanticamente scorretta. Essa si basa sullo scrivere direttamente nel codice XHTML le parole non staccate tra di loro e di utilizzare degli elementi SPAN per gestire l’alternanza dei colori. In soldoni:

<style>
.rosso {color: #f00; }
.blu { color: #00f; }
</style>

<h3><span class="rosso">Mio</span><span class="blu">titolo</span></h3>

È facile intuire, e nel farlo ci aiuta eventualmente un browser che non supporta i CSS (o con questi ultimi disabilitati), che questa soluzione sia semanticamente inesatta: abbiamo dovuto, infatti, alterare il contenuto del tag H3 da Mio titolo a Miotitolo che, effettivamente, non solo non ha alcun significato in lingua italiana, ma risulta illeggibile nel caso in cui non dovessimo avere a disposizione un supporto ai fogli di stile che introducano l’alternanza di colori esplicitata nelle due classi “rosso” e “blu”.

Paranoia semantica?

Direi proprio di no, se ricordiamo che il modo in cui gli spider dei motori di ricerca scrutano la nostra pagina è quello semplice e lineare di un browser testuale tipo lynx e soprattutto ragioniamo su quanta importanza i suddetti motori diano alle componenti testuali racchiuse nei tag di heading! Avere contenuto non valido in un elemento di identificazione quale può essere un tag H significa necessariamente incorrere in effetti indesiderati in fase di indicizzazione da parte degli spider.

Una prima soluzione: la regola word-spacing

In nostro soccorso, almeno apparentemente, arriva la regola word-spacing che consente di impostare la distanza tra le parole di un paragrafo. Essa può assumere anche valori negativi, facendo così “aderire” le parole a quelle immediatamente precedenti. Definiamo questo valore (negativo) in termini non di pixel o punti, ma di “em” (altezza del carattere ‘x’ alla dimensione corrente) così da non rischiare di rompere il layout in caso di alterazione della dimensione del carattere su schermo. La scelta del valore che deve assumere la proprietà word-spacing non è, in linea teorica, di facile determinazione, in quanto a voler essere rigorosi esso è funzione del typeface del font e persino dei due caratteri che porterà ad aderire (per via del kerning), tuttavia un valore variabile tra -0.3em e -0.4em è generalmente soddisfacente (a titolo d’esempio io uso -0.33em su font sans serif e -0.38em su font serif). Aggiungiamo, insomma, la seguente regola CSS alle precedenti:

.attaccato {word-spacing: -0.3em; }

E, nel codice XHTML:

<h3 class="attaccato"><span class="rosso">Mio</span> <span class="blu">titolo</span></h3>

È evidente il nostro ripristino della correttezza del modello semantico: il contenuto dell’header è Mio titolo come è giusto che sia, non più, quindi, Miotitolo. Abbiamo risolto il problema? Per colpa di un metodo del tutto personale di interpretazione della regola word-spacing sa parte dei browser di famiglia Konqueror ed Internet Explorer dobbiamo scartare questa soluzione, pur corretta, a favore di una che sia più cross-browser.

La soluzione cross-browser: i margini negativi.

Spesso capita che un webdesigner debba trovare il giusto punto di mediazione tra l’osservanza degli standard e il risultato restituito dalla miriade di browser, spesso poco precisi, su cui va a testare il proprio lavoro. È, purtroppo, proprio questo il caso in cui ad una soluzione elegante e precisa dobbiamo preferire un workaround che, pur semanticamente ancora corretto, è decisamente meno pulito in termini di codice. Se testiamo il codice precedente sotto, ad esempio, Safari notiamo come le regole di word-spacing sembrino apparentemente ignorate, nonostante questo browser dichiari di supportare suddetta proprietà CSS. In realtà la regola non è ignorata, ma a creare problemi sono gli elementi SPAN annidati che “rompono” il suo scope di applicazione che da Safari viene vista come applicabile solo ad elementi allo stesso livello di annidamento. Effettivamente anche sotto il browser di casa Apple questa forma funziona perfettamente, attaccando le parole “Mio” e “titolo”:

<h3 class="attaccato">Mio titolo</h3>

Mentre a quanto pare lo stesso browser non è in grado di far aderire parole annidate in tag differenti (nel nostro caso nei due span distinti “rosso” e “blu”), come se facessero parte di isole distinte e separate, e, pertanto, non “avvicinabili”. Un possibile workaround consiste nell’utilizzare i margini negativi:

<style>
.rosso {color: #f00; margin-left: -0.3em;}
.blu { color: #00f; margin-left: -0.3em;}
</style>

<h3><span class="rosso">Mio</span> <span class="blu">titolo</span></h3>

Questo risolve il problema, pur non essendo elegante come la soluzione precedente. Infatti:

1. Non è corretto dare definizioni posizionali ad elementi di formattazione stilistica puramente estetici, come la definizione dei colori.
2. Probabilmente sono necessarie ulteriori regole CSS “pure” (cioè senza alterazione dei margini) per la prima parola del titolo, per evitare che sia 0.3em a sinistra del contenuto sottostante, oppure nell’eventualità che vogliamo alterare solo parti di una parola, non una parola intera (oppure segni di interpunzione ed in generale caratteri e gruppi di caratteri che sono già aderenti alla parola che li precede e per i quali ci interessa solo applicare l’alternanza dei colori).

Un esempio di questa soluzione, sporca ma funzionante, ma almeno semanticamente valida, è presente sul sito di Flavio Naspetti su cui vi invito a spulciare un po’ il codice per un esempio pratico di questa tecnica. La scelta se usare la seconda o la terza tecnica è, ovviamente, a gusto del designer e di quanto sia disposto a sacrificare in termini di fruibilità cross-browser piuttosto che alla correttezza del modello. Io, intanto, ho cercato di spiegarli entrambi. Alla prossima!