[flexcoders] Problem with measureHTMLText when using different font-sizes

[ewoermann]

Hi

I need to resize a TextArea to show all the text it got populated
with. The TextArea has to display htmlText, so I use measureHTMLText
to get the width and height of a string. According to that I calculate
the dimensions of the TextArea.

Now this all works, unless I change the font, its weight or size.
Below is an example to demonstrate this. Does anyone now how to get
the correct TextLineMetrics for styled fonts? Or does anyone have a
better way to solve this problem?

If you run the code below, you will see 3 TextAreas. The 1st one just
displays normal text, is editable and the height is fixed. Beneath it
is a Button when clicked updates the other two TextAreas to contain
the same text as the first one, but formatted as htmlText. The text in
the second TextArea is not styled, whereas in the third one it has a
greater font size. Now, if you add text to the first component and
click update, the second one resizes correctly and displays all the
text, but the third one only resizes to the same height as the second
one and because of its greater font size, might not display all the text.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute">
        <mx:Style>
                .customTextAreaStyle
                {
                        font-size:16;
                }
        </mx:Style>
        <mx:Script>
                <![CDATA[
                        [Bindable]
                        private var __someHTMLText:String = "This is an example 
of
<b>HTMLText</b>.";
                        
                        private function onUpdateBtnClick():void
                        {
                                __someHTMLText = userInput.text;
                                
                                resizeTextArea(defaultStyleTextArea);
                                resizeTextArea(customStyleTextArea);
                        }
                        
                        private function resizeTextArea(textArea:TextArea):void
                        {
                                if (textArea.htmlText == "")
                                {
                                        textArea.height = 0;
                                        return;
                                }
                                
                                var numberOfLines:uint = 1;
                                
                                var wordArray:Array = textArea.htmlText.split(" 
");
                                var measureString:String = new String();
                                
                                var l:uint = wordArray.length;
                                for (var i:uint = 0; i < l; i++)
                                {
                                        measureString = 
measureString.concat(wordArray[i], " ");
                                        if 
(measureHTMLText(measureString).width > textArea.width)
                                        {
                                                numberOfLines++;
                                                measureString = wordArray[i] + 
" ";
                                        }
                                }
                                
                                // height = textHeight * numberOfLines + 
2-pixel gutter top +
2-pixel gutter bottom.
                                textArea.height = 
measureHTMLText(textArea.htmlText).height *
numberOfLines + 4;
                        }
                ]]>
        </mx:Script>
        <mx:HBox width="100%" height="100%">
                <mx:VBox width="200" height="100%">
                        <mx:TextArea id="userInput" text="{__someHTMLText}" 
width="100%"
height="100%"/>
                        <mx:Button id="updateTextBtn" label="Update Text"
click="onUpdateBtnClick()"/>
                </mx:VBox>
                <mx:TextArea id="defaultStyleTextArea" 
htmlText="{__someHTMLText}"
                        width="200" selectable="false" 
verticalScrollPolicy="off"/>
                <mx:TextArea id="customStyleTextArea" 
htmlText="{__someHTMLText}"
styleName="customTextAreaStyle"
                        width="200" selectable="false" 
verticalScrollPolicy="off"/>
        </mx:HBox>
</mx:Application>

Hope anyone can help
Masi.