What’s my text string width?

Here we go again, another snippet into a flash devs mind. Have you’ve ever been tasked with localizing a flash application? Have you ever had the need to determine the width of a string prior to displaying it in a text field? Just recently I had to localize an application in 4 languages, which meant my user interface/design would have to adjust depending on the language or translated string being displayed. I had an issue where I had a combo box on stage which needed to re-size based on the width of the longest string in its DataProvider. The issue spawned a quick and dirty solution which will be helpful to some.
The idea is to take a string, create a text field, provide the text field with the string and determine the text fields width. In a nut shell that’s what the class does. It also has a method that will determine the widest string out of an array of strings.

To state the obvious, flash readily allows a few ways to read the width and height of a TextField display object.
You can use the following properties of the TextField class:

textWidth: The width of the text in pixels.
textHeight: The height of the text in pixels

Or get the width and height using the TextField width and height properties, which will include the invisible frame which surrounds the text field.

TextField.width: The width of the TextField in pixels.
TextField.height: The width of the TextField in pixels.

And last but not least you can use the TextLineMetrics class which will contain information about the text position and pixel measurements of a line of text within a text field.

Anyhow the following example below displays two examples of the the StringUtils.as class in action. The first example takes a string and returns its width and height value which in turn uses the dimensions to display a blue rectangle. The Second examples takes in an array of strings and returns a number which represents the widest string in the array, which in turn uses the width dimension to display a red rectangle.

Get Adobe Flash player

Here’s the StringUtils.as class in its entirety.

/************************************
* @author : Manuel Gonzalez     *
* @blog   : www.codingcolor.com     *
* @email  : design@stheory.com      *
* @www    : www.stheory.com     *
************************************/

package com.utils
{
  import flash.text.AntiAliasType;
  import flash.text.Font;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFormat;
  import flash.text.TextFormatAlign;
  import flash.text.TextLineMetrics;

  public class StringUtils
  {
    public function StringUtils(){}
   
    /*
    Method: getTextLineWidth
    Parameters:
    inStr:String
    inFont:Font
    inTextFormat:TextFormat=null
    Returns:
    Number
    */

    public static function getTextLineWidth(inStr:String, inFont:Font,inTextFormat:TextFormat=null):Number
    {
      var tFormat:TextFormat;
     
      if(inTextFormat == null){
      tFormat = new TextFormat();
      tFormat.size = 12;
      tFormat.align = TextFormatAlign.LEFT;
      tFormat.font = inFont.fontName;
      tFormat.rightMargin = 1;

      }else{
     
        tFormat = inTextFormat;
       
      }
     
      var testField:TextField = new TextField();
      testField.autoSize = TextFieldAutoSize.LEFT;
      testField.multiline = false;
      testField.wordWrap = false;
      testField.embedFonts = true;
      testField.antiAliasType = AntiAliasType.ADVANCED;
      testField.defaultTextFormat = tFormat;
      testField.text = inStr;
     
      return Math.floor(testField.width);
    }
    /*
    Method: getTextLineHeight
    Parameters:
    inStr:String
    inFont:Font
    inTextFormat:TextFormat=null
    Returns:
    Number
    */

    public static function getTextLineHeight(inStr:String, inFont:Font,inTextFormat:TextFormat=null):Number
    {
      var tFormat:TextFormat;
     
      if(inTextFormat == null){
      tFormat = new TextFormat();
      tFormat.size = 12;
      tFormat.align = TextFormatAlign.LEFT;
      tFormat.font = inFont.fontName;
      tFormat.rightMargin = 1;

      }else{
     
        tFormat = inTextFormat;
       
      }
     
      var testField:TextField = new TextField();
      testField.autoSize = TextFieldAutoSize.LEFT;
      testField.multiline = false;
      testField.wordWrap = false;
      testField.embedFonts = true;
      testField.antiAliasType = AntiAliasType.ADVANCED;
      testField.defaultTextFormat = tFormat;
      testField.text = inStr;
     
      return Math.floor(testField.height);
    }
    /*
    Method: getTextWidthAndHeight
    Parameters:
    inStr:String
    inFont:Font
    inTextFormat:TextFormat=null
    Returns:
    Object {width:,height:}
    */

    public static function getTextWidthAndHeight(inStr:String, inFont:Font,inTextFormat:TextFormat=null):Object
    {
      var textObj:Object = {};
      var tFormat:TextFormat;
     
      if(inTextFormat == null){
      tFormat = new TextFormat();
      tFormat.size = 12;
      tFormat.align = TextFormatAlign.LEFT;
      tFormat.font = inFont.fontName;
      tFormat.rightMargin = 1;
      }else{
     
        tFormat = inTextFormat;
       
      }
     
      var testField:TextField = new TextField();
      testField.autoSize = TextFieldAutoSize.LEFT;
      testField.multiline = false;
      testField.wordWrap = false;
      testField.embedFonts = true;
      testField.antiAliasType = AntiAliasType.ADVANCED;
      testField.defaultTextFormat = tFormat;
      testField.text = inStr;
     
      textObj.width = Math.floor(testField.width);
      textObj.height = Math.floor(testField.height);
     
      return textObj;
    }
    /*
    Method: getWidthOfLongestStringInArray
    Parameters:
    inArray:Array
    inFont
    inTextFormat=null
    Returns:
    Number
    */

    public static function getWidthOfLongestStringInArray(inArray:Array,inFont:Font,inTextFormat=null):Number
    {
      var wResult:Number = 0;
      var tFormat:TextFormat;
     
      if(inTextFormat == null){
      tFormat = new TextFormat();
      tFormat.size = 12;
      tFormat.align = TextFormatAlign.LEFT;
      tFormat.font = inFont.fontName;
      tFormat.rightMargin = 1;
      }else{
     
        tFormat = inTextFormat;
       
      }
     
      var len:int = inArray.length;
     
      for(var i:int =0; i < len; i++)
      {
        var testField:TextField = new TextField();
        testField.autoSize = TextFieldAutoSize.LEFT;
        testField.multiline = false;
        testField.wordWrap = false;
        testField.embedFonts = true;
        testField.antiAliasType = AntiAliasType.ADVANCED;
        testField.defaultTextFormat = tFormat;
        testField.text = inArray[i] as String;
       
        var stringWidth:Number = Math.floor(testField.width);
       
        if(stringWidth > wResult){
          wResult = stringWidth;
        }
         
       
      }
     
      return wResult;
    }
   
   
  }
}

The download provides the above example including the StringUtils.as class.
Enjoy!

StringHelper (298)

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: