Olá pessoal!
Como um dos objetivos deste blog é apresentar soluções para problemas cotidianos, hoje eu vou falar sobre um problema que enfrentei utilizando a codificação UTF-8 BOM em minhas páginas e sinceramente, até a pouco eu não sabia a diferença entre o UTF-8 sem o BOM e o UTF-8 com o BOM.
O Problema
Quando usamos paginas codificadas em UTF-8, em alguns user agents eu recebo algumas linhas extras ou caracteres não esperados no TOPO do documento ou no TOPO de arquivos incluídos… como eu removo estes caracteres?
Resposta
Se você trabalha com um arquivo codificado em UTF-8, provavelmente, seus problemas estão sendo causados pela presença da assinatura (BOM) do seu documento que o user agent não reconheçe.
A assintua (BOM) dos documentos UTF-8 estão sempre no topo do documento e normalmente você espera vêlos, mas não perca seu tempo. A única maneira (works for me) que fez com que pudesse ver a assinatura foi trocando a codificação do documento de UTF-8 BOM para um ISO, caso contrário, a única coisa que você verá, será uma linha em branco no começo do seu documento (e em alguns casos, como o meu, nem isso você vê).
A confusão
O grande problema causado pela assinatura dos documentos UTF-8 é que pêla experiência que cada programador possuí é de instinto o programador já sair à procura de linhas extras nos arquivos incluídos.
É neste pronto onde se é gasto um grande tempo… Depois de perter todo o seu tempo, então, você começa a ficar frustrado por não encontrar a linhas extras nos arquivos e começa a acreditar que tudo isso não passa de uma conspiração do dêmonio com a sua pessoa.
O que é a assinatura (BOM) dos documentos UTF-8?
Algumas aplicações inserem uma combinação particular de bytes no começo dos arquivos e isso é usado para indicar que o conteúdo a seguir, possuí caracteres Unicode. Essa combinação de caracteres é conhecida como assinatura ou Byte Order Mark. Alguns editores mostram a assinatura como uma linha extra outras aplicações como o Zend Studio mostram a assinatura como ( ).
A assinatura (BOM) do documento é importante?
No caso dos arquivos codificados em UTF-8 não, você pode retirar esta assinatura sem causar problemas de interpretação, a assinatura (BOM) do documento só é importante para documentos UTF-16 e UTF-32 ela é usada para informar como o user agent deve interpretar os caracteres.
Como detectar a presença da assinatura de arquivos UTF-8?
Primeiro, nós precisamos detectar se esta linha extra no começo do arquivo é realmente a assinatura BOM.
Você pode tentar procurar no olhometro, mas se o seu editor interpreta corretamente a assinatura do arquivo, lamento, mas você não verá. Se o seu editor não interpretar ou não reconhecer esta assinatura ele vai apresentar caracteres como  no início do seu documento. Se você utilizar um editor binário, capaz de mostrar valores em hexadecimal, a assinatura poderá ser indentificada pelo conjunto de bytes EF BB BF.
Alternativamente, se você possuir em mãos um bom editor, ele vai te dizer a codificação do documento na barra inferior do editor ou em algum menu que apresente o encoding do seu documento.
Se em nenhum destes casos você obter sucesso, existem algumas aplicações web que são capazes de detectar a assinatura (BOM) de documentos UTF-8.
Removendo a assinatura (BOM)
Se você possuí algum editor capaz de exibir esta assinatura, você pode remover na mão, apenas seleciona-la e apaga-la.
Alguns editores como o Notepad++ (Windows, free) e Komodo (Linux, Free) permitem que você especifique se você quer ou não a assinatura no ato em que você salva o arquivo, dê uma olhada no menu “Format”.
Outra opção, é você utilizar algum tipo de script que automatize a remoção da assinatura rápidamente e recursivamente em todos os seus arquivos. Existe um script feito em Perl, desenvolvido por Martin Dürst que faz isso para você:
[perl]
# program to remove a leading UTF-8 BOM from a file
# works both STDIN -> STDOUT and on the spot (with filename as argument)
if ($#ARGV > 0) {
print STDERR "Too many arguments!\n";
exit;
}
my @file; # file content
my $lineno = 0;
my $filename = @ARGV[0];
if ($filename) {
open( BOMFILE, $filename ) || die "Could not open source file for reading.";
while (<BOMFILE>) {
if ($lineno++ == 0) {
if ( index( $_, ‘’ ) == 0 ) {
s/^\xEF\xBB\xBF//;
print "BOM found and removed.\n";
}
else { print "No BOM found.\n"; }
}
push @file, $_ ;
}
close (BOMFILE) || die "Can’t close source file after reading.";
open (NOBOMFILE, ">$filename") || die "Could not open source file for writing.";
foreach $line (@file) {
print NOBOMFILE $line;
}
close (NOBOMFILE) || die "Can’t close source file after writing.";
}
else { # STDIN -> STDOUT
while (<>) {
if (!$lineno++) {
s/^\xEF\xBB\xBF//;
}
push @file, $_ ;
}
foreach $line (@file) {
print $line;
}
}
[/perl]
Cuidado com o BOM
Em alguns editores como o Widows Notepad, se você escolhe salvar o arquivo como UTF-8 ele automaticamente coloca a assinatura (BOM).
A assinatura (BOM) em arquivos CSS pode causar a falha de de interpretação de algumas regras em alguns user agents, por isso, deve ser removida.
Em alguns navegadores, a presença da assinatura pode fazer com que TODOS os caracteres da sua pagina sejam interpretados como se fossem UTF-8 independente de qualquer declaração contrária.
E é isso pessoal, espero que seja útil para vocês, espero que você não perca horas do seu dia tentando resolver este problema como eu e algumas pessoas da comunidade PHP passaram.
Em arquivos PHP, se você trabalhar como funções como header(); a assinatura causará aquele problema comum quando você enviar qualquer caracter para o browser antes dos header();
[]’s
Igor
Igor Escobar 
Muito BOM o artigo, já tive problemas com BOM, esse artigo vai ajudar muita gente.
LikeLike
Muito bacana a abordagem , sempre procurei sobre este problema que surge quando vamos validar um documento mas nunca achei algo explicativo. Parabéns.
LikeLike
Além disso, o BOM pode fazer um XHTML válido ser interpretado de forma errada, já que o browser pode entrar em modo de compatibilidade se houver algum caracter antes da declaração do doctype
LikeLike
É verdade Israel 😉
LikeLike
O artigo me ajudou também.
Segue o link deste no W3C:
http://www.w3.org/International/questions/qa-utf8-bom
LikeLike
Cara, esse artigo me ajudou imenso eu já estava ficando doido sem saber o que eram os espaços em branco…valeu longa vida pra você :D! Abração…
LikeLike
Fico muito feliz que tenha ajudado 🙂
LikeLike
No drupal se você faz um módulo com UTF-8 com BOM, no IE7/8 o site terá problema, a estilização css ficará quebrada, para resolver o problema é como dito no post, transformar o documento para UTF8 Without BOM, eu faço isso com notepad++ no windows, no linux o meu kate já está configurado corretamente.
OBS: o notepad do windows cria o BOM automaticamente.
LikeLike
Parabéns pela postagem, me ajudou muito.
Um forte abraço,
Fábio Fontana de Souza
LikeLike
Sério que esse problema é comum?
Eu achei esse artigo após ver no Facebook alguém falando do “problema do BOM do utf8” “no início do arquivo”…
Uma vez no trabalho me falaram que estava com esse problema.
Pois bem, era exatamente esse. Alguém lá que usa Windows estava usando um editor fuleiro (Wordpad acho) uma vez ou outra e “contaminando” sem perceber vários arquivos.
Algumas pessoas já tinham quebrado a cabeça tentando descobrir e nada… Após alguns minutos eu já muito louco pensando em que diabos poderia ser testei colocando um arquivo “contaminado” como o ponto de entrada no navegador e… Deu pau. Removi seu conteúdo, deixando apenas uma chamada para o header e deu pau. Pois bem, a única razão que poderia ser era o arquivo ter mais coisa do que “aparentava ter”. No terminal mandei ver um “cat arquivo” e lá apareceram uns caracteres malucos antes do <?php e daí matei o problema com o seguinte código bem enxuto:
#### NÃO EXECUTE O CÓDIGO ANTES DE LER O AVISO ####
ed -s ARQUIVO <<< $'1s/^[^<]*//\nw'
#### NÃO EXECUTE O CÓDIGO ANTES DE LER O AVISO ####
O que o código acima faz é remover tudo que vem antes de <?php então se você tiver algum documento que comece com HTML e executar isso nele e não tiver uma cópia de segurança atualizada, se ferrou!
Bem, se você não usa trate de usar imediatamente um sistema de versionamento para garantir que seu trabalho nunca sumirá do dia para a noite por conta de algo acima. De preferência o git e use o GitHub também!
LikeLike
Cara, eu já tava quase desistindo… minha sorte que eu to usando o Notepad++ e aí foi só fazer a conversão no menu ‘Formatar’…
Me ajudou muito!
Obrigado.
LikeLike
Obrigado pela postagem sobre o utf-8 com/sem BOM. Eu estava muito curioso pois eu estou aprendendo html e no validador do W3C o arquivo estava com problema de validação por causa deste BOM. Agora eu entendi porque. Valeu.
LikeLike
Muito bom cara, me ajudou bastante 😀
LikeLike
Meu amigo você está de parabéns!
Cara, eu penei com um script que estava correto e eu pensando que estava errado quando eu usava o session_start() dava o tradicional erro mas ao fuçar a internet encontrei seu post e cara me salvou.
Após um dia de chateação, pude encontrar uma luz no seu site.
Muito bom mesmo cara.
Valeu!!!
LikeLike
Muito bom este artigo sobre o BOM!
Vai ajudar muita gente instalando o WordPress, que apresenta este comportamente ao ser instalado. (Cannot modify header)
Sugiro adicionar neste artigo algo que mencione o Cannot modify header no WordPress, com um pouco mais de ênfase para que os motores de busca encontem este artigo.
Muito provavelmente as pessoas irão pesquisar por, WordPress, cannot modify header e instalacão wp.
Valeu!
Sucesso
Jorge
LikeLike
Acho que estou tendo problema com esse maligno BOM, embora minha pagina funcione corretamente em servidor local (xamp), quando mando para o servidor do sistema, coisa estranhas acontecem:
1- Tenho uma barra que fica fixa no topo de minha pagina, com um campo de input tipo a do youtube, esse minha pagina é um buscador de vídeos, por algum motivo esse campo fica fica “fino” como se seu heitgh tivesse alterado, o mais estranho somete acontece no Chrome e no IE, no Mozilla fica beleza. Quando fui inspecionar o
código usando o browser nada aparece, dai copiei o código e usei um programa diff que tenho aqui para comparar o código que está no meu computador com esse que copiei e quem aparece na pagina com problema: .
A pergunta: De onde vem isso se meus arquivos foram gerados todos sem BOM?
2- Também apareceu um espaço entre a barra de busca superior e a div inferir a ela.
LikeLike
No notepad++ (to usando o 6.5.5) tem um menú chamado codigicação, e lá tem várias opçoes, entre elas utf-8 e utf-8 sem BOM
simples, rápido e fácil.
LikeLike
@ayrton Se o seu problema for somente com um arquivo e for usuário de Windows esta também pode ser uma solução.
LikeLike
Esta informação é muito importante e ainda tem gente que não conhece.
Obrigado!
“começa a acreditar que tudo isso não passa de uma conspiração do dêmonio com a sua pessoa.”
Eu ri nessa. Heheheh
LikeLike
Exatamente isso, achei que era coisa do demo kkkk 3 hrs procurando o problema, e ai lembrei do “BOM” ai cai aqui, vamos ver se esse script roda. VLW
LikeLike
Excelente post. Me ajudou a ter um melhor entendimento sobre BOM.
Estou tendo problema com o BOM, mas ainda não consegui solucioná-lo.
Não consigo removê-lo ao gerar um arquivo texto através de um script PHP.
Igor, você sabe me dizer se existe algum script PHP que permite remover o BOM?
Espero que possam me ajudar.
Segue meu código:
$content = utf8_encode($content);
if (!is_dir($path)) {
mkdir($path, 0777);
}
$file = fopen($path . $fileName . ‘.’ . $fileType, ‘w+’);
fwrite($file, pack(“CCC”, 0xef, 0xbb, 0xbf));
if (fwrite($file, $content) === false) {
throw new Exception(‘Não foi possível gerar o arquivo ‘ . $fileName . ‘.’);
}
fclose($file);
LikeLike
Perdi horas com isso, mas você me solvou cara, era do demónio isso. =D
LikeLike