TextMetrics – Find substring coordinates, line widths, and much more
- Version: 1.6, Updated 1/29/2008
- Compatibility: Flash Player 8 and later (ActionScript 2.0)
- File size added to compressed SWF: about 1kb
 |
 |
Join Club GreenSock to get updates and much more
Description
Have you ever needed to find out where the line breaks occur in a dynamic TextField? How about the precise x/y coordinates of a particular phrase/string along with its width & height so that you could highlight it somehow? Or maybe the width of each line of text? That's all possible with the gs.utils.text.TextMetrics class. And to be consistent with the getTextLineMetrics() function in the TextField AS3 class, it also returns the descent, ascent, and leading values too. You must publish to Flash 8 or later for accurate results. HTML text isn't supported. And for right now, phrases/sentences that span multiple lines aren't supported - the measurements you get back indicate where the first part of the phrase/sentence starts. Justified text is not supported either.
Usage
- Description: Finds all instances of a particular substring in the TextField and returns an object for each one with the following properties: x, y, width, height, lineHeight, leading, ascent, descent
- Parameters:
- textField_tf: The TextField containing the substring
- substring_str: The substring for which you're searching
- Description: Goes through each line of a TextField, measures its width and height and it's x and y coordinates and returns an array of objects (one for each line). The objects have the following properties: x, y, width, height, leading, ascent, descent, and text
- Parameters:
- textField_tf: The TextField you're measuring
- Description: Returns an object with the xMin, xMax, yMin, and yMax, x, y, textWidth, and textHeight of the TEXT inside of a TextField (NOT the TextField box itself)
- Parameters:
- textField_tf: The TextField whose text you're measuring
Examples
To put a red box over every instance of the word "ActionScript" in the TextField named my_tf, do:
-
import gs.utils.text.TextMetrics;</p>
-
var instances_array = TextMetrics.getSubstringMetrics(my_tf, "ActionScript");
-
var instance;
-
for (var i = 0; i <instances_array.length; i++) {
-
instance = instances_array[i];
-
box(this, instance.x, instance.y, instance.width, instance.height);
-
}
-
function box(parent, x, y, width, height):MovieClip {
-
var l = parent.getNextHighestDepth();
-
var mc = parent.createEmptyMovieClip("box"+l, l);
-
mc.beginFill(0xFF0000);
-
mc.moveTo (0, 0);
-
mc.lineTo (width, 0);
-
mc.lineTo (width, height);
-
mc.lineTo (0, height);
-
mc.lineTo (0, 0);
-
mc.endFill();
-
mc._x = x;
-
mc._y = y;
-
mc._alpha = 50;
-
return mc;
-
}
FAQ
- Does this class measure text perfectly in every scenario?
In my tests thus far, as long as you publish to Flash 8 or later, it has proven to be extremely reliable. That being said, Flash is known for rather buggy and inaccurate text mesurement. You might run into situation where this class doesn't perform perfectly but I'm not aware of any specific problems/issues. Please let me know if you run into any. - Do I need to embed fonts for this to work?
Nope. It seems to work just fine with or without embedded fonts.
Need help?
Feel free to post your question on the forums. You'll increase your chances of getting a prompt answer if you provide a brief explanation and include a simplified FLA file (and any class files) that clearly demonstrates the problem.
Comments (18)
Thanks! This one save me a TON of coding & debugging tonight!
Thanks. I was about to set about working out the same, but you’ve already done it and a whole lot more! I’m looking forward to seeing how you went about it.
This class is great, thanks a lot!
very nice one indeed.
Thanks for the effort
Darn, I can’t believe it! You’ve found the answer to this utterly frustrating riddle: “what’s my text’s width and height”. All of these functionalities declined for lack of better measurement capabilities. I can’t wait to use this class!
Thanks man.
thanks for the GREAT post! Very useful…
when you add more lines and scroll the text, it will not work properly
Yes, TextMetrics isn’t meant to track TextFields that are changing/scrolling on a continual basis – it determines the metrics at the point when you call it. So if your TextField changes positions or scrolls or repopulates, you should measure it again.
Thank you very much!!
Works very nice!
Great class Jack, very useful.
I did have one problem with it when I tried to implement the getLineMetrics method. It worked fine for some textfields, but for some it would give each line’s x value as the same as the top line. It turned out that for some of these textfields ‘newline’ was being input as undefined. I replaced ‘newline’ with “\n” and it worked fine.
And before you ask I have no idea exactly what these different textfields had in common, totally baffling! Just in case anyone else has the same issue.
Jake
Thanks for the suggestion, Jake. I updated the class to include “\n” instead of “newline”.
Jack,
This is JUST what I was looking for… did God give you the title of “Most useful Flash class maker”?
An ActionScript 3 version would be lovely!
~ Andew
Wow… i love you.
thanks for the class !
You are a beast guy! I wish I knew this existed for the past couple years.
DUDE!!! thanks yet again… I just keep bumping in your classes out of need, and they are always the bes and easier solution… you should apply to Adobe and teach them a bit about what a designer/developer needs.
or better yet, get some funding from Adobe and keep your awesome work, it’s because of you that Flash keep getting easier and easier to work with.
I totally agree with Andrew: “Most useful Flash class maker”
very.. very.. usefull class script … 
. thx alot..
Thank you for this wonderful class. It saved me a lot of time and trouble. I also use tweenmax and your XML parser and they all great!!!
Please keep doing a great job.
Thanks for this class, it works in almost all situations.
Except that I found a problem with calculating the line breaks with lines that contain a dash: ‘-’. Flash seems to word-break lines on a dash. The calculation doesn’t do this, so my line position calculation gets incorrect if I have a string like with a few dashes.
A fix for this is replacing the line:
words_array = lines_array[i].split(” “);
By first replacing all dashes with spaces and then splitting, it seems to work better:
words_array = lines_array[i].split(“-”).join(” “).split(” “);
Of course it wil not be exactly correct, but it worked for me.