here are two primary ways to control the appearance of an application that supports both left-to-right (LTR) and right-to-left (RTL) languages:

• Layout mirroring — Layout mirroring is the process of flipping the appearance of the layout controls. For example, in an RTL application, vertical scroll bars should appear on the left instead of the right. For horizontal scrollbars, the thumb should appear on the right side of the control instead of the left. Layout mirroring is commonly used to make a UI match the direction of an RTL language.

• Text direction — Text direction defines the direction that text flows in the text controls. For RTL languages such as Hebrew and Arabic, the characters should render from the right side to the left. This also includes bidirectional text support, where a control might need to render some of the text RTL, and some of the text LTR in the same control. The Spark Flex text controls handle directionality of the text internally. They do not use mirroring to render text.

To change an application's layout from LTR to RTL, set the layoutDirection property of the application object to "rtl". The direction of text is automatically set based on the characters used, but you should also set the direction style property to "rtl" if the majority of your text is RTL. This property instructs the text control to apply RTL rules to the text.

The following example lets you change the layoutDirection and direction style properties on the application from "ltr" to "rtl":

<?xml version="1.0" encoding="utf-8"?> 
<!-- mirroring/DynamicMirroring.mxml --> 
<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" 
               height="400" width="400">    
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
    
    <fx:Script> 
        <![CDATA[        
            import mx.core.LayoutDirection; 
            
            private function setDirectionProps():void { 
                panel1.setStyle('direction', ddl1.selectedItem); 
                panel1.setStyle('layoutDirection', ddl1.selectedItem);              
            } 
        ]]> 
    </fx:Script> 
    
    <s:Panel id="panel1" title="Panel With Non-Mirrored Content" width="350" 
             layoutDirection="{LayoutDirection.LTR}"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
        <s:Label text="This panel contains content that is not mirrored."/> 
        <s:Button label="This Button is not mirrored in the container"/> 
        <s:DropDownList id="ddl1" requireSelection="true" selectedIndex="0" change="setDirectionProps()"> 
            <s:ArrayList source="['ltr','rtl']"/> 
        </s:DropDownList>       
    </s:Panel> 
</s:Application>

The following table describes the components that do not inherit the value of the layoutDirection style property:

If your application uses text-based controls in the MX component set such as MX Label, you must configure the compiler to use FTE, which supports bidirectional text. Otherwise, the text will render from LTR regardless of the character set you use. To ensure that MX controls use FTE, you can apply the MXFTEText.css theme file:

mxmlc -theme+=themes/MXFTEText.css MyApp.mxml

The following example shows that when you change the layoutDirection, the direction of the Wipe does not change:

<?xml version="1.0"?> 
<!-- mirroring\EffectMirroring.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               xmlns:s="library://ns.adobe.com/flex/spark"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
    
    <s:states> 
        <s:State name="default"/> 
        <s:State name="vis"/> 
    </s:states> 
    
    <s:transitions> 
        <s:Transition fromState="*" toState="*"> 
            <s:Sequence target="{myB}"> 
                <s:Wipe id="wipeEffect"  
                        direction="right" 
                        duration="1000"/> 
            </s:Sequence> 
        </s:Transition> 
    </s:transitions> 
 
    <fx:Script> 
        <![CDATA[ 
            private function setDirectionProps():void { 
                this.setStyle('layoutDirection', ddl1.selectedItem);                
            }           
        ]]> 
    </fx:Script> 
    
    <s:Panel title="Wipe Effect"> 
        <s:layout> 
            <s:VerticalLayout paddingTop="15" paddingLeft="15"/> 
        </s:layout> 
        <s:Button id="myB" label="Wipe Effect" 
          visible.default="false" visible.vis="true"/>        
        <s:Button label="Show Button" 
                  click="currentState='vis'"/> 
        <s:Button label="Hide Button" 
                  click="currentState='default'"/> 
    </s:Panel> 
 
    <s:DropDownList id="ddl1" requireSelection="true" selectedIndex="0" change="setDirectionProps()"> 
        <s:ArrayList source="['ltr','rtl']"/> 
    </s:DropDownList>       
