Supporting Right-to-Left Languages

For the most part iOS supports Right-to-Left (RTL) languages such as Arabic with minimal developer effort. Standard UIKit controls take care of switching text alignment and direction automatically as long as you follow some simple guidelines.

Handling exceptions to this natural layout has not been so easy. For example, having right-aligned text switch to the left with a right-to-left language. After a quick recap on natural text alignment I look at how to fix this with the new semantic content API added in iOS 9.

Natural Text Alignment - A Recap

There are two simple guidelines you need to follow to have UIKit automatically adjust layout for right-to-left languages:

• Use leading/trailing auto layout constraints, not left/right constraints
• Use NSTextAlignmentNatural (.Natural) not NSTextAlignmentLeft (.Left)

To test RTL text support I have three UILabel objects with horizontal Auto Layout constraints from the leading edge of the label to the leading margin. I will not bother to describe the vertical constraints.

Leading constraints

If we inspect the leading constraint of the first label the menu for each of the items should have Respect language direction ticked:

This can be confusing but is just choosing between having a constraint using leading rather than left edges. For comparison, here is how we would create this constraint in code:

NSLayoutConstraint(item: yesterdayLabel,
              attribute: .Leading,
              relatedBy: .Equal,
                 toItem: view, 
              attribute: .LeadingMargin,
             multiplier: 1.0,
               constant: 0.0).active = true

If you untick Respect language direction the constraint switches to using the left edge and left margin:

In code this constraint would now be like this:

NSLayoutConstraint(item: yesterdayLabel,
              attribute: .Left,
              relatedBy: .Equal,
                 toItem: view, 
              attribute: .LeftMargin,
             multiplier: 1.0,
               constant: 0.0).active = true

Remember that to support right-to-left languages use leading/trailing not left/right constraints.

Natural Text Alignment

The second point we need to check is the text alignment. If we inspect the UILabel you should see we are using the alignment labelled ---:

Xcode does not make it obvious but this is the natural alignment which means the label will use the default alignment for the application language. If you wanted to set it in code:

yesterdayLabel.textAlignment = .Natural

Interface Builder defaults mean there is nothing extra to do for basic right-to-left text support.

Simulating Right-To-Left Languages

If you are yet to localize your App with a right-to-left language you can preview the layout by changing the Xcode scheme. From the scheme editor (⌘<) change the Application Language to “Right to Left Pseudolanguage” and launch the app. The interface will switch to right-to-left:

Trying that with our three labels gives us a user interface with the labels flipped to the right:

When You Do No Want Natural Alignment

There can be times when you want to override the natural direction. Suppose I have a label containing some cherry symbols with a green background that I want to fill the horizontal width of the view.

In this scenario I want my cherry label to be right-aligned for left-to-right layouts and left-aligned for right-to-left layouts. To see how to handle that let’s first force the label to be right-aligned for left-to-right layouts. Assume I have a property in my view controller for the cherry label:

var cherryLabel = UILabel()

The code to setup the label, right align it and add it to the superview:

cherryLabel.text = "