Normalização para HTML e CSS

Verificação rápida

Entre um endereço e verifique a ocorrência de problemas de normalização em nomes de id e classes

Na tabela de resultados observe o campo "Class & id names".

Intended audience: XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), CSS coders, Web project managers, and anyone who is unfamiliar with Unicode normalization and how it can affect the success of HTML and CSS authoring.

Question

Quais são as formas de normalização e por que eu preciso conhecê-las quando crio conteúdos HTML e CSS?

Answer

Normalização é uma questão que você precisa considerar quando cria páginas HTML e folhas de estilo CSS em UTF-8 (ou outra codificação Unicode qualquer), principalmente quando escreve textos que contém sinais diacríticos ou acentuação.

Quais são as formas de normalização?

Em Unicode é possível escrever o mesmo texto com uso de diferentes sequências de caracteres. Tomemos como exemplo a palavra húngara világ. A quarta letra pode ser armazenada como uma letra precomposed (precomposta) U+00E1 LETRA LATINA MINÚSCULA A COM ACENTO AGUDO (um só caractere) ou decomposed (decomposta), uma sequência de U+0061 LETRA LATINA MINÚSCULA A seguida de U+0301 ACENTO AGUDO DE COMBINAÇÃO (dois caracteres).

As normas Unicode admitem as duas alternativas de codificação, mas estabelecem que ambas sejam tratadas de forma idêntica. Para incrementar a eficiência uma aplicação normalmente normaliza o texto antes de proceder uma busca ou comparação. Normalização, nesses casos, significa converter o texto de forma a verificar a existência de todos os caracteres sejam precompostos ou decompostos.

Existem quatro Formas de Normalização especificadas na norma Unicode: NFC, NFD, NFKC e NFKD. A letra C é para (pre-)composta, e a letra D para decomposta. A letra K significa compatibilidade. Por questões de interoperabilidade o W3C recomenda o uso da forma NFC para normalização de textos na Web.

O que eu preciso saber sobre normalização?

Infelizmente a normalização de textos nem sempre é feita antes de se processar uma comparação. Um caso particularmente importante é o uso de seletores e nomes de classes ou id em HTML e CSS. Se a palavra világ é usada na forma precomposta na marcação HTML da página (por exemplo: <span class="világ">) e na forma decomposta nas CSS (por exemplo: .világ { font-style: italic; }) o seletor não casará com o nome da classe.

Isso significa que ao produzir conteúdo você deve assegurar-se de que seletores, nomes de classe ou id são idênticos caractere a caractere. Esse é um ponto particularmente importante se a marcação e as CSS forem produzidas ou mantidas por diferentes pessoas.

A melhor maneira de assegurar isso, é com uso de uma das formas de normalização para todos os conteúdos produzidos. Como já dissemos anteriormente o W3C recomenda o uso da forma NFC.

A maioria dos teclados para linguagens européias já gera o texto na forma NFC, mas isso é irrelevante quando se trata de linguagens não européias.

Alguns editores oferecem opções de escolha da forma de normalização para se gravar os textos neles escrito. A figura a seguir mostra como como configurar o DreamWeaver de modo a que ao se criar novos documentos nele os textos estejam em uma determidada forma de normalização (no caso NFC). Ao gravar os documentos a forma de normalização também poderá ser escolhida.

Painel de preferências para formas de normalização Unicode com a opção NFC selecionada.

Como detectar problemas de normalização em minhas páginas?

Você pode verificar se uma página HTML contém nomes de classes e valores de ids não normalizadas na forma NFC usando o Verificador de Internacionalização do W3C.

Se você encontrar algum problema a solução é usar um editor ou ferramenta de conversão que permita especificar a forma de normalização e gravar novamente o arquivo com problema.