Metro Nuggets

Bitesized tidbits for building Modern (Metro) apps.

Dealing with Right-to-Left Languages, Things to Consider

Localising your apps can be hard, whether it’s finding the funds to get all your resources localised, or finding community members who will help you do it, it’s never easy. Those levels of difficulty can also be increased when you start to consider right-to-left languages, such as Arabic, or Hebrew, because it’s not just a question of adding those languages and you’re done. Far from it, in fact. Not only do you have to write extra code just to enable right-to-left, there are other practical matters that you may need to consider for your app’s design. Why? Because with right-to-left languages, the whole UI gets mirrored. Let’s look at some of those things you may need to think about.

Enabling Right-to-Left

First off, I mentioned you need to actually write some extra code to enable right-to-left; this is fairly straight forward code.

string resourceFlowDirection = ResourceContext.GetForCurrentView().QualifierValues["LayoutDirection"];
RootFrame.FlowDirection = resourceFlowDirection == "RTL" ? FlowDirection.RightToLeft : FlowDirection.LeftToRight;

That’s all you need to determine if you’re going to have to enable right-to-left. Some notes about this though:

  • If you use any additional frames within your application (be it in dialog windows, share windows, etc), then you will need to make sure you set the FlowDirection on those too otherwise they won’t get the effects.
  • If you haven’t added any right-to-left languages to your app’s manifest, then these checks will never return true and so your app will always been in the default left-to-right state.

Images

By default, all Images will inherit the FlowDirection of its parents, which will nearly always have come down from the frame. What this means is all Images will also be mirrored. You will want to make sure that any images that are mirrored are correctly so; for example, if you have user submitted images, you will want them to display normally and not mirrored, so you need to explicitly set the FlowDirection to be LeftToRight.

FontIcons

By default, these do not mirror in your UI, so if you were expecting them to, be sure to check that this behaviour is what you need. If you do need them to mirror, then you must set MirroredWhenRightToLeft=”true” on any FontIcons you do want to be mirrored.

Left is Right, Right is Left

What on earth do I mean by that? With the UI being mirrored, it means any X co-ordinates you’re using in your app may not be quite what you’re expecting. When you look at the screen, what you get as 0 for your X co-ordinate will be on the right-hand side of your screen, not the left. If you have any animations or code for moving things left/right based on where a user’s finger is dragging things, then you need to take this into account. Moving your finger from the right side of the screen to the left, will increase your X co-ordinate in a right-to-left world. By not taking this into account, you can end up either placing things in the incorrect side of the screen, or dragging things move in the opposite direction to which the finger is moving.

RelativePanels

What about using RelativePanel and things like RelativePanel.AlignLeftWithPanel or AlignLeftWith attached properties? Well those just get mirrored as normal, there is nothing you need to do for this.

SL

Advertisements

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: