« 全てのtextareaを自動的にリサイズするJavaScriptとGreasemonkey | メイン | JavaScript第5版読書会#4終了しました »

続・全てのtextareaを自動的にリサイズするJavaScriptとGreasemonkey

はてなブックマークコメントで、再度id:rokuroxから突っ込みが。画像とともに、「全角が半角のちょうど2倍ではないから駄目。」と。意味がやっと理解できました。
全角が半角の2倍ではない件に対して考えられる原因は三つ。あくまで自分の知識の範囲内でありますが。全てフォントのグリフの問題。どれかが原因だと思いますが、手元にWindows環境がないため、的がはずれている可能性もあります。
まず、よくあるパターンとして、font-familyに等幅フォント(monospace)を指定していないため、プロポーショナルフォント(proportional)が使われている点。これは、単純にstyleを指定すれば解決しますが、この手のcodeでそこまで操作していいのかどうかという問題があります。問題というよりも思想かもしれませんが。Greasemonkeyとして実装するのであれば、全site閲覧時に実行されます。「textareaの伸縮を合わせるためだけにためにそこまでするのか」という点があり今回は見送りました。
次に、フォントそのものの問題。半角の倍の幅と全角の幅があっていない可能性。全角/半角という概念は見た目からくる俗称であり、本来文字の幅が一定とは決まっていません。あくまで活版印刷とその延長上にあるコンピュータ上の文字表現能力では、この方が都合が良かったからです。この制約がなくなって登場してきたのが上記のプロポーショナルフォントです。更に、フォントの作成上、漢字圏の文字の幅とラテン圏の文字の幅が2:1である必要はありません。慣習的に2:1になっているのです。フォントのデザインが2:1となっていてもDTP作業時に字詰め(これをカーニングといいます)が行われることもあります。ちょっと話がそれました。
最後に、Windows固有の問題。これは実装時にも考慮してませんでした。随分前にはまって苦労したのですが、すっかり忘れてました。詳細は下にリンクを貼っておきますのでそちらをどうぞ。簡単にいうと、フォントサイズを指定する際、ポイントで指定する場合は3の倍数でないと半角と全角の幅の比が1:2になりません。これを防ぐには一つ目の原因と同様にstyleを指定する必要があります。同様にGreasemonkeyにそこまでさせるかという問題、さらに絶対単位か相対単位のどちらを用いるのかという問題もあります。
以上の理由により、今回のcodeではtextareaのcolsとrowsしかさわっていません。styleを指定してそのまま使われる可能性よりも、指定せずに置いた方が無難だと考えました(言い訳になりますが、書きはじめた段階では、addAutoResizeTextareaの中には「textarea.style.fontFamily="monospace";」と書かれていました。)。あと、憶測ですが、三番目が一番あやしいのではないかと思っています。
おまけ : 10.5という文字サイズ
昔のWindowsのアプリケーションでは10.5ptという非常に中途半端な文字サイズが選択肢にありました(今では11ptに置き換わっています)。何故、このようなサイズなのかというと、ピクセル換算した時に14pxと非常に都合の良い値となるためです。1ポイントが1/72インチというのは知られていますが、1/50や1/60、1/100ではなく1/72であるのは理由があります。72の約数は、「2,3,4,6,8,9,12,18,24,36」と豊富にあります。約数が多いという事は組版上、非常に都合がいいのです。例えば、1/4インチである18ポイントの場合を考えてみます。
18,9+9,6+12,6+6+6,...etc
1/100インチを1ポイントとした場合、約数は2,4,5,10,25,50だけです。1/60では「2,3,4,6,10,12,15,20,30」ですが、その後の組み合わせに多少無理が生じますし、6~10の間がありません。ここまでで収まっていればまだ良いのですが、まだ続きます。Macの場合、ディスプレイにおいても同じく1/72が基準となっています。こちらの単位はdpi(dot per inch)です。これはWYSIWYGが考慮されいるからだと思います。しかし、Windowsの場合、画面表示は96dpiです。ワープロ等で12ポイント(1/6インチ)で指定した文字を、画面でも1/6インチで表示しようとすると16ドット必要になります。「1,2,3,4,6,8,9,12,18,24,36,72」をWYSIWYGの為に変換すると(4/3を乗算)、「1+1/3,2+2/3,4,5+1/3,8,10+2/3,12,16,24,32,48,96」となり非常に混沌としてきます。しかも、画面表示の上で12ドット(1/8インチ)では小さ過ぎ16ドット(1/6インチ)では大き過ぎたため、間に14ドットの文字を定義してしまいました。これをポイントに換算すると、
14(dot) * 3/4(point/dot) = 10.5(point)
となります。これが10.5という文字サイズの正体です。

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

Google

タグ クラウド