この記事の続編を書きました。→ ブラウザ上でのOと０、１とIとｌの表示　新方式

１．問題

文字や記号の中にはとても似ているものがあり、それが原因で問題が発生することがあります。
たとえば、サポートセンターのQ＆AではIDやパスワードの入力ミスで「Oと0」「1とIとl」を間違えないようにしてくださいという回答をよく見ます。

この記事も普通にブラウザで表示すると以下のように見えているはずです。

「O」と「0」はまだ幅が狭いほうが「0」ということで、何とか見分けがつきますが、「O」と「0」が続くと非常に分かりにくくなります。

たとえば、C言語の最適化のオプションには「-O0」というものがありますが、分かりにくいので「O(オー)0(ゼロ)」のように説明をつけているこがとが多いです。

「I」と「l」にいたっては、ほとんど判別がつかないという場合が多いのではないでしょうか？

２．経緯

このような分かりにくい表示がどうしてずっとそのままになっているのでしょうか？

実は、昔のパソコンや携帯電話を使っていた人は知っていると思いますが「0」には斜めの斜線が入っていたり、点をつけたりして、一目で「O」と「0」を区別できるようにしていました。

それがなぜ今では区別がつきにくい表示になってしまったのでしょうか？

それは、ディスプレイの解像度が向上するとともに文字の表示がきれいになり「区別がつくようになった」ということで「0」の斜線は廃止されたという経緯のようです。（実際は区別がつかなくてトラブルは発生しているのですが…）

それでも、プログラムを作る人にとっては、誤認式しないように明確に区別する必要があるので今でも「プログラマ向け」のフォントとして0に斜め線の入っているものが存在しています。

しかし、そのようなフォントもプログラマが使う開発環境やツールの中で使うことに限定されています。

ブラウザでフォントを変更することはかなり面倒ですので、依然として区別のつきにくいフォントで表示しており、トラブルが発生し続けているのが現状です。

３．強引な解決策

前から、何とかブラウザでも見やすいフォントに変更して「O」や「0」を簡単に区別できないかと考えていましたが、多少強引な方法を見つけました。

以下、ブラウザでフォントを変更して表示した結果です。

本当に一目で区別のつきにくい文字が判別できるようになりました。

では、その方法について説明します。

(１)フォントを用意する

プログラマ用フォントは色々ありますが、今回は「Myrica」というフォントを使用しました。

ここからダウンロードできます。

ダウンロード後、フォントをインストールします。

(２)拡張機能をインストールする

私はChromeを使っていますのでChromeの拡張機能を導入して、サイトのフォントを変更できるようにしました。

「Stylish」という拡張機能をインストールしました。

(３)設定する

「Stylish」の中でフォントを置き換える設定が必要になりますが、ネット上で色々情報がありますので、それを参考に使い方を見てください。

以下、フォントを変更するスタイルの内容を紹介します。

* {
font-family:”Myrica P” !important;
-webkit-text-stroke-width: 0.2px;
}

一行目はフォントの指定、二行目はフォントを少し太めにする設定です。

これでは、文字が多少小さく表示されますので、フォントサイズを指定するか、ブラウザで拡大表示するようにします。

これで、ブラウザ上でも判別しやすいフォントで表示できるようになります。

色々、探してみましたが、ブラウザ上で文字の判別を向上するための設定についてはあまり情報が無かったので記事を書いてみました。

このような設定で間違いが少なくなることも作業の効率向上につながると思います。

４．1lについて（おまけ）

昔は、１リットルは1lと表記していましたが、今では「1L」の表記ばかりです。

今回の記事を書いていて、判別しにくい例を探そうとして、このことに気が付きました。

これも「1l」が誤認されやすいので「1L」になったのですが…

「1ℓ」という表示もできるようになっていることに気が付きました。

もう、この表記はしないことになっていますが、今でもごくまれにこの表記が使われることがあります。

キリンの「1ℓ for 10ℓ」というキャンペーンサイト（キャンペーンは終了しています）で使われていました。

この「ℓ」を使えば、絶対に小文字の「l」は他の字に間違われることはないのですが、この文字は「l」とは全く別の文字コードですので、特別な場合にしか使うことはできませんね。

たかが表示ですが、間違えれば大変なことになることもあります。