Support for right to left layouts in Flex 4.x (aka Mirroring)

In the past couple of weeks, I’ve been working on a new feature in the Flex SDK that we’ve been calling “Layout Mirroring”. Since flash player 10’s text engine now supports right to left text, it was a natural progression for the Flex SDK to support RTL (right to left) layouts. This feature did not make it into the Flex 4 release (which we’ve pretty much wrapped up, but, hasn’t been kicked out the door, officially). However, we’ve started developing and testing on Layout Mirroring for a future release of Flex 4. I’ll call it 4.x until there is an official name for this release that our trusty product managers will allow me to talk about.

The specification for this feature was pushed out to our open source site a few weeks ago:

Layout Mirroring Spec:

http://opensource.adobe.com/wiki/display/flexsdk/Layout+Mirroring

While the code and testing for this feature is a pretty big effort (We need to make sure all of our components mirror correctly in a RTL scenario), the API changes for Flex Developers are minimal. We have just added one style “layoutDirection” to all of our components that takes a value of “ltr” or “rtl”. layoutDirection is actually both a style and a property (which gets a bit confusing sometimes). The reason for having layoutDirection as a style and property is to allow our graphic elements (which don’t support styles) to also use the property.  The default value for layoutDirection is “ltr”. Here is an quick screenshot of a LTR layout vs a RTL layout.

Simple default Left to Right layout using MX and Spark components:

RTL layout where layoutDirection=”rtl” and direction=”rtl”

Note, this feature is still under development, so, there are some bugs around placement of Form labels and the error tips… but, hopefully, the previous screenshots give you an idea of what changing the layoutDirection style will give you.

There are a couple of confusing areas that people tend to run into when using layoutDirection=”rtl” that I want to call out:

1. When using layoutDirection=”rtl”, you almost always want to use direction=”rtl”. The direction style controls text alignment, so, if you don’t use it, your text will likely not align to the right.

2. When using RTL layouts with MX components, you should use the Flash Text Engine to get support for bi directional text. The Spark components use FTE by default, but, the MX components do not. To use the Flash Text Engine for MX components, check this option in your Flash Builder compiler options.

3. The direction style actually conflicts with a direction property that is on many of the MX components like ProgressBar or the Tile container. Therefore, you won’t be able to specify direction=”rtl” inline because you will get a compiler error. Instead, you should set the direction style with these components in css or using myTile.setStyle(‘direction’, ‘rtl’);

4. When you set layoutDirection=”rtl” on a parent container (like Application), all of the children inherit this value. However, not all of the Flex Spark and MX components will mirror. We are not mirroring components that we believe developers won’t want mirrored. This includes:

– AIR HTML component, Label, RichText, VideoPlayer, Image, BitmapImage, RichEditableText, and Text.

If you do want one of these components mirrored, you can set layoutDirection=”rtl” directly on the component instead of allowing it to get inherited from its parent.

Now that I’ve put all of this information regarding layout mirroring out there, please give it a try in our 4.x nightly builds. You can find builds with the ‘Layout Mirroring’ code at:

http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

I would love to hear feedback from people about whether we are mirroring our components correctly for RTL layouts. I’m not a native speaker in any RTL languages (nor are the developers on this feature), so, we may not be catching some fundamental behavior correctly for RTL layouts.  For example, should a CheckBox icon mirror? Should a Video player be mirrored? Does the DateChooser calendar component look correct for a RTL layout?  … your comments are welcome.

Update 3/10/10:

I updated the RTL screenshot of a Flex app. The CheckBox icon was un-mirrored in recent builds due to feedback from some native speakers. Also, I figured out how to make the Form Item Labels work in both LTR and RTL layouts. Note, the tooltip position in the RTL screenshot is still a bug that is open.

Also, here is the code for this example:

Source: MirroringSparkProject.mxml

SWF: MirroringSparkProject.swf

8 responses

  1. Guessing:

    Shouldn’t the labels in the RTL screen-shot be left aligned (mirror from the LTR right align for the label)?

    And also the balloon, shouldn’t that be mirrored too so that it appears at the left side of the input box with the arrow pointing to the right?

    1. @Benny: Yes, I believe you are right on all of your observations. I was just going to log some bugs that these things weren’t working correctly. Thanks for validating!

  2. Would it be a slight more advantageous to locate all labels on the top of input, that way all that has to be altered is the label itself, combo box arrows, and label location on check boxes?

  3. I just upgraded to flash builder 4 from the beta version. I imported my project
    and now my datagrid is acting funny. I have data paging enabled. The one thing I
    tweaked was on this part:

    Instead of setting the “Count operation” to “count()”, I’ve set it to “None”. I
    have a large amount of data and setting it to “None” makes the thumb larger so
    that users can use it. It also disables the ability to “jump” pages (which uses
    a lot of memory if you have a datagrid).

    Everything worked fine in the beta version of flash builder but in the non-beta
    version I came across a problem: I can initially page (with my mouse wheel) a
    few times and then it just stops for no reason. I try to keep scrolling w/ the
    mouse wheel and nothing. However, if I click on a row, then it will get another
    page. I have to continue to click on the rows in order to get another page.
    Annoying, to say the least.

    Anyone notice this? I didn’t change anything so figured it must be the updated
    version. (You can see for yourself w/ your own project…just change the Count
    operation to “none” and then try to page through the datagrid)…..any
    suggestions?

    1. @dave: I’m just curious if any of these things will work.
      1) If you change the SDK you are using for your project to 3.5, does the app compile and run properly?
      2) If you keep the SDK as 4.0 that you are using for this project, can you check the option to use Flex 3 compatibility mode? Does this help your application run properly?

  4. Looking forward to RTL support (I develop for Hebrew users). Will you go deeper than just the text ? for example, will the filling of a two dimensional rtl TileList will start from the right corner instead of the left ?

    Dan

    1. @Dan: Yes, all the components will act as they should in an RTL layout. So, a TileList will start in the right corner and move to the left. ScrollBars will be on the left, a DateChooser should read RTL etc.

  5. The checkbox in the bottom of the screenshot should be flipped, too. It should be placed on the right of the text for RTL languages. I’m a native Arabic speaker by the way.

    Looking forward for it 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: