AutoLayout + RTL + UILabel text alignment - ios

Question

I'm finally getting round to wrestling with Auto Layout and can't seem to figure out how to get right-to-left (RTL) support to work the way I'd expect/want...
I have designed the view in Interface Builder as shown:
With the resulting app running as expected when using English:
However when switching to an RTL language (Arabic in this case), the entire view flips (which is great) but the UILabel's text is still left aligned. I'd expect it to be right aligned to keep it up against the UIImageView.
Clearly I'm missing something and/or this isn't covered by Auto Layout.
Am I supposed to set the textAlignment manually when using an RTL language?

Answer 1

You want NSTextAlignmentNatural. That infers the text alignment from the loaded application language (not from the script).
For iOS 9 and later (using Xcode 7), you can set this in the storyboard (choose the --- alignment option). If you need to target earlier releases, you'll need to create an outlet to the label and set the alignment in awakeFromNib.
- (void)awakeFromNib {
[[self label] setTextAlignment:NSTextAlignmentNatural];
}

Answer 2

For me those solutions didn't help, and I ended up doing something pretty ugly but it's the only one that did the trick for me. I added it as an NSString category:
NSString+Extras.h:
#import <Foundation/Foundation.h>
#interface NSString (Extras)
- (NSTextAlignment)naturalTextAligment;
#end
NSString+Extras.m:
#import "NSString+Extras.h"
#implementation NSString (Extras)
- (NSTextAlignment)naturalTextAligment {
NSArray *tagschemes = [NSArray arrayWithObjects:NSLinguisticTagSchemeLanguage, nil];
NSLinguisticTagger *tagger = [[NSLinguisticTagger alloc] initWithTagSchemes:tagschemes options:0];
[tagger setString:self];
NSString *language = [tagger tagAtIndex:0 scheme:NSLinguisticTagSchemeLanguage tokenRange:NULL sentenceRange:NULL];
if ([language rangeOfString:#"he"].location != NSNotFound || [language rangeOfString:#"ar"].location != NSNotFound) {
return NSTextAlignmentRight;
} else {
return NSTextAlignmentLeft;
}
}
#end
To detect the language I used this SO answer.

Answer 3

Follow up from Ken's answer
Setting textAlignment to NSTextAlignmentNatural is not possible on UILabel, it will result in an exception getting thrown:
Terminating app due to uncaught exception 'NSInvalidArgumentException',
reason: 'textAlignment does not accept NSTextAlignmentNatural'
It does work when using attributed text and this can be set in Interface Builder as shown:
However, it would appear that attributed text is not picked up when localising the storyboard.
To get around this I have left the UILabel configured as plain in Interface Builder and created an NSAttributedString with the label's text, set the alignment on the attributed string and assign it to the label's attributedText property:
-(void)viewDidLoad
{
[super viewDidLoad];
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
paragraphStyle.alignment = NSTextAlignmentNatural;
NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:self.lbl.text];
[string addAttribute:NSParagraphStyleAttributeName
value:paragraphStyle
range:NSMakeRange(0, string.length)];
self.lbl.attributedText = string;
}
This works fine in this simple case but I can see it falling over when you need more complex attributed string styling. But obviously in that case you'd probably just be using NSLocalizedString or equivalents when creating the NSAttributedString.

Answer 4

#Aviel answer as a swift UILabel extension
//MARK: UILabel extension
extension UILabel {
func decideTextDirection () {
let tagScheme = [NSLinguisticTagSchemeLanguage]
let tagger = NSLinguisticTagger(tagSchemes: tagScheme, options: 0)
tagger.string = self.text
let lang = tagger.tagAtIndex(0, scheme: NSLinguisticTagSchemeLanguage,
tokenRange: nil, sentenceRange: nil)
if lang?.rangeOfString("he") != nil || lang?.rangeOfString("ar") != nil {
self.textAlignment = NSTextAlignment.Right
} else {
self.textAlignment = NSTextAlignment.Left
}
}
}
How to use it ?
label.text = "كتابة باللغة العربية" // Assign text
label.decideTextDirection() // Decide direction

Answer 5

I think you don't want to use text alignment in this case, for a label.
You can just let the width be determined by intrinsicContentSize, and remove any width constraints on the label. You will achieve the desired effect of the label text aligned to the view.
For x axis, you only need this constraint between label and imageview:
[imageview]-[label]
This is only a horizontal spacing constraint. No leading or trailing to superview.

Answer 6

#Aviel answer as a swift 4 UILabel extension
extension UILabel {
func decideTextDirection () {
let tagScheme = [NSLinguisticTagScheme.language]
let tagger = NSLinguisticTagger(tagSchemes: tagScheme, options: 0)
tagger.string = self.text
let lang = tagger.tag(at: 0, scheme: NSLinguisticTagScheme.language,
tokenRange: nil, sentenceRange: nil)
if lang?.rawValue.range(of: "he") != nil || lang?.rawValue.range(of: "ar") != nil {
self.textAlignment = NSTextAlignment.right
} else {
self.textAlignment = NSTextAlignment.left
}
}
}
usage
label.text = "كتابة باللغة العربية" // Assign text
label.decideTextDirection() // Decide direction

Answer 7

This function helped me out
-(void)fnForWritingDirection:(UILabel*)label textFor:(NSString *)stringForText{
NSMutableAttributedString* attrStr = [[NSMutableAttributedString alloc] initWithString: [stringForText stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding]];
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
[paragraphStyle setBaseWritingDirection:NSWritingDirectionRightToLeft];
[attrStr addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, [attrStr length])];
label.attributedText=attrStr;
}

Answer 8

this worked for me:
extension UILabel {
func decideTextDirection () {
let tagScheme = [NSLinguisticTagScheme.language]
let tagger = NSLinguisticTagger(tagSchemes: tagScheme, options: 0)
tagger.string = self.text
let lang = tagger.tag(at: 0, scheme: NSLinguisticTagScheme.language, tokenRange: nil, sentenceRange: nil)
let langDir = NSLocale.characterDirection(forLanguage: lang?.rawValue ?? "en")
if langDir == .rightToLeft { self.textAlignment = NSTextAlignment.right }
else { self.textAlignment = NSTextAlignment.left }
}
}
usage:
nameLabel.text = "مهدی"
nameLabel.decideTextDirection()

Answer 9

You can use MyLinearLayout to easy support RTL and LRT.

Answer 10

Here is my version. It's simpler and also handles multiple languages in the source document.
The Main point is to use the dominantLanguage:
let lang = tagger.dominantLanguage
Code Snippet:
extension UILabel {
func determineTextDirection () {
guard self.text != nil else {return}
let tagger = NSLinguisticTagger(tagSchemes: [.language], options: 0)
tagger.string = self.text
let lang = tagger.dominantLanguage
let rtl = lang == "he" || lang == "ar"
self.textAlignment = rtl ? .right : .left
}
}
Usage:
titleLabel.text = "UILabel היפוך שפה עבור"
titleLabel.determineTextDirection()
Finally: Note that if the App is localized and you may rely on the phones language - the solution your after is:
"Natural Text Alignment for RTL":
i.e:
titleLabel.textAlignment = .natural
Use the NSLinguisticTagger when your app shows multiple lines with different languages. or when you allow free search in any language, regardless of the local.