縦線の違いに気をつけろ(「│」と「|」は違う文字)

この記事はだいぶ前に書かれたものなので情報が古いかもしれません
一つだけ違う縦線があります

この記事を三行にまとめると

よーく見ると違う字だなって分かる
縦線を辞書登録しておきました
それはたぶん解決できるはずだから
問題:上記の画像の中に一つだけ他とは違う縦線があります。どれか分かるかな?



開発系の記事を書いてる時にファイル一覧のツリーを書くことがあります。こんな(↓)感じのやつ。

/normnois
  ├ /folder1
  │   ├ file1
  │   └ file2
  │
  ├ /folder2
  |   ├ file3
  |   └ file4
  |
  └ file5

ここで使っている縦線(│)なんですけど、よーく見るとfile1やfile2の左側にある縦線とfile3やfile4の左にある縦線は違う文字を使っているんですよ。でも僕はいつも記事を書く時によーくなんて見てなかったから、実は違う文字を使っていたことに気づかなかったんです。

というのもですね、この二つの縦線(│と|)、大半の環境ではほぼ同じ字に見えるんですよ。今みたいに横に並べると高さの違いがはっきりと分かるんですけど、ツリーを書いてる時みたいに縦に並べるとパッと見は同じ字に見える。

文章だと見ている人の環境によって変わっちゃうんで画像で見比べてみましょう。

例えば普段僕が使用しているMacのChromeで見るとこんな感じです。

Chrome

よーく見ると隙間の大きさが違うんで違う字だなって分かるんですけど、よーく見ないと分からないよね。SafariやFirefox、Edgeなどでも見え方はほぼ同じです。

でもフォントの種類や端末によっては顕著な差が出ることがあります。僕の場合はAndroidのChromeで見た時はこんな感じになった。



下の方の短い縦線がちょっとズレてますよね。

正直なところ、僕はほとんどの記事でこのズレちゃう方の縦線を使ってたんですよ。だからAndroidでだけズレちゃうのが何でなのか全然分かりませんでした。フォントの種類をいろいろ変えて確認したんですけどどうしても直らない。たぶんスマホでうちの開発技術の記事を見る人は限りなくゼロに近いだろうから仕方ないかなあなんて思ってたんですが、でも念のためにツリーを書いている記事を全部確認してみたら、ちゃんとズレずに表示されている記事もあったんですよ。何でやねんと思ってよーく見てみたら実は別の字を使っていたと、そういうわけなのです。

とりあえず同じミスをしないために「│」の縦線(Androidでもズレない方)を辞書登録しておきました。

いやあ……まさか別の字だったとはね。ずーっと前に全角チルダと波ダッシュは違う字だーっていう記事を書いたことがありましたが、あれよりも難易度の高い間違い探しでしたわ。

みなさんもツリー図を書いてて縦線がどうしてもズレちゃうって思うことがあったら、よーく字を見てみてください。それはたぶん解決できるはずだから。



ちなみに冒頭の問題の答えは右から八列目、上から七段目の縦線です。よーく見ると他よりもわずかに線が短い。
 もしかしたら何か関連しているかも? 
 質問や感想などお気軽にコメントしてください