2019年8月18日(日)
等幅文字の表示 #■子猫の手

　等幅文字の問題が半分解決したスッキリ感は、たぶん理解しがたいでしょうが、祝杯を上げたい気分です。ブラウザ自体の整合性が進んだ今、昔ダメだったことが簡単に出来てしまうことがあります。まあ、その良き一例です。

　『子猫の手』では、標準文字を、等幅フォント12ptで表示しています。また、<pre>タグ内に記述することで<br>を不要として、行間を無くすことによって罫線が上下繋がります。

--
<style>

body {
  font-family:monospace;
  font-size:12pt;
}

pre {
  line-height:1em;
}

</style>
--

　パソコンでは、『等幅フォント』で上手に表示してくれるのですが、スマホでは等幅フォントが標準で用意されておらず、何とも情けないガタガタな表示になります。もちろん、<tt></tt>もダメです。

　トドロは、ちょっとした『文字地図』や『文字絵』を描くことを昔から好んでおり、スマホでもきちんと表示できないかと研究してきました。

・半角スペースが、狭く表示。
・半角文字の幅が、狭かったり広かったり。
・全角文字は、漢字とアラビア数字では問題ないようだが、『全角ひらがな』『全角カタカナ』『記号』に狭く表示するものがある。
・環境依存文字の幅が、狭かったり広かったり。

　インラインブロックを使用して、そのブロック幅を指定して、等幅フォントを実現します。これを『等幅インラインブロック方式』と呼ぶことにします。かなり前に試してダメだったと記憶していたのですが、先ほど試してみたら、上手くいくではないですか！

検証ページ
https://neconote.jp/prg/monospace.html

全角文字
<div style="display:inline-block; width:1em;"></div>

半角文字、半角スペース
<div style="display:inline-block; width:0.5em;"></div>

　正確に等幅文字にするには、調整されている文字を等幅インラインブロック方式で記述します。まあ、いちいち調整位置を確認するのは面倒なので、ざっくりと一連の文字を囲んで、その文字数*をwidth:*em;と記述すれば良いでしょう。

　しかし、この等幅インラインブロック方式では、文字幅自体が広いものは、次の文字が上に重なって表示されるので注意が必要です。

　全角と半角を区別して、一文字一文字それぞれに合ったインラインブロックでオブラートのように包めば、一部の文字で重なりは生じるものの、等幅文字っぽく整然と並べることが出来ます。

　ここまで引っ張っておいて恐縮なのですが、自分しか使わないようなマニアックな機能なので、『子猫の手』には機能追加せず、今のところ、個別にインライン方式を適用することにしました。ただ、ホームページ作成において、文字絵コンテンツを追加して、罫線のパレットを復活させようと考えています。

【参照】
ガレコレの地図（修正済み）
https://neconote.jp/index.php?page=304