Como resolver problemas de acentuações em seu site

 

O que fazer quando meu site exibe caracteres distorcidos ao invés de caracteres acentuados?

Um exemplo muito comum:

Ao invés de Canção, ele exibe Can��o ou Canção.

No primeiro caso (Can��o), sua página em ISO-8859-1 está obtendo a palavra Canção armazenada em UTF-8 da origem, seja ela do banco de dados ou de um XML, txt etc.

Já o segundo caso (Canção) é a sua página em UTF-8 exibindo a palavra Canção armazenada em ISO-8859-1 da origem.

Para que ocorra a exibição correta, deve-se armazenar novamente os dados com a codificação correta (o que é muito trabalhoso dependendo da quantidade de dados) ou trocar a codificação de exibição de seu site.

Para trocar a exibição, o cabeçalho HTML deverá estar como:


Para ISO-8859-1:

<html>
<head>
<title>Minha pagina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


Para UTF-8:

<html>
<head>
<title>Minha pagina</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


Observação sobre a forma de salvar o arquivo: Mesmo que você especifique um dos cabeçalhos acima ou com o charset que deseja, o arquivo deve ser salvo na codificação equivalente ao charset especificado. Por exemplo, se você utiliza <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> , o arquivo deve ser salvo na codificação "ISO-8859-1, ou Latin1, ou Europeu Ocidental ISO (ou mesmo ANSI caso você use o Bloco de Notas do Windows)", mas se o charset for UTF-8, a codificação deverá ser Unicode / UTF-8 também. Lembrando que essa opção está disponível no editor de texto utilizado para editar o arquivo (notepad, notepad ++, gedit, textmate, textpad, vi, vim e vários outros).


 

Observação sobre o banco de dados: Não é sempre os collations ou encoding das bases o culpado. No caso do MySQL e do PostgreSQL, não haverá nenhum problema de exibição do caractere, mas na hora da busca ele pode não saber o que é o caractere acentuado. O SQL Server já é mais passível de exibir erros conforme o collation especificado.


 

Observação crítica: Mesmo que você especifique um dos cabeçalhos acima ou com o charset/encoding/collation que deseja, o usuário pode forçar um outro encoding clicando no menu Exibir > Codificação > (encoding que ele quiser) do navegador dele, neste caso, o navegador enviará os dados da forma como o usuário determinou. Uma das maneiras de se prevenir contra este tipo de ação é criar uma função que determine quais são os caracteres permitidos e substitua os demais por espaço, nulo, sublinhado, asterisco ou outro de sua preferência.

Sugestão de caracteres permitidos:
Números...............: 0123456789
Letras maiúsculas.....: ABCDEFGHIJKLMNOPQRSTUVWXYZ
Letras minúsculas.....: abcdefghijklmnopqrstuvwxyz
Caracteres especiais..: "'!@#$%&*()_-+={[}]|\<,>.:;?/ (o espaço é um caractere também)

E para ser usado com cautela:
Caracteres acentuados.: ÁÉÍÓÚ áéíóú ÂÊÔ âêô Àà Üü Çç Ññ ÃÕ ãõ

Exemplo

Para a palavra Canção, a saída HTML (seja em HTML mesmo, ou PHP, JSP, ASP, .net) a ser lida pelo navegador usa-se Can&ccedil;&atilde;o.

Esta ação também o prevenirá caso você não tenha definido nenhum encoding na sua aplicação. Tanto o servidor quanto o navegador "tentarão" te ajudar, mas nem sempre eles irão acertar.

Para definir um encoding para a sua aplicação, para que ela não precise da ajuda nem do servidor e nem do navegador, veja Como resolver problemas de acentuações em seu site.

Tabela com os caracteres mais utilizados

