Uno dei problemi più ricorrenti in fatto di sviluppo di pagine web è la corretta gestione del charset, cioè il set di caratteri (o codifica) con il quale viene scritto (e successivamente interpreatato) il nostro documento HTML. Il problema riguarda la corretta visualizzazione di alcuni caratteri come, nel caso dell’Italiano, le lettere accentate.
In questo articolo vi spiegherò cos’è il charset, qual’è il giusto charset per la lingua italiana e come risolvere il problema delle lettere accentate in HTML.
Il charset ISO-8859-1
Il charset utilizzato per la corretta formattazione di documenti in italiano è ISO-8859-1 (o Latin 1) che rappresenta il set di caratteri tipico dell’europa occidentale.
Questo charset, che appartiene alla famiglia ISO-8859, contiene le lettere dell’alfabeto, i numeri, la punteggiatura e vari simboli tipici della nostra lingua e delle altre lingue di derivazione latina (il set contiene 191 caratteri originati dall’alfabeto latino ed oggi ampiamente diffusi nel mondo occidentale). Tra i lionguaggi inclusi in questo set di caratteri ci sono, oltre all’italiano, l’inglese (UK e USA), il tedesco, lo spagnolo e il portoghese e molte altre (il francese, invece, non rientra nell’ISO 8859-1 ma nel set ISO-8859-15).
ISO-8859-1 e Windows-1252
La codifica ISO-8859-1 è conosciuta anche con altre codifiche che rappresentano dei suoi pseudonimi: iso-ir-100, latin1, l1, csISOLatin1, IBM819, CP819.
Spesso la codifica ISO-8859-1 viene considerata equivalente di Windows-1252 ma questa convinzione non è del tutto esatta, in quanto in quest’ultima mancano i codici tra il 128 e il 159 (in esadecimale, tra 0x80 e 0x9F) e ne aggiunge altri che le consentono di coprire correttamente anche i caratteri della lingua Francese.
Alcuni browser, se riconoscono il charset ISO-8859-1, passano automauticamente a Windows-1252 in quanto ritenuto più "internazionale".
Impostare il charset di una pagina web
Per definire correttamente il set di caratteri utilizzato in una pagina web scritta in HTML è necessario utilizzare il tag <meta>. Di seguito un esempio di codice da inserire nell’intestazione della pagina:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
Specificando questa intestazione avremo buone speranze (non la certezza!) che i nostri utenti riusciranno a leggere correttamente il testo scritto nel nostro documento.
Lettere accentate ed entità HTML
I caratteri che creano maggiori problemi (e maggiori mal di testa ai webmaster italiani) sono i caratteri accentati: se il nostro documento è interpretato correttamente secondo il charset ISO-8859-1 non avremo problemi e pertanto potremo tranquillamente scrivere nel codice sorgente del documento HTML le lettere accentate (come ad esempio à o é); in caso contrario, ad esempio se la codifica del nostro documento è UTF-8, dovremo avere la premura di scrivere al posto delle lettere accentate la corrispondente entità HTML. Vediamo di seguito una semplice tabella di conversione per i caratteri accentati in entità:
Vocali con accenti gravi:
- à => à
- è => è
- ì => ì
- ò => ò
- ù => ù
Vocali con accenti acuti:
- á => á
- é => é
- í => í
- ó => ó
- ú => ú
Come già detto, la definizione del charset nell’intestazione del documento non è garanzia di successo.
Può infatti capitare che, nonostante la corretta definizione del charset, si verifichino dei problemi causati dal charset di default del web-server (cosa frequente soprattutto se il nostro sito è hostato da un provider estero) o dal browser del nostro utente.
I problemi, inoltre, non si limitano ai caratteri accentati (che come abbiamo detto sono, tuttavia, la principale fonte di mal di testa del webmaster!) ma riguardano tantissimi altri caratteri!
Per evitare questi problemi, ed anche per rendere le pagine web più conformi agli standard del HTML, pertanto è consigliabile realizzare il codice sorgente delle nostre pagine web avendo cura di inserire direttamente le entità al posto del carattere/simbolo rappresentato!
Per fare un esempio la parola:
felicità
dovrà essere scritta – nel codice sorgente HTML – in questo modo:
felicità
Pubblichiamo di seguito una utilissima referenza dei caratteri del charset ISO-8859-1 con le rispettive entità (nel duplice formato testuale e numerico).
La tabella di codifica ISO 8859-1
Generalmente si è soliti dividere idealmente in due parti la tabella di codifica ISO 8859-1; avremo quindi:
- una parte bassa (che contenente i 128 caratteri ASCII: numeri, lettere dell’alfabeto minuscole e maiuscole, punteggiature e simboli vari)
- una parte alta (che contiene i caratteri peculiari delle lingue dell’europa occidentale – caratteri da 160 a 255)
Caratteri riservati in HTML e XHTML
Tra i caratteri della "parte bassa" 5 meritano particolare attenzione: si tratta dei caratteri speciali del HTML. E’ consigliabile gestire sempre tali caratteri speciali mediante le rispettive entità, in quanto tali caratteri sono propri della sintassi dei linguaggi HTML e XHTML e pertanto il loro utilizzo diretto potrebbe creare dei problemi nell’output della pagina (in quanto potrebbero essere interpretati invece che semplicemente visualizzati!)
Entità Testuale | Entità Numerica | Simbolo | Descrizione |
" | " | " | virgoletta |
& | & | & | e commerciale |
' | ' | ' | apostrofo (l’entità testuale non funziona con IE) |
< | < | < | simbolo di minore |
> | > | > | simbolo di maggiore |
Facciamo un esempio. Se volessimo scrivere:
10 > 7
dovremo avere cura di digitare questa stringa nel sorgente HTML:
10 > 7
Ora vediamo di seguito la "parte alta" della tabella di codifica ISO 8859-1 (da 160 a 255):
I simboli di ISO 8859-1
Entità Testuale | Entità Numerica | Simbolo | Descrizione |
|   | spazio di non interruzione | |
¡ | ¡ | ¡ | punto esclamativo rovesciato |
¢ | ¢ | ¢ | simbolo di centesimo |
£ | £ | £ | simbolo di sterlina |
¤ | ¤ | ¤ | simbolo generale di valuta |
¥ | ¥ | ¥ | simbolo di yen |
¦ | ¦ | ¦ | barra interrotta (verticale) |
§ | § | § | simbolo di sezione |
¨ | ¨ | ¨ | umlaut (dieresi) |
© | © | © | simbolo di copyright |
ª | ª | ª | indicatore ordinale, femminile |
« | « | « | virgoletta angolare, sinistra |
¬ | ¬ | ¬ | simbolo di negazione |
­ | ­ | | trattino |
® | ® | ® | simbolo di registrato |
¯ | ¯ | ¯ | simbolo di vocale lunga |
° | ° | ° | simbolo di grado |
± | ± | ± | simbolo di più o meno |
² | ² | ² | apice due |
³ | ³ | ³ | apice tre |
´ | ´ | ´ | accento acuto |
µ | µ | µ | simbolo di micro |
¶ | ¶ | ¶ | simbolo di paragrafo |
· | · | · | punto medio |
¸ | ¸ | ¸ | cediglia |
¹ | ¹ | ¹ | apice uno |
º | º | º | indicatore ordinale, maschile |
» | » | » | virgoletta angolare, destra |
¼ | ¼ | ¼ | frazione di un quarto |
½ | ½ | ½ | frazione di un mezzo |
¾ | ¾ | ¾ | frazione tre quarti |
¿ | ¿ | ¿ | punto interrogativo rovesciato |
Caratteri speciali di ISO 8859-1
Entità Testuale | Entità Numerica | Simbolo | Descrizione |
À | À | À | A maiuscola, accento grave |
Á | Á | Á | A maiuscola, accento acuto |
 |  |  | A maiuscola, accento circonflesso |
à | à | à | A maiuscola, tilde |
Ä | Ä | Ä | A maiuscola, dieresi |
Å | Å | Å | A maiuscola, cerchio |
Æ | Æ | Æ | dittongo AE maiuscolo (legatura) |
Ç | Ç | Ç | C maiuscola, cediglia |
È | È | È | E maiuscola, accento grave |
É | É | É | E maiuscola, accento acuto |
Ê | Ê | Ê | E maiuscola, accento circonflesso |
Ë | Ë | Ë | E maiuscola, dieresi |
Ì | Ì | Ì | I maiuscola, accento grave |
Í | Í | Í | I maiuscola, accento acuto |
Î | Î | Î | I maiuscola, accento circonflesso |
Ï | Ï | Ï | I maiuscola, dieresi |
Ð | Ð | Ð | Eth maiuscolo, Islanda |
Ñ | Ñ | Ñ | N maiuscola, tilde |
Ò | Ò | Ò | O maiuscola, accento grave |
Ó | Ó | Ó | O maiuscola, accento acuto |
Ô | Ô | Ô | O maiuscola, accento circonflesso |
Õ | Õ | Õ | O maiuscola, tilde |
Ö | Ö | Ö | O maiuscola, dieresi |
× | × | × | segno di moltiplicazione |
Ø | Ø | Ø | O maiuscola, sbarrata |
Ù | Ù | Ù | U maiuscola, accento grave |
Ú | Ú | Ú | U maiuscola, accento acuto |
Û | Û | Û | U maiuscola, accento circonflesso |
Ü | Ü | Ü | U maiuscola, dieresi |
Ý | Ý | Ý | Y maiuscola, accento acuto |
Þ | Þ | Þ | THORN maiuscolo, Islanda |
ß | ß | ß | s forte minuscola, Germania |
à | à | à | a minuscola, accento grave |
á | á | á | a minuscola, accento acuto |
â | â | â | a minuscola, accento circonflesso |
ã | ã | ã | a minuscola, tilde |
ä | ä | ä | a minuscola, dieresi |
å | å | å | a minuscola, cerchio |
æ | æ | æ | dittongo ae maiuscolo (legatura) |
ç | ç | ç | c minuscola, cediglia |
è | è | è | e minuscola, accento grave |
é | é | é | e minuscola, accento acuto |
ê | ê | ê | e minuscola, accento circonflesso |
ë | ë | ë | e minuscola, dieresi |
ì | ì | ì | i minuscola, accento grave |
í | í | í | i minuscola, accento acuto |
î | î | î | i minuscola, accento circonflesso |
ï | ï | ï | i minuscola, dieresi |
ð | ð | ð | eth minuscolo, Islanda |
ñ | ñ | ñ | n minuscola, tilde |
ò | ò | ò | o minuscola, accento grave |
ó | ó | ó | o minuscola, accento acuto |
ô | ô | ô | o minuscola, accento circonflesso |
õ | õ | õ | o minuscola, tilde |
ö | ö | ö | o minuscola, dieresi |
÷ | ÷ | ÷ | segno di divisione |
ø | ø | ø | o minuscola, sbarrata |
ù | ù | ù | u minuscola, accento grave |
ú | ú, | ú | u minuscola, accento acuto |
û | û | û | u minuscola, accento circonflesso |
ü | ü | ü | u minuscola, dieresi |
ý | ý | ý | y minuscola, accento acuto |
þ | þ | þ | thorn minuscola, Islanda |
ÿ | ÿ | ÿ | y minuscola, dieresi |