Calculating Text Width In ActionScript And Flex

Question

I\'m trying to calculate how WIDE to make my button, based on the text that it will contain, and when I try to google for how to calcuate something as simplistic as the WIDT

Answer 1

as I think, textField.textWidth construction works fine... until you change the font size. It seems it calculates width based on 12px font. So, if you have embedded font and global styling you can try fast solution:

var realWidth = myLabel.textField.textWidth * (fontSize / 12);

I've tried this on long and short strings and the result is correct.

Answer 2

This works any format, size, font type. Don't forget properties "autoSize" and "wordWrap"!

var tf:TextField = new TextField();
addChild(tf);
tf.autoSize = TextFieldAutoSize.LEFT;
tf.wordWrap = false;
tf.text = "Whatever here";
tf.width = tf.textWidth + 4; // add 2 pixels-gutters left & right

Your button will need to be "tf.width" wide...

Answer 3

Sounds like you could use textWidth

Answer 4

Here's how you do it in Spark:

I've modified - simplified - his example a bit here:

var textMetrics:TextLineMetrics = label.measureText( label.text );  
var textWidth:int = textMetrics.width; 

Answer 5

Following up my comment on quoo's answer, here's the code for same purpose, but just grabbing the width out of a TextField, using TextLineMetrics as well:

    public function mtxtWidth(container:TextField):int {
       var lineMetrics:TextLineMetrics = container.getLineMetrics(0);
       return lineMetrics.width;      
    }

Answer 6

So long as you're in a UIComponent, you can use the measureText function.

public function howWideWouldThisTextBeIfItWereInThisButton(text:String,container:Button):int {
   var lineMetrics:TextLineMetrics = container.measureText(text);
   return lineMetrics.width;      
}

That being said, the flex button component should automatically size to the width of the text, if you don't set a width on it. That way if you need the text width, you can just call use the textWidth property.