AutoLayout + RTL + UILabel text alignment

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?

Solution 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];
}

Solution 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.

Solution 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.

Solution 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

Solution 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.