2020年1月28日(火)
[JavaScript] 同じ文字数のテキスト入力幅 #■パソコン・通信 目標は、すべてのブラウザおよびすべての拡大（ズーム）において、テキスト入力<textarea></textarea>で、一行の文字数が22または40にするというものでした。
結果から言いますと、100％以上の拡大に関しては、壮大なプログラミングは必要ありませんでした。
『子猫の手』では、縮小（90%、80%、75%…）は必要ありません。拡大（100%～200%）で、<textarea></textarea>に意図した文字数で表示できればいいことです。それには、font-family:sans-serif;とfont-family:inherit;だけで実現できます。
開発プログラムの新旧混在で、自分が自分に騙されることは、しばしば起こることです。font-family:monospace;は、もはや使えないと言っておきながら、半年以上前に開発途中であった『子猫の手』の画面設計に使ったままになっていて、上手くいかないと悩んでいました。ブラウザの設計ってこの程度なんだとの思い込みが招いたミスです。
どのブラウザでも、<body>に設定したフォントが、<textarea></textarea>に反映されないことは承知しており、<textarea></textarea>のフォントにinherit（上位継承）を設定することで解決できます。
迂闊にも、<body>にmonospaceを設定してあったために、ブラウザごとに、拡大（ズーム）ごとに、<textarea></textarea>内の文字数の挙動が異なり、大いに悩んだ挙句、<textarea></textarea>の補正プログラムを作成しました。
https://neconote.jp/prg/textarea.html 上記のプログラムは、手前味噌ですが優れもので、どんなフォントでも、どんな縮小倍率でも、ちゃんと意図した文字数の幅に補正してくれます。
技術的には、display:inline-block;を利用しており、罫線や文字絵に拘ったときに知り得た知識が巡り巡って活きています。
フォントを切り替える機能を付けて、初めて、同じ文字数にならないのはmonospaceが起因していると気付きました。反省。
【フォントについて】
Windows環境において、フォントは『メイリオ』を使用します。『メイリオ』は、Windows
Vista以降の標準システムフォントです。欧文部はプロポーショナルフォント、和文部は等幅フォントで、全体としてプロポーショナルフォントになっています。なので、全角日本語において、ずれないので利便性の高いフォントになっています
なお、『ＭＳ
ゴシック』は今も利用されており、IE11の初期フォントがＭＳ
ゴシック系なので、ややこしくなっています。IE11一般利用者の方は、フォントを『メイリオ』に変更しておくと良いですよ。
iPhone、iPadを含むMac環境において、フォントは『ヒラギノ角ゴ
ProN
W3』を使用します。全角日本語は、ほとんど等幅なのですが、一部の文字の組み合わせで、字間が狭まります。あくまでも、プロポーショナルフォントなのです。
Android環境において、フォントは各メーカー様々で、問題も色々あるので、ここでは議論に上げません。あしからず。
P.S.
問題解決したので、一気にプログラミング開発が進みます。2月2日リリースには、間に合いそうにないけどね。答えは単純明快ですっきりしたのですが、いやはや、回り道が過ぎました。
P.S.2
下記は、かなり使えるWebページです。
総称ファミリ名分類のフォント名一覧
https://w3g.jp/sample/css/font-family
お問い合わせ