</s:Application>

The following example shows that when the layoutDirection changes, the zoom effect changes its destination point:

<?xml version="1.0"?> 
<!-- mirroring\MoveEffectMirroring.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
    
    <fx:Declarations> 
        <s:Move id="moveOut" target="{targetImg}" xBy="100"/> 
        <s:Move id="moveBack" target="{targetImg}" xBy="-100"/> 
    </fx:Declarations> 
 
    <fx:Script> 
        <![CDATA[ 
            private function setDirectionProps():void { 
                this.setStyle('layoutDirection', ddl1.selectedItem);                
            }           
        ]]> 
    </fx:Script> 
 
    <s:Panel title="Move Effect Example" height="200" width="300"> 
        <s:Image id="targetImg" source="@Embed(source='../assets/logosmall.jpg')"/> 
        <s:Button id="b1" 
                  left="5" bottom="5" 
                  label="Move Out" click="moveOut.play();"/> 
        <s:Button id="b2" 
                  left="120" bottom="5" 
                  label="Move Back" click="moveBack.play();"/> 
    </s:Panel> 
 
    <s:DropDownList id="ddl1" requireSelection="true" selectedIndex="0" change="setDirectionProps()"> 
        <s:ArrayList source="['ltr','rtl']"/> 
    </s:DropDownList>       
</s:Application>

The following example shows how the effect plays incorrectly when the layout for the application is RTL, but the layout for the image is not RTL:

<?xml version="1.0"?> 
<!-- mirroring\ScaleEffectMirroring.mxml --> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <fx:Declarations> 
        <s:Scale id="scaleUp" target="{targetImg}" scaleXBy="2" scaleYBy="2"/> 
        <s:Scale id="scaleDown" target="{targetImg}" scaleXBy="-2" scaleYBy="-2"/> 
    </fx:Declarations> 
 
    <fx:Script> 
        <![CDATA[ 
            private function setAppDirection():void { 
                this.setStyle('layoutDirection', ddl1.selectedItem);                
            }           
            private function setImageDirection():void { 
                /* Note that this example uses an MX Image control rather than a Spark Image control. 
                    Spark images cannot be reversed with the layoutDirection property. */ 
                targetImg.setStyle('layoutDirection', ddl2.selectedItem);               
            }           
        ]]> 
    </fx:Script> 
 
    <s:Panel title="Scale Effect Example" height="300" width="300"> 
        <s:layout> 
            <s:VerticalLayout paddingTop="15" paddingLeft="15"/> 
        </s:layout> 
        
        <mx:Image id="targetImg" source="@Embed(source='../assets/logosmall.jpg')"/>        
        <s:Button id="b1" label="Increase" click="scaleUp.transformX=-100;scaleUp.play();"/> 
        <s:Button id="b2" label="Decrease" click="scaleDown.play();"/> 
    </s:Panel> 
 
    <s:HGroup>      
        <s:Label text="Set Application's layoutDirection:"/> 
        <s:DropDownList id="ddl1" requireSelection="true" selectedIndex="0" change="setAppDirection()"> 
            <s:ArrayList source="['ltr','rtl']"/> 
        </s:DropDownList>       
    </s:HGroup> 
 
    <s:HGroup> 
        <s:Label text="Set Image's layoutDirection:"/> 
        <s:DropDownList id="ddl2" requireSelection="true" selectedIndex="0" change="setImageDirection()"> 
            <s:ArrayList source="['ltr','rtl']"/> 
        </s:DropDownList>       
    </s:HGroup> 
 
</s:Application>

The following example sets both the layoutDirection and direction properties to "rtl" so that the entire Spark DataGrid is mirrored:

