Cosa sono i caratteri invisibili?

I caratteri invisibili sono punti di codice Unicode che non hanno un glifo visibile ma occupano comunque spazio in una stringa e influenzano il modo in cui il software elabora o renderizza il testo. Includono caratteri di controllo (come tabulazione e avanzamento riga), caratteri di formattazione (come unitori a larghezza zero e marcatori direzionali), varie varianti di spazi bianchi e marcatori speciali come il Byte Order Mark (BOM). Poiché non hanno alcun aspetto visibile, sono notoriamente difficili da individuare in un editor di testo semplice e sono una fonte comune di bug sottili, layout danneggiati ed errori di elaborazione dei dati.

Descrizione dello strumento

Il Visualizzatore di Caratteri Invisibili è un editor di testo interattivo che renderizza ogni carattere invisibile come un simbolo visibile, direttamente al suo posto. Incolla o digita qualsiasi testo e ogni carattere nascosto viene immediatamente sostituito da un piccolo glifo simbolico — le tabulazioni appaiono come →, gli spazi come ·, gli spazi a larghezza zero come ·, i marcatori direzionali come → / ←, BOM come ▯, e così via. Passando il mouse su qualsiasi glifo viene visualizzato un tooltip con il nome completo del carattere e il punto di codice Unicode. Nulla esce dall'editor; tutto il rendering avviene localmente nel tuo browser.

Esempi

Testo di input (grezzo) Cosa vedi nel visualizzatore
Hello\u200BWorld (spazio a larghezza zero tra le parole) Hello·World con il glifo · che marca U+200B
\u202Eright-to-left override →right-to-left override con il glifo direzionale all'inizio
line one\r\nline two Glifi di ritorno a capo e avanzamento riga prima della nuova riga
\uFEFFstart of file ▯start of file che mostra il BOM alla posizione 0

Funzionalità

  • Rendering inline: I caratteri invisibili vengono mostrati come glifi direttamente all'interno dell'editor anziché in un pannello separato, quindi li vedi nel contesto con il testo circostante
  • Copertura ampia di caratteri: Gestisce caratteri di controllo C0 e C1, tutti i caratteri di formattazione Unicode denominati, varianti di spazi bianchi Unicode (spazio en, spazio em, spazio sottile, spazio senza interruzione stretto, ecc.), caratteri di formattazione direzionale, selettori di variazione, caratteri tag e BOM
  • Tooltip: Passando il mouse su qualsiasi glifo viene visualizzato il nome Unicode completo del carattere e il punto di codice (ad es. Zero Width Space — U+200B)
  • Evidenziazione degli spazi bianchi standard: Gli spazi e le tabulazioni normali vengono evidenziati utilizzando i marcatori di spazi bianchi integrati di CodeMirror, mantenendoli visivamente distinti dal testo normale
  • Modalità testo semplice: L'editor rimane in modalità testo semplice in modo che i caratteri speciali non vengano mai reinterpretati o modificati mentre digiti

Casi d'uso

  • Debug di artefatti copia-incolla: Il testo copiato da PDF, pagine web o elaboratori di testi spesso contiene spazi a larghezza zero, trattini soft o spazi senza interruzione che causano mancate corrispondenze nei confronti di stringhe e nei risultati di ricerca
  • Ispezione di file di dati: Incolla output CSV, JSON o log per individuare caratteri di controllo imprevisti (byte null, ritorni a capo, BOM) prima di importare i dati in un database o parser
  • Debug web e codice: Controlla l'input fornito dall'utente o le risposte API per marcatori direzionali nascosti o caratteri di formattazione che potrebbero interrompere il rendering o causare problemi di sicurezza

Come funziona

Lo strumento utilizza CodeMirror 6 con un'estensione personalizzata che itera su ogni carattere nel viewport visibile dell'editor. Per ogni punto di codice controlla una tabella di ricerca di caratteri invisibili noti, verifica le classi di proprietà Unicode \p{Cc} (controllo) e \p{Cf} (formattazione), e rileva i selettori di variazione e gli intervalli di caratteri tag. I caratteri corrispondenti vengono sostituiti da widget di decorazione inline che mostrano il glifo simbolico corrispondente. Gli spazi e le tabulazioni normali vengono delegati all'estensione highlightWhitespace integrata di CodeMirror.