25文字を三行に分けて等幅で表示するときに、どれくらいのサイズになるのか、みたいなことを調べるためのツール
TextSize確認君 – wonderfl build flash online
上部のエリア入力された文字が指定のフォント、サイズで下に表示される。
フォント名は、閲覧しているPCにインストールされているフォント。
「_」（アンダースコア）から始まるフォント名は、Flash側で解釈して、よきに計らってくれる指定方法。
「_ゴシック」なら、MacならOsakaとかWinならMSゴシックとか、とにかくインストールされている標準的なゴシックフォントとして解釈してくれる。Webで利用する場合は、閲覧PC環境が特定できないので、これら「_」（アンダースコア）付のフォントをすることになる。
また、実際には「_等幅」を使うことがほとんどだ。
これは、WindowsでもMacでもほぼ同じ幅高さの文字になるので、レイアウトを確定させやすいから。
次の画像は、WindowsとMacでテキスト表示エリアをキャプチャして並べたもの。
フォントの形と高さが2px異なるが幅が同じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 |
package { import flash.display.Sprite; import flash.events.Event; /** * ... * @author umhr */ public class WonderflMain extends Sprite { public function WonderflMain() { init(); } private function init():void { if (stage) onInit(); else addEventListener(Event.ADDED_TO_STAGE, onInit); } private function onInit(event:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, onInit); // entry point stage.scaleMode = "noScale"; stage.align = "TL"; addChild(new Canvas()); } } } import com.bit101.components.Label; import com.bit101.components.Style; import com.bit101.components.TextArea; import flash.display.Sprite; import flash.events.Event; import flash.text.TextField; import flash.text.TextFormat; /** * ... * @author umhr */ class Canvas extends Sprite { private var _textArea:TextArea; private var _layoutTF:TextField = new TextField(); private var _fontChooser:FontChooser; private var _label:Label; public function Canvas() { init(); } private function init():void { if (stage) onInit(); else addEventListener(Event.ADDED_TO_STAGE, onInit); } private function onInit(event:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, onInit); // entry point Style.embedFonts = false; Style.fontName = "_等幅"; Style.fontSize = 12; // 入力欄 _textArea = new TextArea(this, 5, 5, "TextArea"); _textArea.width = 455; _textArea.textField.type = "input"; _textArea.addEventListener(Event.CHANGE, change); // フォント選択 _fontChooser = new FontChooser(); _fontChooser.addEventListener(Event.CHANGE, change); addChild(_fontChooser); // フォント名やサイズ表示ラベル _label = new Label(this); _label.x = 5; _label.y = 284; // 流し込み結果 _layoutTF.border = true; _layoutTF.defaultTextFormat = new TextFormat("_sans", 14); _layoutTF.multiline = true; _layoutTF.autoSize = "left"; _layoutTF.x = 5; _layoutTF.y = 300; addChild(_layoutTF); _textArea.text = "ABCdefg1234あいうえおかきくけこ"; change(null); } private function change(event:Event):void { _layoutTF.defaultTextFormat = new TextFormat(_fontChooser.fontName, _fontChooser.fontSize); _layoutTF.text = _textArea.text; var tempText:String = _layoutTF.text; //改行などを除いた文字数をカウントするために。 tempText = tempText.replace(/\n|\r|\t/g, ""); var text:String = ""; text += "FontName:" + _fontChooser.fontName; text += ", FontSize:" + _fontChooser.fontSize; text += ", 文字数:" + String(tempText.length); text += ", W:" + String(_layoutTF.width) + "px"; text += ", H:" + String(_layoutTF.height) + "px"; _label.text = text; } } import com.bit101.components.List; import com.bit101.components.NumericStepper; import com.bit101.components.VScrollBar; import flash.display.Sprite; import flash.events.Event; import flash.text.Font; /** * ... * @author umhr */ class FontChooser extends Sprite { public var fontName:String = "_等幅"; public var fontSize:Number = 14; public function FontChooser() { init(); } private function init():void { x = 5; y = 115; var list:com.bit101.components.List = new com.bit101.components.List(this, 0, 0, [ "_等幅", "_typewriter", "_ゴシック", "_sans", "_明朝", "_serif"]); list.selectedIndex = 0; list.width = 200; list.height = 160; list.addEventListener(Event.SELECT, list_select); var fontList:Array/*Font*/ = Font.enumerateFonts(true); var n:int = fontList.length; for (var i:int = 0; i < n; i++) { list.addItem(fontList[i].fontName); } //fontList[i].fontType var numericStepper:NumericStepper = new NumericStepper(this, 220); numericStepper.value = fontSize; numericStepper.addEventListener(Event.CHANGE, numericStepper_select); } private function numericStepper_select(event:Event):void { var numericStepper:NumericStepper = event.target as NumericStepper; fontSize = numericStepper.value; dispatchEvent(new Event(Event.CHANGE)); } private function list_select(event:Event):void { var list:com.bit101.components.List = (event.target as com.bit101.components.List); // 次の指定だとスクロールしてもの選択位置が移動しない。 //fontName = _list.selectedItem.toString(); var vScrollBar:VScrollBar = list.getChildAt(1) as VScrollBar; var num:int = list.selectedIndex + vScrollBar.value; fontName = list.items[num]; dispatchEvent(new Event(Event.CHANGE)); } } |