<?xml version="1.0" encoding="utf-8"?> 
<!-- mirroring\MirroredDataGrid.mxml --> 
<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" 
   width="600" height="400" 
   layoutDirection="rtl" direction="rtl"> 
 
    <fx:Script> 
        <![CDATA[ 
            import mx.collections.ArrayCollection; 
            
            [Bindable] 
            private var dp:ArrayCollection = new ArrayCollection([ 
                {Artist:'Train', Album:'Drops of Jupiter', Price:13.99}, 
                {Artist:'Charred Walls of the Damned', Album:'Ghost Town', Price:8.99}, 
                {Artist:'Bleading Deacons', Album:'Rule the Night', Price:11.99}, 
                {Artist:'Three Stooges', Album:'Greatest Hits', Price:9.99} ]); 
        ]]> 
    </fx:Script>    
     
    <s:DataGrid id="myGrid" dataProvider="{dp}" 
        width="350" height="150"/>  
</s:Application>

The following example shows a chart that uses mirroring:

<?xml version="1.0" encoding="utf-8"?> 
<!-- mirroring\MirroredChart.mxml --> 
<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" 
       creationComplete="srv.send()" 
       layoutDirection="rtl" 
       width="600" height="600"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <fx:Declarations> 
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/> 
    </fx:Declarations> 
 
    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        @namespace mx "library://ns.adobe.com/flex/mx"; 
        @namespace charts "mx.charts.chartClasses.*"; 
        
        charts|DataTip { 
            direction:rtl; 
            paddingRight:-10; 
            paddingLeft:5; 
        } 
    </fx:Style> 
    
    <s:Panel title="Column Chart"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
        <mx:ColumnChart id="myChart" dataProvider="{srv.lastResult.data.result}" showDataTips="true"> 
            <mx:horizontalAxis> 
                <mx:CategoryAxis id="haxis" categoryField="month" title="Month"/> 
            </mx:horizontalAxis> 
 
            <mx:verticalAxis>               
                <mx:LinearAxis id="vaxis" title="Amount"/> 
            </mx:verticalAxis> 
            
            <mx:series> 
                <mx:ColumnSeries 
                    xField="month" 
                    yField="profit" 
                    displayName="Profit"/> 
                <mx:ColumnSeries 
                    xField="month" 
                    yField="expenses" 
                    displayName="Expenses"/> 
            </mx:series> 
        </mx:ColumnChart> 
    </s:Panel> 
</s:Application> 

You should be aware of some minor differences in the way charting controls use spacing and alignment when the layoutDirection is "rtl". For example, to right align the contents of DataTips, set the DataTip direction style property to "rtl". You might also need to adjust the padding properties to get the alignment you want. For example:

@namespace charts "mx.charts.chartClasses.*"; 
charts|DataTip { 
	direction:rtl; 
	paddingRight:-10; 
	paddingLeft:5; 
}

In addition, when the layoutDirection property is set to "rtl":

• Gutter padding — The left and right gutter style properties are reversed. The gutterLeft property changes the gutter padding on the right, and the gutterRight property changes the gutter padding on the left.

• Axis labels — Setting labelAlign="left" aligns the label to the right, and labelAlign="right" aligns the label to the left.

• Axis titles — The textIndent property is unaffected by the layoutDirection property. Axis titles do not support the textAlign property, so setting the layoutDirection property has no effect on this property.

The LocaleID class includes the isRightToLeft() method, which returns true if the currently set locale uses an RTL character code set, but otherwise returns false. You can use this method to set the values of the layoutDirection and direction properties. When you change locales in the following example, the application checks the isRightToLeft() method and sets the layoutDirection and direction properties on the Application object accordingly:

