TextMetrics - Find substring coordinates, line widths, and much more
- Compatibility: Flash Player 8 and later (ActionScript 2.0)
- File Size added to published SWF: About 1Kb
 |
 |
Join Club GreenSock to get updates and a lot 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
-
import gs.utils.text.TextMetrics;
-
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 e-mail me a question. I'd highly recommend joining Club GreenSock to get prioritized access to my time in answering your question, and so that you receive updates and lots more. When you e-mail your question, please include a simplified FLA file (and any class files) that clearly demonstrates the problem and provide a brief explanation.
PERMISSION
TextMetrics is free. You're welcome to use it for commercial purposes - I only ask that you consider joining Club GreenSock. As the classes have gained popularity, I must admit that I've been a little overwhelmed by the amount of time it has taken to answer questions and continue development. Less than 1/100th of one percent of my blog visitors donate anything, so it has been difficult justifying the time away from billable jobs (of which there's no shortage!). I really LOVE writing classes like this, and if I could do it all day everyday, I would. But without enough donations, it's just not realistic.
on August 9th, 2007 at 4:28 pm
Thanks! This one save me a TON of coding & debugging tonight!
on August 10th, 2007 at 10:53 pm
Thanks. I know I will need this someday :)
-Nish
on August 16th, 2007 at 8:54 am
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.
on August 16th, 2007 at 9:15 am
this is great. Thanks, Jack!
on September 7th, 2007 at 4:36 pm
This class is great, thanks a lot!
on September 18th, 2007 at 1:31 pm
very nice one indeed.
Thanks for the effort
on September 23rd, 2007 at 5:34 pm
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.
on November 21st, 2007 at 12:50 pm
thanks for the GREAT post! Very useful…
on December 3rd, 2007 at 7:20 am
when you add more lines and scroll the text, it will not work properly
on December 4th, 2007 at 10:49 am
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.
on December 31st, 2007 at 9:24 am
Thank you very much!!
Works very nice!
on January 28th, 2008 at 1:21 pm
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
on January 30th, 2008 at 11:46 am
Thanks for the suggestion, Jake. I updated the class to include “\n” instead of “newline”.
on April 3rd, 2008 at 12:05 pm
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