Flex 2 Developer's Guide > Customizing the User Interface > Using Styles and Themes > About styles > About style value formats > Length format

Length format

The Length format applies to any style property that takes a size value, such as the size of a font (or fontSize). Length is of type Number.

The Length type has the following syntax:

length[length_unit]

The following example defines the fontSize property with a value of 20 pixels:

<?xml version="1.0"?>
<!-- styles/LengthFormat.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     .myFontStyle { 
        fontSize: 20px;
        color: #9933FF;
     }
  </mx:Style>
  <mx:Button id="myButton" styleName="myFontStyle" label="Click Here"/>
</mx:Application>

If you do not specify a unit, the unit is assumed to be pixels. The following example defines two styles with the same font size:

<?xml version="1.0"?>
<!-- styles/LengthFormat2.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     .myFontStyle { 
        fontSize: 20px;
        color: #9933FF;
     }
     .myOtherFontStyle { 
        fontSize: 20;
        color: #9933FF;
     }
  </mx:Style>
  <mx:Button id="myButton" styleName="myFontStyle" label="Click Here"/>
  <mx:Button id="myButton2" styleName="myOtherFontStyle" label="Click Here"/>
</mx:Application>

The following table describes the supported length units:

Flex does not support the em and ex units. You can convert these to px units by using the following scales:

1em = 10.06667px

1ex = 6px

In Flex, all lengths are converted to pixels prior to being displayed. In this conversion, Flex assumes that an inch equals 72 pixels. All other lengths are based on that assumption. For example, 1 cm is equal to 1/2.54 of an inch. To get the number of pixels in 1 cm, multiply 1 by 72, and divide by 2.54.

When you use inline styles, Flex ignores units and uses pixels as the default.

The fontSize style property allows a set of keywords in addition to numbered units. You can use the following keywords when setting the fontSize style property. The exact sizes are defined by the client browser.

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

The following example class selector defines the fontSize as x-small:

<?xml version="1.0"?>
<!-- styles/SmallFont.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>    
     .smallFont {
        fontFamily: Arial, Helvetica, "_sans";
        fontSize: x-small;
        fontStyle: oblique;
     }
  </mx:Style>

  <mx:Button id="myButton" styleName="smallFont" label="Click Here"/>

</mx:Application>

Flex 2.01