Tableless - Desenvolvimento inteligente com Padrões Web

31/03/2008
Artigos

Charsets e Encodes – Tabelas de caracteres

Entenda como funciona a tabela de caracteres e encodes no HTML.

Por

Quando você escreve um documento HTML (ou qualquer outra linguagem baseada em SGML) é necessário que especifiquemos o Charset utilizado. O Charset é o conjunto de caracteres utilizados para escrever o documento. Um jogo de caracteres consiste em ter 1) repertório com caracteres e 2) uma posição de referência para cada um dos caracteres no repertório. Cada caractere é identificado e localizado por este código de posição. Por exemplo, na tabela ASCII, as posições 65, 66 e 67 se referem às letras A, B e C respectivamente. Abaixo, veja a tabela de caracteres ASCII:

  • 00 – (NUL)
  • 01 – (SOH)
  • 02 – (STX)
  • 03 – (ETX)
  • 04 – (EOT)
  • 05 – (ENQ)
  • 06 – (ACK)
  • 07 – (BEL)
  • 08 – (BS)
  • 09 – (HT)
  • 10 – (LF)
  • 11 – (VT)
  • 12 – (FF)
  • 13 – (CR)
  • 14 – (SO)
  • 15 – (SI)
  • 16 – (DLE)
  • 17 – (D1)
  • 18 – (D2)
  • 19 – (D3)
  • 20 – (D4)
  • 21 – (NAK)
  • 22 – (SYN)
  • 23 – (ETB)
  • 24 – (CAN)
  • 25 – (EM)
  • 26 – (SUB)
  • 27 – (ESC)
  • 28 – (FS)
  • 29 – (GS)
  • 30 – (RS)
  • 31 – (US)
  • 32 – (Espaço)
  • 33 – !
  • 34 – “
  • 35 – #
  • 36 – $
  • 37 – %
  • 38 – &
  • 39 – ‘
  • 40 – (
  • 41 – )
  • 42 – *
  • 43 – +
  • 44 – ,
  • 45 – –
  • 46 – .
  • 47 – /
  • 48 – 0
  • 49 – 1
  • 50 – 2
  • 51 – 3
  • 52 – 4
  • 53 – 5
  • 54 – 6
  • 55 – 7
  • 56 – 8
  • 57 – 9
  • 58 – :
  • 59 – ;
  • 60 – <
  • 61 – =
  • 62 – &gt/
  • 63 – ?
  • 64 – @
  • 65 – A
  • 66 – B
  • 67 – C
  • 68 – D
  • 69 – E
  • 70 – F
  • 71 – G
  • 72 – H
  • 73 – I
  • 74 – J
  • 75 – K
  • 76 – L
  • 77 – M
  • 78 – N
  • 79 – O
  • 80 – P
  • 81 – Q
  • 82 – R
  • 83 – S
  • 84 – T
  • 85 – U
  • 86 – V
  • 87 – W
  • 88 – X
  • 89 – Y
  • 90 – Z
  • 91 – [
  • 92 - \
  • 93 - ]
  • 94 – ^
  • 95 – _
  • 96 – `
  • 97 – a
  • 98 – b
  • 99 – c
  • 100 – d
  • 101 – e
  • 102 – f
  • 103 – g
  • 104 – h
  • 105 – i
  • 106 – j
  • 107 – k
  • 108 – l
  • 109 – m
  • 110 – n
  • 111 – o
  • 112 – p
  • 113 – q
  • 114 – r
  • 115 – s
  • 116 – t
  • 117 – u
  • 118 – v
  • 119 – w
  • 120 – x
  • 121 – y
  • 122 – z
  • 123 – {
  • 124 – |
  • 125 – }
  • 126 – ~
  • 127 – (DELETE)

A tabela de caracteres ASCII (Código Padrão Americano para Intercâmbio de Informações) foi a primeira tabela utilizada em larga escala. O computador foi desenvolvido nos Estados Unidos. No vocabulário americano, não existem acentos, além disso, era um código de 7 bits, e não 8. Ou seja, ao invés de 256 posições, a tabela ASCII tinha apenas 128 posições – como você sabe, tudo nos computadores são um grupo de zeros (0) e uns (1) chamados de bits. Esses zeros e uns formam grupos de oito em oito que chamados de bytes e representam um número entre 0 e 255. Como as imagens, áudio, vídeos, programas e tudo o que temos nos sistemas de hoje, os caracteres que aparecem na sua tela são grupos de zeros e uns.
O computador se popularizou e a necessidade de utilizar acentos e outros tipos de caracteres (Chineses, por exemplo) tornou-se um problema.
Hoje, a maioria das tabelas utilizadas foram criadas suprindo as necessidades de um idioma específico, por este motivo elas se tornaram muito limitadas.
Por exemplo, se você estiver escrevendo um documento utilizando a tabela de caracteres chinesa, você não poderá escrever algo em hebraico neste documento.
Por conta disso muitos problemas podem surgir, por exemplo, seria impossível criar um curso online de hebraico para chineses. Será também um problema se você tiver que fazer um site ou sistema com suporte a diversos idiomas. Por exemplo, um sistema de blog projetado para uso internacional. Isso por que a posição dos caracteres varia de tabela para tabela. Dois codificadores podem usar o mesmo número para dois caracteres diferentes ou usar números diferentes para o mesmo caractere.

A tabela de caractéres Unicode – UTF-8

A Web é acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o acesso e pessoas de outros países é algo que vai contra a tradição e os ideais da internet. Por isso, foi criado uma tabela que suprisse essas necessidades, essa tabela se chama Unicode. A tabela Unicode suporta algo em torno de um milhão de caracteres. Ao invés de cada região ter sua tabela de caracteres, é muito mais sensato haver uma tabela padrão com o maior número de caracteres possível. Atualmente a maioria dos sistemas e browsers utilizados por usuários suportam plenamente Unicode. Por isso, fazendo seu sistema Unicode você garante que ele será bem visualizado aqui, na China ou em qualquer outro lugar do mundo.
O que o Unicode faz é fornecer um único número para cada caractere, não importa a plataforma, nem o programa, nem a língua.

Antes de começar, você precisa saber

Há algumas recomendações que você precisa saber antes de começar a mudar seu site para Unicode.
Existem três principais maneiras para você indicar a seu site qual tabela de caractere você está utilizando:

  1. Cabeçalho HTTP Content-type – Desta forma é necessário configurar o servidor web, algo que não é fácil nem para qualquer um. Dependendo de onde você trabalha, se for em um lugar grande, com vários sites neste mesmo servidor, pode ser a melhor maneira porque você terá que fazer isso uma vez. Caso for vários projetos com servidores diferentes isso pode ser uma dor de cabeça.
  2. Metatag Content-type – Colocando este código no HEAD de seu documento, ele avisará para o browser localmente e na hora da renderização do site qual Charset ele deve utilizar para exibir os caracteres. Esta é uma ótima escolha caso você não tenha acesso aos servidores. Certamente é a maneira mais simples de ser utilizada.
    1
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  3. Através do prolog xml – O prolog XML é utilizado em documentos XML ou XHTML para indicar a versão e a tabela de caracteres daquele documento.
    1
    &lt;? xml version="1.0" encoding="UTF-8" ?&gt;

    Não é uma boa utilizar este prolog por conta do chaveamento do Internet Explorer 6 para Quirks Mode. Quando o prolog é utilizado, o Internet Explorer 6 renderiza os sites como o Internet Explorer 5, trazendo muitos problemas de compatibilidade. Não recomendo.

Outro ponto importante é não esquecer de salvar seu documento no formato da tabela que você indicou. Não adianta nada indicar que código que está utilizando a tabela de caracteres UTF-8 e seu editor salvar seus documentos com a tabela ISO-8859-1. Isso fará com que os caracteres de seu documento apareçam corrompidos. Por isso, ao definir qual será a tabela utilizada no projeto (recomendo sempre UTF-8), defina como seu editor irá salvar seus documentos. Todos os editores de código hoje em dia tem essa opção, basta procurar. Não adianta também você salvar seus arquivos em UTF-8 e o resto da equipe continuar utilizando ISO-8859-1. Os arquivos irão corromper da mesma maneira. É uma decisão que a equipe inteira deve tomar para não haver retrabalho e dor de cabeça.

Se um projeto já está no ar, é bom fazer uma análise para ter certeza se vale a pena ou não mudar a tabela de um projeto que já está no ar e funcionando. Recomendo que esse novo padrão sempre comece a ser utilizado em novos projetos. Mesmo assim, um bom programador pode fazer um script que converta a tabela de caracteres de um diretório inteiro.

O importante é garantir que seu site aqui seja visto da maneira correta em outros lugares do mundo. Isso é importante para você e seu cliente.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • Fernando

    Fiquei intrigado com este post, pois sempre que pesquisei pela internet recomendavam utilizar ISO-8859-1, o argumento deles é que utilizamos caracteres que apenas existem na América-Latina.
    Você acha que isso procede ou o UTF-8 é realmente a melhor forma?

  • http://www.zhp.com.br Henrique Zap Pimentel

    Muito bom esse post.
    Semana passada ajudei uma amiga a converter seu blog WordPress para o UTF-8.
    Ela começou utilizando ISO-8859-1, mas quando ela começou a querer utilizar extensões para o Firefox e outros aplicativos, 99% deles não suportavam ISO-8859-1.
    Nas palavras dela isso tava deixando ela louca de raiva.
    A conversão foi trabalhosa e exigiu um pouco de trabalho manual. Vou fazer um post contando passo a passo, pois tive um pouco de dificuldade para achar as ferramentas corretas para fazer a conversão.
    Pra mim, atualmente esse é o maior problema dos sistemas de informação, padronizar as tabelas de caracteres de modo a tornar seus sistemas compatíveis em qualquer lugar.
    Ah como seria bem mais fácil se todos nós falassemos uma mesma língua.
    Maldita Torre de Babel.
    ;)

  • http://blog.gustavoribeiro.net Gustavo

    Legal o post, agora, como que consigo escrever no html por esses códigos?
    Tentei &103; e não funciona, ou não tem como escrever?

  • http://www.web2ponto0.com.br Inside

    @gustavo, coloca-se após o & um sustenido, ficando dessa forma, por exemplo: & # 103 ; (separei por espaços pra não ser interpretado)

    []‘s

  • http://felipetonello.com Felipe Tonello

    Galera.. UTF-8 é o que vai predominar, sem dúvida!
    UTF-8 é muito melhor que ISO-8859-1 (aka latin-1).
    Quem quiser saber mais sobre UTF-8 só entrar na wikipedia..

  • http://www.alvoconhecimento.com.br Daniel Accorsi

    Legal! Acredito que o maior erro do povo seja salvar o documento de forma errada, conforme comentado: “Outro ponto importante é não esquecer de salvar seu documento no formato da tabela que você indicou. Não adianta nada indicar que código que está utilizando a tabela de caracteres UTF-8 e seu editor salvar seus documentos com a tabela ISO-8859-1. Isso fará com que os caracteres de seu documento apareçam corrompidos.”

    Já caí nessa também!
    Abração!

  • Diego Bittencourt Muniz

    Já cai nessa também! [2]

    Interessante o post…

  • http://dgflx.wordpress.com Diego Felix

    Bem interessante, em alguns dos seus video-tutoriais você comentou sobre o porque de salvar o arquivo em UTF-8, acho que agora entendi melhor o porquê de salvar dessa forma.
    Abraços.

  • http://www.mdesigner.com.br/curriculo.htm Designer gráfico Demétrios Martins

    Sempre utilizo charset=iso-8859-1 porque o UTF-8 tenho problemas com acentuação, sendo que digito os texto direto no código e normal….

    Agora fiquei na dúvida em qual utilizar !!!

    Alguém pode me ajudar?

  • Renan Reis

    Démetrios, é como como foi escrito acima, não adianta vc setar um charset se está salvando o arquivo com outro.

    Verifique com qual charset vc está salvando o arquivo através de seu editor.

    Também é importante trabalhar com o charset do banco de dados igual ao dos arquivos.

    Abraços

  • http://AdPalmaFranca Daniel Moreira

    Prezados, muito boa a matéria, mas tenho um problema referente à esse assunto. Desenvolvi uma página que estou tendo o seguinte problema: quando uso o UTF-8, todos os caracteres que vem do Banco de Dados (Access) aparecem corrompidos onde há acento e o ‘Ç’, porém, os textos com acento e ‘ç’ que escrevo diretamente no código, não ficam corrompidos. Quando altero o UTF-8 para o ISO, aí o problema é inverso. Como resolver isso?

  • Leonardo

    Ola, Moro na china e cheguei a este post justamente tentando resolver meu problema como usuario, isto eh: Como faço para acessar sites a partir daqui sem que os acentos sejam transformados em caracteres chineses?

    é possivel? Ou dependo da programacao do site?

    Obrigado pela ajuda.

    Leonardo.
    leocordeiro.23@hotmail.com

  • http://www.informatz.com.br Mateus

    Olá pessoal!

    O problema é !

    “text/html; charset=utf-8″ ou “text/html; charset=iso-8859-1″

    Tudo bem!

    Ainda não cheguei a compreender uma coisa!

    Se seto minha página como (utf-8) perco meus acentos e etc…

    Ou (iso-8859-1) recupero meus acentos mas perco minha validação W3C!!!

    Como já foi citado acima, será que preciso Recadastrar todo meu bd em (utf-8) e seta-lo como tá???

    Qual a solução?

  • http://www.sgdownloads.com Drako Arutsuru

    Mateus vc terá q mudar seu DB pra utf8 sim, utf8 é super d++++++++++
    tem todas as letras *-*
    Se vc usa notepad pra salvar, coloca quando for salvar, em vez de ASCII coloca UTF-8. se usa outros programas deve ter algum parâmetro pra definir isso.
    Caso vc naum queira mudar seu DB, use a função do php utf8_encode() para converter automaticamente pra utf8 antes de mostrar na página.

  • Pingback: Codificação de Caracteres no Eclipse « Flávio Araújo

  • Pingback: Declarando idiomas no HTML | Tableless

  • Pingback: Declarando idiomas no HTML | SWX Softwares - Desenvolvimento e Design Web