Что такое невидимые символы?

Невидимые символы — это кодовые точки Unicode, которые не имеют видимого глифа, но всё ещё занимают место в строке и влияют на то, как программное обеспечение обрабатывает или отображает текст. Они включают управляющие символы (такие как табуляция и перевод строки), символы форматирования (такие как объединители нулевой ширины и метки направления), различные варианты пробелов и специальные маркеры, такие как метка порядка байтов (BOM). Поскольку они выглядят как ничто, их чрезвычайно сложно заметить в простом текстовом редакторе, и они являются частой причиной тонких ошибок, нарушенных макетов и ошибок обработки данных.

Описание инструмента

Средство просмотра невидимых символов — это интерактивный текстовый редактор, который отображает каждый невидимый символ как видимый символ прямо на месте. Вставьте или введите любой текст, и каждый скрытый символ сразу же заменяется небольшим символическим глифом — табуляции отображаются как →, пробелы как ·, пробелы нулевой ширины как ·, метки направления как → / ←, BOM как ▯ и так далее. При наведении курсора на любой глиф отображается подсказка с полным названием символа и его кодовой точкой Unicode. Ничего не покидает редактор; весь рендеринг происходит локально в вашем браузере.

Примеры

Входной текст (исходный) Что вы видите в средстве просмотра
Hello\u200BWorld (пробел нулевой ширины между словами) Hello·World с глифом ·, обозначающим U+200B
\u202Eright-to-left override →right-to-left override с глифом направления в начале
line one\r\nline two Глифы возврата каретки и перевода строки перед новой строкой
\uFEFFstart of file ▯start of file с BOM в позиции 0

Возможности

  • Встроенный рендеринг: Невидимые символы отображаются как глифы прямо в редакторе, а не в отдельной панели, поэтому вы видите их в контексте с окружающим текстом
  • Широкое покрытие символов: Обрабатывает управляющие символы C0 и C1, все именованные символы форматирования Unicode, варианты пробелов Unicode (пробел en, пробел em, волосяной пробел, узкий неразрывный пробел и т. д.), символы форматирования направления, селекторы вариантов, символы тегов и BOM
  • Подсказки: При наведении курсора на любой глиф отображается полное имя символа Unicode и его кодовая точка (например, Zero Width Space — U+200B)

Как это работает

Инструмент использует CodeMirror 6 с пользовательским расширением, которое перебирает каждый символ в видимой области просмотра редактора. Для каждой кодовой точки он проверяет таблицу поиска известных невидимых символов, тестирует классы свойств Unicode \p{Cc} (управление) и \p{Cf} (формат) и обнаруживает селекторы вариантов и диапазоны символов тегов. Найденные символы заменяются встроенными виджетами украшения, отображающими соответствующий символ глифа. Обычные пробелы и табуляции делегируются встроенному расширению highlightWhitespace CodeMirror.