見えない文字とは？

見えない文字は、目に見えるグリフを持たないが、文字列内でスペースを占有し、ソフトウェアがテキストを処理またはレンダリングする方法に影響を与えるUnicodeコードポイントです。制御文字（タブや改行フィードなど）、フォーマット文字（ゼロ幅結合子や方向マークなど）、様々な空白バリアント、およびバイトオーダーマーク（BOM）などの特殊マーカーが含まれます。見た目が何もないため、プレーンテキストエディタでは非常に見つけにくく、微妙なバグ、レイアウト破損、データ処理エラーの一般的な原因となっています。

ツール説明

Invisible Characters Viewerは、すべての見えない文字を目に見える記号としてその場でレンダリングするインタラクティブなテキストエディタです。任意のテキストを貼り付けるか入力すると、隠れた各文字は即座に小さな記号グリフに置き換えられます。タブは→として表示され、スペースは·として表示され、ゼロ幅スペースは·として表示され、方向マークは→ / ←として表示され、BOMは▯として表示されます。グリフの上にマウスを置くと、文字の完全な名前とUnicodeコードポイントが表示されるツールチップが表示されます。何もエディタから出ません。すべてのレンダリングはブラウザ内でローカルに行われます。

例

入力テキスト（生） ビューアで表示される内容
Hello\u200BWorld（単語間のゼロ幅スペース） Hello·Worldで·グリフがU+200Bをマークしている
\u202Eright-to-left override 開始時に方向グリフが付いた→right-to-left override
line one\r\nline two 改行の前にキャリッジリターンと改行フィードグリフ
\uFEFFstart of file 位置0でBOMを示す▯start of file

機能

  • インラインレンダリング：見えない文字は別のパネルではなく、エディタ内に直接グリフとして表示されるため、周囲のテキストとの関連で表示されます
  • 広範な文字カバレッジ：C0およびC1制御文字、すべての名前付きUnicodeフォーマット文字、Unicodeホワイトスペースバリアント（enスペース、emスペース、ヘアスペース、狭いノーブレークスペースなど）、方向フォーマット文字、バリエーションセレクタ、タグ文字、およびBOMを処理します
  • ツールチップ：グリフの上にマウスを置くと、文字の完全なUnicode名とコードポイント（例：Zero Width Space — U+200B）が表示されます
  • 標準ホワイトスペースハイライト：通常のスペースとタブはCodeMirrorの組み込みホワイトスペースマーカーを使用してハイライトされ、通常のテキストとは視覚的に区別されます
  • プレーンテキストモード：エディタはプレーンテキストモードのままなので、特殊文字は入力時に再解釈または変更されることはありません

ユースケース

  • コピー＆ペーストアーティファクトのデバッグ：PDFやWebページ、ワープロから複製されたテキストには、文字列比較と検索結果の不一致を引き起こすゼロ幅スペース、ソフトハイフン、またはノーブレークスペースが含まれることがよくあります
  • データファイルの検査：CSV、JSON、またはログ出力を貼り付けて、データベースまたはパーサーにインポートする前に予期しない制御文字（ヌルバイト、キャリッジリターン、BOM）を見つけます
  • Webおよびコードのデバッグ：ユーザーが提供した入力またはAPIレスポンスで、レンダリングを破損したり、セキュリティの問題を引き起こす可能性のある隠れた方向マークやフォーマット文字をチェックします

仕組み

このツールはCodeMirror 6を使用し、エディタの表示ビューポート内のすべての文字を反復処理するカスタム拡張機能を備えています。各コードポイントについて、既知の見えない文字のルックアップテーブルをチェックし、Unicodeプロパティクラス\p{Cc}（制御）および\p{Cf}（フォーマット）に対してテストし、バリエーションセレクタおよびタグ文字範囲を検出します。一致した文字は、対応する記号グリフを示すインライン装飾ウィジェットに置き換えられます。通常のスペースとタブはCodeMirrorの組み込みhighlightWhitespace拡張機能に委譲されます。