1

I am looking for a way to have a lable (a textarea will do) that I can have adjust the font-size automatically so that the text fits the width.

To make it a bit clearer I understand the autosize property will allow the component to increase it's width so that all the text is visible, I am looking for sort of the opposite of this. Say i have a 200px width label and i have text that spans about 300px, the lable should lower the font-size so that it can be shown within the 200px area.

I've searched all over and all I could find was an AS3 sample for a headlinetextfield (http://livedocs.adobe.com/flex/3/html/help.html?content=Working_with_Text_22.html) but i couldnt for the life of me figure out how to get this to work in a Flex 4 custom component sort of environment

PLEASE HELP me???

Andrew Ames
  • 141
  • 2
  • 10
  • Tell us what you have tried; and explain why it didn't work. Sounds like you'll have to do some text/font measuring on the fly at runtime. – JeffryHouser Jul 27 '11 at 12:07
  • Well I havent tried anything. I was going to try and use the code from that link but I dont know how to relate it to Flex 4. I was thinking id have to measure the text but I looked at MeasureText method and it says it doesnt work on Spark controls – Andrew Ames Jul 27 '11 at 12:19
  • Have you looked at this: http://stackoverflow.com/questions/2916919/calculating-text-width-in-actionscript-and-flex . It has various approaches to measuring text. But, honestly since you asked a question before trying anything it feels like you're asking us to do your work for you. – JeffryHouser Jul 27 '11 at 12:35
  • Thanks for the link, I never came across this one. I had tried all sorts just nothing worth mentioning here as it was all a bit long winded and I knew it wasn't going to help. Trust me posting on these forums is always a last resort for me – Andrew Ames Jul 27 '11 at 13:05

1 Answers1

1

This depends on the level of accuracy you want.

As Flextras indicated, for width to fit perfectly you must measure. Per Flex, you'd implement on updateDisplayList().

If you're looking for something easier, you could try to optimize a ratio and use data binding.

Like, if font size of 20 worked for 200 pixels width, than use that ratio:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">

    <s:Label text="Size as ratio"
             fontSize="{(20 / 200) * width}" />

</s:Application>

This is not an optimal approach, but might buy you time to look into line metrics.

Jason Sturges
  • 15,855
  • 14
  • 59
  • 80