A maiúsculo com acento agudo Á &Aacute;
E maiúsculo com acento agudo É &Eacute;
I maiúsculo com acento agudo Í &Iacute;
O maiúsculo com acento agudo Ó &Oacute;
U maiúsculo com acento agudo Ú &Uacute;
A minúsculo com acento agudo á &aacute;
E minúsculo com acento agudo é &eacute;
I minúsculo com acento agudo í &iacute;
O minúsculo com acento agudo ó &oacute;
U minúsculo com acento agudo ú &uacute;
A maiúsculo com acento circunflexo  &Acirc;
E maiúsculo com acento circunflexo Ê &Ecirc;
O maiúsculo com acento circunflexo Ô &Ocirc;
A minúsculo com acento circunflexo â &acirc;
E minúsculo com acento circunflexo ê &ecirc;
O minúsculo com acento circunflexo ô &ocirc;
A maiúsculo com crase À &Agrave;
A minúsculo com crase à &agrave;
U maiúsculo com trema Ü &Uuml;
U minúsculo com trema ü &uuml;
C cedilha maiúsculo Ç &Ccedil;
C cedilha minúsculo ç &ccedil;
A com til maiúsculo à &Atilde;
O com til maiúsculo Õ &Otilde;
A com til minúsculo ã &atilde;
O com til minúsculo õ &otilde;
N com til maiúsculo Ñ &Ntilde;
N com til minúsculo ñ &ntilde;
E comercial & &amp;
Aspa dupla " &quot;
Aspa simples ' &#039;
Menor que < &lt;
Maior que > &gt;

Funções prontas

O PHP (linguagem de programação) possui uma função que faz essa conversão para você. Veja htmlentities() no site oficial do PHP


 

Por que são só os caracteres acentuados que estão sujeitos a terem problemas na exibição?
Não poderia estar acontecendo com os demais também?

Um caractere é armazenado, seja em arquivo ou em buffer, codificados.

Quando vemos um 'A' (maiúsculo), na verdade, estamos vendo o caractere de código 65 (0x41).
Um 'a' (minúsculo) não é um 'A' (maiúsculo), o código deste caractere é 97 (0x61).
 

Cada caractere tem o seu código, e todos os encodings por padrão são iguais até o caractere de número 127 (0x7F), a partir do caractere 128 (0x80) cada um possui suas particularidades.

O código do caractere 'Á' (maiúsculo com acento agudo) é diferente:
É 193 (0xC1) no encoding ISO-8859-1.
É 50049 (0xC381) no encoding UTF-8.


Então é a partir daí que começam os erros de exibição de caracteres, veja:

O caractere 193 (0xC1) está armazenado no arquivo ou no banco de dados:
Se a página for exibida em ISO-8859-1, veremos um 'Á', mas se for exibida em UTF-8, veremos um '�'.

O caractere 50049 (0xC381) está armazenado no arquivo ou no banco de dados:
Se a página for exibida em ISO-8859-1, veremos 'Á', mas se for exibida em UTF-8, veremos um 'Á'.


 

Afinal, qual a diferença entre os encodings?
Qual deles é o que eu devo utilizar?

A diferença do ISO-8859-1 e do UTF-8 é que um suporta até 256 caracteres (0 a 255, ou 0x00 a 0xFF) e o outro suporta até 65.536 caracteres (0 a 65535, ou 0x0000 a 0xFFFF).

O que leva alguns desenvolvedores a utilizarem o ISO-8859-1 é a economia de espaço, tráfego de rede e velocidade na exibição no caso de grandes quantidades de dados, pois um caractere UTF-8 chega a ter o dobro do tamanho de um caractere ISO-8859-1, em compensação, o UTF-8 suporta a maioria das letras, números e outros caracteres dos diversos países do mundo (se não forem todos), o que acaba fazendo do UTF-8 um padrão internacional.

Entretando, é aconselhável ser utilizado o UTF-8 somente quando se prevê que seu sistema lidará com textos em idiomas distintos, como japonês, chinês, árabe, russo, grego e outros cujos caracteres não são de origem romana, do contrário, você pode usar o ISO-8859-1, pois ele suporta os idiomas de origem latina (português, espanhol, francês e italiano) e também inglês, alemão, dinamarquês e dos demais países da Europa Ocidental.


 

Leitura recomendada

Existe um artigo bem completo escrito por Joel Spolsky que explica os conjuntos de caracteres e os problemas de acentuação que eles podem causar: