The following examples show how you can set the text leading (additional vertical space between lines of text) on a Flex Text control by setting the leading style using MXML, CSS or ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/31/setting-the-leading-on-a-text-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init():void {
                slider.value = txt.getStyle("leading");
            }
        ]]>
    </mx:Script>

    <mx:String id="lorem" source="lorem.txt" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="leading:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="10"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
            <mx:FormItem label="height:">
                <mx:Label text="{txt.height}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Text id="txt"
            text="{lorem}"
            leading="{slider.value}"
            textAlign="justify"
            width="400"
            preinitialize="init();" />

</mx:Application>

View source is enabled in the following example.

You can also set the leading style using an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/31/setting-the-leading-on-a-text-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        Text {
            leading: 12;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function init():void {
                lbl.text = txt.getStyle("leading");
            }
        ]]>
    </mx:Script>

    <mx:String id="lorem" source="lorem.txt" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="leading:">
                <mx:Label id="lbl" creationComplete="init();" />
            </mx:FormItem>
            <mx:FormItem label="height:">
                <mx:Label text="{txt.height}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Text id="txt"
            text="{lorem}"
            textAlign="justify"
            width="400" />

</mx:Application>

Or, you can set the leading style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/31/setting-the-leading-on-a-text-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function init():void {
                slider.value = txt.getStyle("leading");
            }

            private function slider_change(evt:SliderEvent):void {
                txt.setStyle("leading", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:String id="lorem" source="lorem.txt" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="leading:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="10"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true"
                        change="slider_change(event);" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
            <mx:FormItem label="height:">
                <mx:Label text="{txt.height}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Text id="txt"
            text="{lorem}"
            textAlign="justify"
            width="400"
            preinitialize="init();" />

</mx:Application>
 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

7 Responses to Setting the leading on a Text control in Flex

  1. Uh, thanks for showing the code for this, but how about actually explaining what leading values should be? For example, if I want line-height to be 160%, what VALUE would I set leading to?!?

  2. Larry Jenkins says:

    You can also set the leading to a negative number, such as “-10″, to get the lines even closer together.

  3. Mahesh says:

    Hi,
    Thanks for the example. What I found is, line spacing doesn’t get applied to the last line of the multiline text. interestingly if it is a single line text then it gets applied properly.
    Any idea what needs to be done in order to apply the line spacing to all the lines of a text?
    Thanks
    -Mahesh

  4. Thanx for this and all flex examples you have…this site for me is better than any book I had about Flex. Everytime I want to find something that I dont know how to do in Flex and google it I find this site and example about it…this time I was searching for line-height property for Text component in Flex :)

    Thanx for this amazing site!
    Ladislav

  5. Doug Hogan says:

    It looks like the leading style is not available on a TextInput. Do you know of any way to achieve this for a text input or some other text based elements like the DataGridHeader?

  6. moorthi says:

    thanks saves my time

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree