前回、テキストボックスの最適なフォントサイズについて書いた。
thom.hateblo.jp
そこでテキストボックスのHeightプロパティを21に設定したが、今回はその根拠と複数行書ける場合の最適なHeight値の求め方を紹介する。
Meiryo UI 12ポイントのときのテキストボックスの最適な高さ
まず以下のようにさまざまなサイズで実験を行った。
このとき、高さ18では文字入力中に謎の下線が現れるというバグが、19と22ではなぜかアルファベットが太く見えるというバグが出現した。
つまりこれらは適切なサイズとは言えない。
次に余白のバランスを見るためにPowerPointで縞模様のシェイプをあてがってみた。
高さ23、24は明らかに下が空きすぎているのでアウト。
ただしこれはフォントによるので注意。
メイリオなどは更に下余白が大きい。
thom.hateblo.jp
さて、あとは高さ20と21のどちらかが候補であるが、さらにズームし、余白部分を半透明化してみたところ、余白20ではパイプ文字が余白に差し掛かってしまうことが判明。
ということで、Meiryo UI 12ポイントの最適なテキストボックスのHeightは21とした。
ただし、BorderStyleがfmBorderStyleSingleに設定されていることが前提。ほかのスタイルでは余白値が変わってしまうので、スタイル設定後に高さを合わせよう。
複数行のテキストボックスの高さを求める
テキストボックスのMultiLineプロパティをTrueに設定すると、複数行の表示が可能になる。さらにEnterKeyBehaviorをTrueに設定すると、Enterキーで改行できるようになる。
さて、このときHeightプロパティをいくつに設定すれば綺麗に見えるだろうか。
もちろん、グリッドに合わせて適当にマウスで設定したのでは綺麗にならない。
そこで地道な作業であるが、Heightをプロパティで調節しながら、画像をペイントに張り付け、1行のときと2行のときで下の余白がぴったり一致するHeight値を探る。
Meiryo UI 12ポイントで2行の場合、最適なHeight値は36だった。
じゃあ3行以上なら、この作業を延々と繰り返すのかというと、そんなことをする必要はない。
1行の場合のHeightが21、2行の場合のHeightが36という2つの値があれば、あとは計算で求まるのである。
つまりこういう連立方程式になる。
文字高さ × 1行 ＋ 余白高さ = 21
文字高さ × 2行 ＋ 余白高さ = 36
このままでは計算しにくいので文字高さをx、余白高さをyとしよう。
x ＋ y = 21
2x ＋ y = 36
一応、計算過程は以下のとおり。
ということで、文字高さは15、余白高さは6と求まった。
では5行表示させる場合の最適な高さは？
15 × 5行 + 6 = 81
実際に81に設定してみた。
余白はバッチリ！
以上。
