Dynamic font size Flex 4 to resize when window/panel is resized

Question

I have a Flex custom BorderContainer component which has text inside of it. If I were to add this in my main Application inside of a panel, the BorderContainer goes outside of the width bounds of the panel due to the text being a set size. I have all of its components in percentages so that it re-sizes when shrunk, but the one part that contains checkboxes and labels (lots of things with text) mess up since the font size doesn't change.

I am pretty positive that the results I am looking for can be done through embedding the font, though I have not been able to come up with a solution from online. I am trying to do this with a CSS style since I will be using it for many different components (I dont just want to change it in the flex code directly).

EDIT Solution:

I attempted to use the ratio as www0z0k had suggested but it caused some serious issues when it was re-sized quickly or to a small screen (the component would not re-size correctly because it was multiplying by the ratio. What finally seems to have worked for me and caused no issues was that I ran the code and found the width (1152) and height (842) of the container.

I then created a const variable of widthX = 1152 and heightY = 842 and in the onResize() function I coded the resize like this:
(where bottomGroup is the id of the borderContainer I am trying to resize)

bottomGroup.scaleX = width / widthX;;
bottomGroup.scaleY = height / heightY;

END EDIT

So far I have found some examples of embedding fonts in the <fx:Style> and attempted to remove any delaration of fontSize but that doesn't seem to work.

 <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @font-face { src: url("fonts\\Arial.ttf"); fontFamily: myFontFamily; color: black; fontStyle: normal; fontWeight: normal; advancedAntiAliasing: false; } s|BorderContainer { fontFamily: myFontFamily; } </fx:Style> 

If anyone has any suggestions or knows where I am going wrong, any help would be appreciated. Thanks.

EDIT: A sample application displaying what my issue is.
CustomContainer.mxml

 <?xml version="1.0" encoding="utf-8"?> <s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"> <fx:Declarations> <!-- Place non-visual elements (eg, services, value objects) here --> </fx:Declarations> <s:HGroup> <s:Label text="This is a label" /> <s:Label text="Here is another which add up to take up quite a bit of horizontal space" /> <s:Label text="Here is another which add up to take up quite a bit of horizontal space" /> <s:Label text="Here is another which add up to take up quite a bit of horizontal space" /> </s:HGroup> 

Main.mxml

 <?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:local="*" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @font-face { src: url("fonts\\Arial.ttf"); fontFamily: myFontFamily; color: black; fontStyle: normal; fontWeight: normal; advancedAntiAliasing: false; } s|BorderContainer { fontFamily: myFontFamily; } </fx:Style> <s:Panel title="BorderContainer Component Example" width="75%" height="75%" horizontalCenter="0" verticalCenter="0"> <local:container> </local:container> </s:Panel> 

I would like to be able to have the font re-size to fit into the panel. I couldn't provide the actual code that I am working on, but this example hopefully gets the idea across.

Answer 1

it should be possible to modify font size in a similar way, but imho if you have something except text there (you mentioned checkboxes) you sholud use the following:

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" resize="onResize();">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>
    <![CDATA[

    private function onResize():void{
        var ratio:Number = width / measuredWidth;
        contentHolder.scaleX *= ratio;
        contentHolder.scaleY *= ratio;
    }

    ]]>
</fx:Script>

<s:HGroup id="contentHolder">
    <s:Label text="This is a label" />
    <s:Label text="Here is another which add up to take up quite a bit of horizontal space" />
    <s:Label text="Here is another which add up to take up quite a bit of horizontal space" />
    <s:Label text="Here is another which add up to take up quite a bit of horizontal space" />
</s:HGroup>
</s:BorderContainer>

Main.xml doesn't need to be modified

Answer 2

If you set an explicit width (eg, 100%) on your Labels in BorderContainer they should automagically do line wraps for you (see: Label docs ).

If you want to actually change the font size (and I would avoid this since it will be visually confusing, but that's another discussion) you should be able to change the scaleX and scaleY properties of your Labels such that they will be scaled to fit perfectly in the BorderContainer. All you'll need to do is compute the scale and apply it.