TextField設定レシピ (0) - フォントのズレを計算する

taro

Dec 28, 2009

TextField
TextFormat

こんにちはtaroです.

TextFieldの設定方法は色々奥が深いなーと思う今日この頃です.

今回は

のようなテキスト入力のフォームがあるとします.このフォームは環境によって見え方が変わってきます.

スクリーン・ショットを取ると下のようになります. 並べて見ると色味が違うのにも気づきますが、ここではテキストの位置がMacの方でやや下に来てしまうということについて考えます.

Winと書いてしまっていますが、XPの場合ですので、vistaの場合下のスクリーンショットのようにはならないかもしれません.

Flash Player 10でテキスト周りの機能が追加されましたが、Flash Player 9向けにBitmapDataを使ってフォントのメトリックスを計算してみます.

大枠は次の通り

TextFieldと同サイズの白地のBitmapDataを用意する.
フォントの色を黒で測りたい文字をTextFieldに入れる.
getColorBoundsRect()を使ってフォント・サイズを計算.

この方法ですと、アンチエイリアスの部分のピクセルの誤差は出てしまいますが、そこら辺はいい加減にしてしまいます.

ASにしてみると、こんな感じでしょうか.

// 入れる文字
const INIT_TEXT:String = '名前を入力してください';

// 書式の設定
var tfm:TextFormat = new TextFormat;
tfm.bold = true;
tfm.letterSpacing = 0.7;
tfm.font = '_ゴシック';
tfm.color = 0x000000;
tfm.size = 14;

// メトリックス計算用のTextField
var tf:TextField = new TextField;
tf.text = INIT_TEXT;
tf.setTextFormat(tfm);
// TextFieldの大きさを設定
tf.width = tf.textWidth + 4;
tf.height = tf.textHeight + 4;

// BitmapDataに描画
var bd:BitmapData = new BitmapData(tf.width, tf.height);
bd.draw(tf);

// フォントのメトリックスを計算
var rect:Rectangle = bd.getColorBoundsRect(0xffffff, 0);
tf.text = rect.toString();
addChild(tf);

下がコンパイルして出来たswfファイルです.

手元のマシン、Win XPでは、(x=2, y=2, w=148, h=13)、Macでは、(x=4, y=5, w=160, h=12)と表示されています. 環境によって多少誤差はあるかもしれません.

どうやらこの座標の違いが、フォントの違いによる位置のズレのようですね. 調整方法ですが、

デザインの基準とする環境を決めて、フォントの位置を調節
フォントのメトリックを計算して、基準環境との差異を計算して、ズレを調節

では、早速この差分だけ移動させてみましょう.

基準環境はx = 2, y = 2ですので、実際の値rect.x, rect.yとの差をとります.

_tf.x -= (rect.x - 2);
_tf.y -= (rect.y - 2);

実行結果のスクリーン・ショットになります.

少しだけ改善されていますね. フォントの幅や高さなど微妙に違いますので、更にそれが問題となる場合は、幅の調節もしていきます.

サイズ面に関しては_level0の過去のエントリを調べるといくつかあるようです.

幅であわせるのか、高さであわせるのか、というあたりになってくるとデザイン的な話にもなってきますので、デザイナさんと一緒に作っている場合は、 Flashでのフォントの特性を良く理解してもらって、それぞれの環境で見たときに最もイメージに近いものにしていくということになりますね.

少々面倒ですが、きっちり配慮されていると良いですね.