On a recent job I was tasked with creating a visually elegant replacement for an image out of some text (when an image was unavailable).
I decided to adjust the font-size of each line of text in a block to fill a box.

The result is the TextBoxTest class.
To use it, you create a text field, set it’s properties (text/size/multiline etc), then send it to the TextFitter class like this:

1
2
3
4
5
var field:TextField = new TextField();
field.text = "THIS IS SOME DEMO TEXT.";
field.width = field.height = 50;
field.multiline = field.wordWrap = true;
TextFitter.fit(field);

The second parameter is ‘defaultSize’, this gives the TextFitter a starting point when resizing the text and does affect the end result. If ommitted, the font-size from the ‘defaultTextFormat’ will be used.

If wordWrap is set to false, you’ll have to manually add line-breaks. In this mode lines of text will simply be resized until they’re the same width as the field itself (the height of the field will be ignored).

If wordWrap is set to true, the height of the field will be taken into account, and the text will be reduced in size until it all fits within the field. If ‘defaultSize’ is ommitted and ‘wordWrap’ is true, TextFitter will first attempt to maximise defaultSize so that it always fills the field (even if the defaultTextFormat.size property wouldn’t ordinarily fill the field).

It’s worth noting that the code uses multiple while loops and while it has internal limits on iterations, I’d recommend using it up once and then generating images from the output.

Click flash to focus, Orange circles resize boxes

Download the demo source here