9 febbraio 2008  7

Come posizionare correttamente le Emoticons in una pagina HTML

innamorati Le emoticonW (o smiles o, in italiano, sorrisetti o faccine) corrispondo a delle rappresentazioni simboliche di espressioni della mimica facciale umana, che si manifestano in presenza di un'emozione, quali ad esempio lo stupore, la felicità, la disperazione o il sorriso.

Utilizzando simboli appartenenti all'alfabeto, ivi inclusa soprattutto la punteggiatura, si riescono a confezionare opportunamente delle "faccine" stilizzate rappresentanti appunto determinati stati d'animo.

Sono nate principalmente con il primo diffondersi dei sistemi di messaggistica istantanea introdotti con le BBSW: con la comunicazione scritta si sopperiva al mancato uso delle immagini. Successivamente si sono diffuse molto anche nella trasmissione di messaggi istantanei SMSW, ma il loro ambiente di utilizzo principe resta comunque InternetW, dove sono diffusissime nei forumW e nei blogW.

Con l'aumentare della largezza di banda e delle risorse computazionali, la maggiorparte dei sistemi che ne prevedono l'utilizzo, quali appunto forum, instant messagingW e blog, hanno implementato un sistema di trasposizione grafica delle stesse, vale a dire la sostituzione in fase di rendering della pagina con delle vere e proprie immagini (generalmente in formato gif, png o jpg) raffigurante appunto le espressioni in questione sotto forma di simpatiche faccette.

