ガレコレ
Garage Collection
トップページ


 ■子猫の手
 バグ修正した『子猫の手』を、ご利用頂けるようになります。

 ほとんど裏方の修正で申し訳ありません。ガレコレのホームページで、ずっと検証してきて、ようやく安定しました。

 また、近々『子猫の手』作成画面を再構築したバージョンに切り替えます。


P.S.
 
天気が悪いので、海のお仕事は壊滅、草刈りの仕事もようこなせず、集中してパソコンに向かっております。JavaScritにおいて、昔できなかったことが、かなりできるので驚いています。画面設計がもうすぐ終わるので、出来たらそれを公開します。


P.S.2
 
文字修飾パレットなどを復活させた『子猫の手
 
バージョン3』は、来年1月15日リリースを目指して、開発中です。
 
 子猫の手sysにおいて、半角スペースを に置き換えています。HTMLでは、半角スペースを何個繋げても、1個として表示するからです。

 パソコンでは等幅半角スペースとして表示されるのですが、スマホではプロポーショナルフォントで表示される為、幅狭いスペースで表示されていました。

 何年待てどスマホで等幅日本語フォントを用意してくれませんが、最新のスマホでは、半角スペースに関しては、 を1/2全角スペースで表示してくれるようです。

--
×iPhone
 
5c:
 
iOS10.3.3
○iPhone
 
XS
 
Max:
 
iOS.12.4
--

 そして、いつの間にか、ブラウザの方でも、style="display:inline-block;"が問題無く使用できるようになっていました。

 ガレコレHPにおいて、インラインブロック方式で表示してみました。すべてのデバイスで、きちんと等幅半角スペースで表示されています。古いスマホが消えるまでの、応急処置です。

-- インラインブロック方式
<style>
.space {
  display:inline-block;
  width:0.5em;
}
</style>

<div class="space">&nbsp;</div>
--

  ┃全角スペースx2
 
 
 ┃半角スペースx2+全角スペースx1
 
 
 
 
┃半角スペースx4

【元】
半角スペース→&nbsp; // 子猫の手sys

【応急処置】
半角スペース→&nbsp; // 子猫の手sys
&nbsp;→<div class="space">&nbsp;</div> // 公開ページ

【将来】元に戻す
半角スペース→&nbsp; // 子猫の手sys


 つまり、『子猫の手』に限らず、ホームページ作成において、等幅半角スペースを1/2全角スペースで表示したい場合、古いスマホにも対応するには『インラインブロック方式』を使用して、古いスマホを切り捨てれば『&nbsp;』で良いということです。


P.S.
 
分かってしまえば簡単なことでしたが、子猫の手sysにおいて、ブログの編集の際、テキストを&nbsp;→半角スペースに戻していないバグがあり、複雑怪奇な現象になっていました。このバグも修正しました。


P.S.2
 
等幅フォント名('Courier
 
New'など)を指定すると、半角文字の幅は揃いますが、全角文字の1/2幅より広くなります。また、○などが半角文字として扱われたり、意図した使い方ができません。なので、『子猫の手』では、family-font:monospace;
 
だけ指定しています。
https://neconote.jp/prg/monospaced_font.html


P.S.3
 
一部のデバイスで、コピー&ペーストすると、一部のアプリで半角スペースが消える現象が起きていました。<div></div>内に、&nbsp;を入れることで解決しました。

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

 『子猫の手』では、標準文字を、等幅フォント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
 
 『子猫の手』において、作成ページと公開ページともに、SSLに対応させました。

 ガレコレの『子猫の手』で、検証中。検証済み次第、お客様の『子猫の手』をSSLに対応させていきます。


P.S. neconote.jpサーバの常時SSL化ではありません。『子猫の手』のみPHPで、常時SSL化を実現しています。

 サーバの常時SSL化は、いろいろ問題があるので、実施しておりません。httpが完全にhttpsに移行すれば、問題は発生しないので、その時期まで待っています。
 

お問い合わせ


by Network Communication Note