2019年8月22日(木)
半角スペースの処理 #■子猫の手 子猫の手sysにおいて、半角スペースを に置き換えています。HTMLでは、半角スペースを何個繋げても、1個として表示するからです。
パソコンでは等幅半角スペースとして表示されるのですが、スマホではプロポーショナルフォントで表示される為、幅狭いスペースで表示されていました。
何年待てどスマホで等幅日本語フォントを用意してくれませんが、最新のスマホでは、半角スペースに関しては、 を1/2全角スペースで表示してくれるようです。
--
×iPhone
5c:
iOS10.3.3
○iPhone
XS
Max:
iOS.12.4
--
そして、いつの間にか、ブラウザの方でも、style="display:inline-block;"が問題無く使用できるようになっていました。
ガレコレＨＰにおいて、インラインブロック方式で表示してみました。すべてのデバイスで、きちんと等幅半角スペースで表示されています。古いスマホが消えるまでの、応急処置です。
-- インラインブロック方式
<style>
.space {
display:inline-block;
width:0.5em;
}
</style>
<div class="space"> </div>
--
┃全角スペースx2
┃半角スペースx2＋全角スペースx1
┃半角スペースx4
【元】
半角スペース→ // 子猫の手sys
【応急処置】
半角スペース→ // 子猫の手sys
→<div class="space"> </div> // 公開ページ
【将来】元に戻す
半角スペース→ // 子猫の手sys
つまり、『子猫の手』に限らず、ホームページ作成において、等幅半角スペースを1/2全角スペースで表示したい場合、古いスマホにも対応するには『インラインブロック方式』を使用して、古いスマホを切り捨てれば『 』で良いということです。
P.S.
分かってしまえば簡単なことでしたが、子猫の手sysにおいて、ブログの編集の際、テキストを →半角スペースに戻していないバグがあり、複雑怪奇な現象になっていました。このバグも修正しました。
P.S.2
等幅フォント名（'Courier
New'など）を指定すると、半角文字の幅は揃いますが、全角文字の1/2幅より広くなります。また、○などが半角文字として扱われたり、意図した使い方ができません。なので、『子猫の手』では、family-font:monospace;
だけ指定しています。
https://neconote.jp/prg/monospaced_font.htmlP.S.3
一部のデバイスで、コピー＆ペーストすると、一部のアプリで半角スペースが消える現象が起きていました。<div></div>内に、 を入れることで解決しました。
○<div class="space"> </div>
×<div class="space">
</div>
×<div class="space"></div>
お問い合わせ