Alcuni esempi di emoticons alfabetiche
:-)  sorriso ;-)  occhiolino :-(  triste :-D  felice
E le equivalenti grafiche
smile_1  sorriso smile_6  occhiolino smile_5  triste smile_7  felice

Il nostro obiettivo è quello di fornire alcuni suggerimenti su come inserire e posizionare correttamente le emoticon all'interno di una pagina HTMLW utilizzando gli strumenti messi disposizione dai fogli di stileW a cascata (CSS), dando per scontato che i lettori abbiano una conoscenza di base sia di questi ultimi che del già citato linguaggio ipertestuale.

Un approccio ragionato

Ipotizziamo che ciascuna combinazione di simboli corrispondente ad un'emoticon venga sostituita in maniera automatica dal nostro CMS (Content Management SystemW) con il seguente tag di immagine:


<img class="emoticon" src="{URI dell'immagine}" alt="{descrizione dell'immagine}" />

dove {URI dell'immagine} corrisponde all'indirizzo assoluto di riferimento dell'immagine sull'host (leggi percorso sul server che ospita il sito web ed il relativo CMS) e {descrizione dell'immagine} corrisponde al testo alternativo associato al tag, da mostrare in caso di mancato reperimento dell'immagine o di impostazione specifica sul browser relativa alla non visualizzazione delle stesse.

E' stata oportunamente indicata una classe di formattazione dell'oggetto <img> proprio per sottolineare la necessita di applicare a tutte le immagini che vanno a rappresentare un'emoticon lo stesso stile di rappresentazione.

Il nome associato alla classe e puramente indicativo e può essere sostituito a piacere. A questo punto il primo passo è definire la stessa in maniera tale che garantisca un corretto allineamento dell'immagine in rapporto al testo ed alla formattazione dei paragrafi che lo contengono.

Una buona base è la seguente:

img.emoticon {
    border: none;
    position: relative;
    float: none;
    padding: 0;
    margin: 0;
    vertical-align: middle;

Successivamente è necessario fare delle opportune valutazioni sia sulle dimensioni delle immagini associate alle emoticon che sulle dimensioni del testo standard utilizzato all'interno della pagina HTML e soprattutto sulla spaziatura di riga associata ai paragrafi (interlinea).

Infatti se si utilizza una dimensione del font molto inferiore rispetto a quella standard delle emoticon utilizzate, si corre il rischio che l'inserimento delle stesse vada ad inficiare sia l'interlinea (aumentandolo solo nei casi in cui è presente l'immagine) che la fluidità del testo all'interno del paragrafo.

! smile_2 Questo è un esempio di visualizzazione corretta smile_1 !

Per questo motivo è necessario valutare attentamente i valori citati: ipotizzando una dimensione delle immagini pari a 18x18 pixel ed una dimensione del font (ad esempio con grazie, quindi appartenente alla famiglia serif) pari a 12 pixel, sarà necessario impostare una altezza di linea pari a 20 pixel per avere dei risultati di visualizzazione ottimali.

Nello specifico si potrebbe impostare lo stile di paragrafo come segue:

p {
    font-size: 12px;
    font-family: "Times New Roman", Times, serif;
    line-height: 20px; 
}

Voglio rammentare che l'impostazione della proprietà line-height implica che la linea sia automaticamente centrata all'interno dello spazio indicato a meno di specifiche differenti mediante la proprietà vertical-align (già usata per la classe img.emoticon) che comunque mi sento caldamente di sconsigliare.

Nell'esempio indicato si è utilizzato un font serif: i caratteri sans-serif, a parità di impostazione della proprietà font-size, risultano leggermente più grandi, ma mantenendo le proporzioni indicate il risultato in termini visivi non dovrebbe cambiare di molto.

Ad ogni modo, per differenti grandezze sia di carattere che di immagini associate alle emoticon, si può impostare in maniera adeguata la prorietà line-height con questa semplice regoletta empirica:

line-height: (altezza emoticon in pixel + 2)

Il tutto naturalmente a patto che l'altezza in pixel dell'immagine sia maggiore della grandezza in pixel impostata per il font utilizzato.

Troubleshooting

A volte può accadere che, pur avendo associato correttamente la classe all'immagine ed aver inserito la definizione appropriata nel foglio di stile, la emoticon non venga allineata correttamente o non risulti avere le caratteristiche di formattazione desiderata.

In questo caso è necessario analizzare tutto il codice HTML della pagina per verificare l'eventuale presenza di elementi "contenitori" <div> ai quali sia stato associato un identificativo univoco, ovvero una proprietà ID.

Se si dovesse verificare questa eventualità è necessario individuare l'elemento contenitore "padre" (ovvero l'elemento <div> che contiene tutte gli altri tag di pagina ivi incluse le immagini relative alle emoticon) ed identificare appunto il suo ID: posto ad esempio che esso sia uguale a content, sia andrà a ridefinire la classe di cui sopra, come segue:

#content img.emoticon {
    border: none;
    position: relative;
    float: none;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

La proprietà ALT

Come è noto, per rendere il codice HTML prodotto valido è necessario valorizzare la proprietà ALT relativa ad ogni tag <img> presente nella pagina.

Per quanto riguarda le emoticons, esistono due scuole di pensiero. La prima valorizza tale proprietà con il significato in inglese relativo al codice utilizzato (ad esempio "smile" per :-) ). Una seconda invece sostiene che è più opportuno inserire il codice stesso.

Da un punto di vista nostalgico, sarei più propenso per la seconda strada ma ritengo che sia una scelta assolutamente relativa al proprio gusto personale.

Esprimi il tuo giudizio

Commenti (7) -

notoriousxl
notoriousxl
09 feb 2008 alle 15:06  01
Ottimo post, salvato subito su delicious! ;)
Avevo anche intravisto un articolo su A List Apart in cui veniva trattata la questione dell'altezza ottimale della linea - quando mi serviranno, studierò meglio entrambi! ;)

È anche possibile definire, sempre tramite CSS, la dimensione delle immagini in maniera proporzionale a quella del font; ma, a meno che l'utente non utilizzi un browser gecko su sistema mac os x - in questo caso, infatti, viene applicato un filtro di antialiasing alla riscalatura delle immagini - l'iconcina risulterà parecchio sgranata. Frown
Per lo meno, ho provato questo effetto utilizzando dimensioni di img in em...
Cristiano
Cristiano
09 feb 2008 alle 15:27  02
notoriousxl ha scritto:
... Avevo anche intravisto un articolo su A List Apart in cui veniva trattata la questione dell'altezza ottimale della linea ...
E' stato pubblicato qualche tempo fa: parla di argomenti sostanzialmente diversi (anche se ben conosciuti da chi sviluppa), ma comunque ti consiglio caldamente di leggerlo perchè è molto ben fatto.

... È anche possibile definire, sempre tramite CSS, la dimensione delle immagini in maniera proporzionale a quella del font; ...
Sconsiglio a priori questo genere di impostazioni: su immagini già piccole il risultato è pessimo e comunque la resa non è crossbrowser. Meglio usare un set di immagini ridimensionate in modo nativo. Wink
notoriousxl
notoriousxl
09 feb 2008 alle 15:50  03
ti consiglio caldamente di leggerlo perchè è molto ben fatto.
Parli di questo vero?
www.alistapart.com/articles/howtosizetextincss
;)
Cristiano
Cristiano
09 feb 2008 alle 20:01  04
@ notoriousxl:
Esatto !

P.S.: Per il futuro: per quotare usa i BBCODE, oppure usa gli appositi pulsanti Quota in fondo a ciascuno commento o nella toolbar immediatamente sopra la textarea. Inserire codice HTML non sortisce alcun effetto, tranne quello di costringere il sottoscritto a dover correggere il commento Wink
notoriousxl
notoriousxl
09 feb 2008 alle 20:07  05
Cristiano ha scritto:
Per il futuro: per quotare usa i BBCODE
Sì, me ne ero accorto, ma troppo tardi. Tong Sono troppo abituato ad usare il blockquote, ormai, che non faccio più neanche caso ai pulsanti. Frown
Cristiano ha scritto:
Inserire codice HTML non sortisce alcun effetto, tranne quello di costringere il sottoscritto a dover correggere il commento
Tong
notoriousxl
notoriousxl
09 feb 2008 alle 21:37  06
Scusa il doppio post... ma mi sono dimenticato una cosa Tong
Per quanto riguarda le emoticons, esistono due scuole di pensiero. La prima [...] significato in inglese relativo al codice utilizzato [...] Una seconda invece sostiene che è più opportuno inserire il codice stesso.
Anche io preferisco la seconda: in un CMS privo di smile grafici, o in cui sono stati disattivati, l'utente scriverebbe "Smile", non "smile"! ;) E ha un enorme vantaggio: è indipendente dalla lingua in uso!
Sarebbe interessante sapere anche come le emoticon "testuali" vengano interpretate da uno screen reader... ;)
Cristiano
Cristiano
10 feb 2008 alle 13:17  07
@ notoriousxl:
Osservazione interessante: in realtà, purtroppo temo che gli screen reader, e più nello specifico quelli abbinati ai sintetizzatori vocali, interpetino l'emoticon per semplice punteggiatura (perlomeno il Jaws si comporta esattamente così).
Per ciò che concerne inoltre le specifiche W3C, si dovrebbe definire mediante il tag ALT una breve descrizione di ciò che rappresenta l'immagine: nel nostro caso, della semplice punteggiatura al posto del vocabolo Smile non sarebbe significativa, purtroppo.
Il tutto ovviamente nei termini previsti dagli standard di accessibilità sempre consigliati dal W3C.

Pingbacks and trackbacks (1)+

Aggiungi Commento

biucitecode
  • Commento
  • Anteprima
Loading


| |   |  

Codice QR

Codice QR - cristianofino.net

Ultimi Commenti