TextFieldの行間をマイナスに設定した場合の注意

TextFieldの行間は、TextFormatオブジェクトのleadingプロパティで指定出来ます。フォントサイズを大きくした場合、文章の見栄えを整えるために行間をマイナスに指定することがたまにあります(フォントサイズを大きくすると境界枠とグリフの間の余白が目立つので)。
その際、TextFieldのautoSizeプロパティが"none"以外に設定されている場合は注意が必要です。

TextFieldの行間をマイナスに指定し、autoSizeプロパティをデフォルトの"none"以外に設定するとテキストの下端が切れてしまいます

以下、確認用のコードです。

package {
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFieldAutoSize;

    public class Test1 extends Sprite
    {
        private var text1:TextField;
        private var text2:TextField;
        public function Test1()
        {
            text1 = new TextField();
            text1.x = 0;
            text1.y = 0;
            text1.height = 15;
            text1.width = 500;

            text2 = new TextField();
            text2.x = 0;
            text2.y = 20;
            text2.height = 15;
            text2.width = 500;

            var fmt:TextFormat = new TextFormat();
            fmt.size = 10;
            fmt.leading = -5;
            text1.defaultTextFormat = fmt;
            text1.text = "このTextFieldはleading=-5に設定されています。autoSizeの指定をしていません。";

            text2.defaultTextFormat = fmt;
            text2.autoSize = TextFieldAutoSize.LEFT;
            text2.text = "このTextFieldはleading=-5に設定されています。autoSizeは、LEFTに指定されています。";

            addChild(text1);
            addChild(text2);
        }
    }
}

コンストラクタ内でまず、TextFieldのインスタンスtext1とtext2を作成し、二つとも同じ書式で行間が-5に設定してあります。
問題のautoSizeプロパティはtext1がデフォルト値(none)でtext2がLEFTに設定されています。そのため、下側に表示されているtext2の下端が切れています。

何故このような現象が起こるのかというと、おそらくautoSizeが指定されているときのTextFieldのheight(というか、描画領域の高さ)の計算式がおそらくフォントの高さ + 行間になっているのが原因なのではないかと思います。
2行目の描画開始位置をleadingを踏まえて決定すればいいだけだと思うのですが、そうは実装されていないです。無念です。

そう実装されているものは仕方ないということで、次に、どういう作業手順でこの問題が発生しやすいのかを検討してみました。
というか、私がこの問題にたどりついた作業手順は次の通りです。

  1. Flash CS3でTextField(A)を設置しフォントサイズを大きくする
  2. 行間をマイナスに設定し、見栄えを整える
  3. もう一つのTextField(B)を設置し、フォントサイズを小さくする
  4. (B)をダイナミックテキストに指定しアクションスクリプトで操作する

この手順だとすばらしいことにTextField(B)を設置した時点で前のTextField(A)の設定がコピーされています。そのため、行間を指定していたことに気づかずアクションスクリプトでautoSizeを設定すると文字の下側が消えます。

しかも、この行間の設定がプロパティウィンドウの中でも分かりづらい位置にあるので設定されていることに気がつきづらいです。

この状態では、行間の設定は隠れているので見えません。


見事に数時間嵌まりました。