Setting the letter spacing in the RichTextEditor control in Flex

The following example shows how you can set the letter spacing in a Flex RichTextEditor control by setting the textAreaStyleName and letterSpacing styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/22/setting-the-letter-spacing-in-the-richtexteditor-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .myTextAreaStyleName {
            fontFamily: Courier;
            letterSpacing: 3; /* pixels */
        }
    </mx:Style>

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

            private function slider_change(evt:SliderEvent):void {
                var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myTextAreaStyleName");
                cssStyle.setStyle("letterSpacing", evt.value);
            }
        ]]>
    </mx:Script>

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

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="letterSpacing:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="20"
                        value="3"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RichTextEditor id="richTextEditor"
            text="{str}"
            textAreaStyleName="myTextAreaStyleName"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

9 thoughts on “Setting the letter spacing in the RichTextEditor control in Flex

  1. Nice example, however I’m wondering why it takes so long to load. Has letter spacing relevant impact on rendering time?

    Thanks

    Klaus

  2. If I trying to change sont size, and after that change spacing
    then font size changes to its initial size.

    p.s. sorry for for English, my native language is php :)

  3. How to apply line Spacing

    I switch the code

    from

    import mx.events.SliderEvent;

    private function slider_change(evt:SliderEvent):void {
    var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(“.myTextAreaStyleName”);
    cssStyle.setStyle(“letterSpacing”, evt.value);
    }

    to

    import mx.events.SliderEvent;

    private function slider_change(evt:SliderEvent):void {
    var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(“.myTextAreaStyleName”);
    cssStyle.setStyle(“lineSpacing”, evt.value);
    }

    But not have effect

  4. Ok I just figured it out … just use CSS :)

    .paragraphtext {
    fontFamily: Georgia;
    fontSize: 12;
    color: #000000;
    lineHeight: 14pt;
    }

    and then apply this style to your text (ex: )

    Cheers!

Comments are closed.