Recipe 8.12 Sizing Text Fields to Fit Contents

8.12.1 Problem

You want to size a text field's viewable area to fit the text it contains.

8.12.2 Solution

Use the autoSize property, or create and use a custom createAutoTextField( ) method.

Alternatively, you can also set the _width and _height properties based on the values of the textWidth and textHeight properties.

8.12.3 Discussion

You can set the autoSize property of a text field so that it automatically resizes itself in order to fit its contents. By default, autoSize is set to "none", meaning that the text field does not automatically resize. There are six possible values for the autoSize property, but two possible values are redundant, leaving four effective settings:

"left" or true

Set the property to "left" or true if you want the text field to resize while fixing the upper-left corner's position. In other words, the text field's lower-right corner will be the point that moves when it expands and contracts.

// These two lines do the same thing.
myTextField.autoSize = "left";
myTextField.autoSize = true;

"center"

Set the property to "center" if you want the text field to be anchored at its center point. While the top of the object remains fixed, it will expand and contract downward and equally to the right and left.

myTextField.autoSize = "center";

"right"

Set the property to "right" if you want the upper-right corner of the text field to remain steady while the object expands and contracts in the direction of the lower-left corner:

myTextField.autoSize = "right";

"none" or false

Set the property to "none" or false if you want to turn off the autosize functionality, in which case the text field dimensions do not adjust automatically:

// These two lines do the same thing.
myTextField.autoSize = "none";
myTextField.autoSize = false;

It is convenient to create auto-sizing text fields using a custom createAutoTextField( ) method. You should add the following code to your TextField.as file (or the MovieClip.as file from Chapter 7) for easy inclusion in other projects:

MovieClip.prototype.createAutoTextField = function (name, 
                                                    depth, 
                                                    x, y, 
                                                    w, h, 
                                                    val, 
                                                    align) {

  // The align parameter is assigned to the text field's autoSize property.
  // Defaults to true (same as "left"). Ignored if width, w, is specified.
  if (align == undefined) {
    align = true;
  }

  // Create the text field using the built-in MovieClip.createTextField(  ) method.
  this.createTextField(name, depth, x, y, w, h);

  // If the width, w, was 0 or unspecified, set the autoSize property so that the
  // text field resizes to fit its contents.
  if (w == undefined || w == 0) {
    this[name].autoSize = align;
  }

  // If a value was provided, assign it to the text field's text property.
  if (val != undefined) {
    this[name].text = val;
  }
};

You can use the custom createAutoTextField( ) method as you would use the built-in createTextField( ) method. The primary difference is that createAutoTextField( ) creates an auto-sizing text field with a single method invocation. Additionally, the val parameter allows you to assign text to the text field when creating it.

// Make sure to include the necessary ActionScript file. This assumes you added the
// custom createAutoTextField(  ) method to TextField.as and not MovieClip.as
#include "TextField.as"

// Create a text field that autosizes and give it a text value of "init value".
_root.createAutoTextField("myAutoText", 1, 0, 0, 0, 0, "init value");

If you do not want to use the auto-size feature, you can manually adjust the _width and _height properties. This might be useful if, for example, you want to fix the text field width but adjust the height manually to fit the content. You can retrieve the contents' width and height using the textWidth and textHeight properties. Then you can set the _width or _height properties accordingly.

Because a text field's total width and height are slightly larger than the width and height of the text it contains, you will likely find that if you set the _width and _height properties to the textWidth and textHeight properties, the text may be cut off. You can account for this discrepancy by adding a margin as necessary. This example resizes the text field a little larger than the reported property values to accommodate the contents:

myTextField._width  = myTextField.textWidth + 5;
myTextField._height = myTextField.textHeight + 5;

8.12.4 See Also

Recipe 8.8