O que são caracteres invisíveis?

Caracteres invisíveis são pontos de código Unicode que não possuem um glifo visível, mas ainda ocupam espaço em uma string e influenciam como o software processa ou renderiza texto. Eles incluem caracteres de controle (como tabulação e quebra de linha), caracteres de formatação (como conectores de largura zero e marcas direcionais), várias variantes de espaço em branco e marcadores especiais como a Marca de Ordem de Byte (BOM). Como parecem não existir, são notoriamente difíceis de detectar em um editor de texto simples e são uma fonte comum de bugs sutis, layouts quebrados e erros de processamento de dados.

Descrição da ferramenta

O Visualizador de Caracteres Invisíveis é um editor de texto interativo que renderiza cada caractere invisível como um símbolo visível, no mesmo lugar. Cole ou digite qualquer texto e cada caractere oculto é imediatamente substituído por um pequeno glifo simbólico — tabulações aparecem como →, espaços como ·, espaços de largura zero como ·, marcas direcionais como → / ←, BOM como ▯, e assim por diante. Passar o mouse sobre qualquer glifo exibe uma dica de ferramenta com o nome completo do caractere e seu ponto de código Unicode. Nada sai do editor; toda a renderização acontece localmente no seu navegador.

Exemplos

Texto de entrada (bruto) O que você vê no visualizador
Hello\u200BWorld (espaço de largura zero entre palavras) Hello·World com o glifo · marcando U+200B
\u202Eright-to-left override →right-to-left override com o glifo direcional no início
line one\r\nline two Glifos de retorno de carro e quebra de linha antes da nova linha
\uFEFFstart of file ▯start of file mostrando o BOM na posição 0

Recursos

  • Renderização inline: Caracteres invisíveis são mostrados como glifos diretamente dentro do editor em vez de em um painel separado, para que você os veja em contexto com o texto ao redor
  • Cobertura ampla de caracteres: Lida com caracteres de controle C0 e C1, todos os caracteres de formatação Unicode nomeados, variantes de espaço em branco Unicode (espaço en, espaço em, espaço fino, espaço sem quebra estreito, etc.), caracteres de formatação direcional, seletores de variação, caracteres de tag e BOM
  • Dicas de ferramenta: Passar o mouse sobre qualquer glifo exibe o nome Unicode completo do caractere e seu ponto de código (por exemplo, Zero Width Space — U+200B)
  • Destaque de espaço em branco padrão: Espaços e tabulações regulares são destacados usando os marcadores de espaço em branco integrados do CodeMirror, mantendo-os visualmente distintos do texto regular
  • Modo de texto simples: O editor permanece em modo de texto simples para que caracteres especiais nunca sejam reinterpretados ou modificados conforme você digita

Casos de uso

  • Depuração de artefatos de cópia e cola: Texto copiado de PDFs, páginas da web ou processadores de texto geralmente carrega espaços de largura zero, hífens suaves ou espaços sem quebra que causam incompatibilidades em comparações de strings e resultados de pesquisa
  • Inspeção de arquivos de dados: Cole CSV, JSON ou saída de log para localizar caracteres de controle inesperados (bytes nulos, retornos de carro, BOM) antes de importar dados para um banco de dados ou analisador
  • Depuração web e de código: Verifique a entrada fornecida pelo usuário ou respostas de API para marcas direcionais ocultas ou caracteres de formatação que possam quebrar a renderização ou causar problemas de segurança

Como funciona

A ferramenta usa CodeMirror 6 com uma extensão personalizada que itera sobre cada caractere na janela de visualização visível do editor. Para cada ponto de código, ela verifica uma tabela de consulta de caracteres invisíveis conhecidos, testa contra as classes de propriedade Unicode \p{Cc} (controle) e \p{Cf} (formatação) e detecta seletores de variação e intervalos de caracteres de tag. Os caracteres correspondentes são substituídos por widgets de decoração inline mostrando o glifo de símbolo correspondente. Espaços e tabulações regulares são delegados à extensão highlightWhitespace integrada do CodeMirror.