<?xml version="1.0" encoding="utf-8"?> 
<!-- mirroring\LocaleIDMirroringExample.mxml --> 
<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" 
            width="300" height="300" 
            layoutDirection="{localeBasedDirection}" 
            direction="{localeBasedDirection}" 
            creationComplete="updateSelection()"> 
    <fx:Script> 
        <![CDATA[ 
            import flash.globalization.LocaleID; 
            import mx.collections.ArrayCollection;          
            [Bindable] 
            public var localeBasedDirection:String; 
 
            [Bindable] 
            public var locID:LocaleID; 
 
            [Bindable] 
            public var myDP:ArrayCollection = new ArrayCollection( 
                [ {name:"US", locale:"en_US"}, 
                    {name:"Israel", locale:"he_IL"}, 
                    {name:"France", locale:"fr_FR"} ]); 
            
            private function updateSelection():void { 
                locID = new LocaleID(localeIdList.selectedItem.locale);                
                isRTLLabel.text = "RTL: " + locID.isRightToLeft().toString(); 
                getRegionLabel.text = "Region: " + locID.getRegion(); 
                getLanguageLabel.text = "Language: " + locID.getLanguage(); 
                
                if (locID.isRightToLeft()) { 
                    localeBasedDirection = "rtl"; 
                } else { 
                    localeBasedDirection = "ltr"; 
                } 
            } 
        ]]> 
    </fx:Script> 
 
    <s:Panel title="Select Locale" height="200" width="250"> 
        <s:layout> 
            <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10"/> 
        </s:layout> 
        <s:VGroup> 
            <s:DropDownList id="localeIdList" selectedIndex="0" 
                dataProvider="{myDP}" 
                labelField="name" 
                change="updateSelection();"/>   
            <s:Label id="isRTLLabel"/> 
            <s:Label id="getRegionLabel"/> 
            <s:Label id="getLanguageLabel"/> 
        </s:VGroup> 
    </s:Panel> 
</s:Application>

This example requires classes in the flash.globalization.* package, which are available in the 10.1 or later playerglobal.swc file. When compiling this example, be sure to set the target player version to 10.1 or later. On the command-line, you can set the target Player version by using the target-player option; for example:

mxmlc -target-player=10.1 MyApp.mxml

In your applications, you will typically have some additional logic that sets the locale in your application, such as looking at the OS language code or accepting a user-configured setting. For information on setting locales in your application, see Setting the locale.

Some components have a direction style property that is not related to text direction. These direction style properties typically take values not related to text direction. The compiler could throw an error if you try to set the direction property with these values. The following table lists these components:

Use the following tips when creating applications that use layout mirroring:

• Avoid setting the layoutDirection and direction properties on individual components. Set them on the Application container.

• Avoid using the alignment properties of individual components or blocks of text.

• Avoid using absolute positioning.

• If you want to mirror the contents of images (including icons) and videos, you should reverse the image or video in your image editing tools prior to importing them into your Flex application. The Spark and MX Image, BitmapImage, and VideoPlayer controls do not inherit the layoutDirection property from their parent container. The MX Image, Spark BitmapImage, and VideoDisplay controls do mirror their contents if you set layoutDirection on the control directly. The Spark Image control does not mirror its contents regardless of the value of its layout direction.

• Spark text controls do not use layout mirroring. Instead, they support bidirectionality of text internally. As a result, the primitive text controls such as Label, RichText, and RichEditableText do not support the layoutDirection property. You typically set the direction style property to change the directionality of the text in these controls.

• If you use text-based controls from the MX component set in your application, be sure to configure the compiler to use FTE to display the text. To do this on the command line, apply the MXFTEText.css theme file.

• For Spark text controls or FTE text in MX components, use the values TextAlign.START and TextAlign.END for the textAlign property, rather than TextAlign.LEFT and TextAlign.RIGHT. Using START and END will work in the expected manner, regardless of the direction of the text.

• In many components, navigating with the arrow keys changes depending on the directionality of the text. For example, the left arrow will navigate toward the beginning of the text and the right arrow key will navigate toward the end when the text is RTL.