Supporting Right-to-Left ages,

Supporting Right-to-Left ages,

For the most part iOS supports Right-to-Left (RTL) versions ages 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. AfterQuick recap on natural text alignmentI look at how to fix this with the newSemantic 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 ages:

• Use leading/trailing auto layout constraints, not left/right constraints
• UseNSTextAlignmentNatural(. Natural) notNSTextAlignmentLeft(. 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 shocould haveRespect language directionTicked:

This can be confusing but is just choosing between having a constraint usingLeadingRatherLeftEdges. For comparison, here is how we wocould 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 untickRespect language directionThe constraint switches to using the left edge and left margin:

In code this constraint wocould 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 limits ages 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 shoshould see we are using the alignment labeled---:

Xcode does not make it obvious but this isNatural alignmentWhich 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 ages

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 (scheme <) change the Application Language to "Right to Left pseudo Language" 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 ction. 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 = "