App的国际化和本地化(六) —— 支持从右到左的语言(一)

版本记录

版本号 时间
V1.0 2018.05.11

前言

很多APP都有国际化版本,常见于一些大公司的产品,比如Facebook、Wechat等,那么国际化需要我们APP做哪些更改呢,接下来这几篇就一起来看一下APP的国际化和本地化。感兴趣的可以看上面几篇。
1. App的国际化和本地化(一) —— 简单介绍(一)
2. App的国际化和本地化(二) —— 查看语言和区域设置(一)
3. App的国际化和本地化(三) —— 国际化用户界面(一)
4. App的国际化和本地化(四) —— 国际化代码(一)
5. App的国际化和本地化(五) —— 使用区域设置格式化数据(一)

回顾

上一篇主要介绍区域设置格式化数据,本篇主要介绍支持从右到左的语言。


Supporting Right-to-Left Languages - 支持从右向左语言

显示从右向左语言时,应该镜像您的用户界面。 如果您使用基本国际化和自动布局,大部分用户界面将自动为您呈现镜像。 文本方向从右到左改变,电话号码和国家代码总是从左到右。 用户界面中的某些视图和控件可能不会自动更改方向; 在适当的时候,你可以通过编程来解决这个问题。


Creating Right-to-Left User Interfaces - 创建从右向左的用户界面

Internationalizing the User Interface中所述,通过使用基本国际化和自动布局来支持从右到左的语言。 一般来说,如果开发语言是从左到右,请将视图从左上角开始对齐,并添加将视图展开到右下角的约束。 当您使用自动布局的leading属性和trailing属性(不是右侧属性和左侧属性)时,大部分用户界面都会以从右到左的语言进行镜像。 对于Mac应用程序,大多数控件(如分段控件,进度指示器和大纲视图)也会出现翻转。 在iOS应用程序中,UIKit控件在应用程序链接到iOS 9及更高版本时出现翻转。

不应该以从右到左的语言翻转的控件类型和内容是:

  • 视频控制和时间线指示器
  • 图像,除非他们传达方向感,如箭头
  • 音乐笔记和乐谱
  • 图形(x和y轴总是以相同的方向出现)

使用base internationalization,并根据需要为您支持的从右向左语言提供特定于语言的图像和音频文件。 要本地化其他资源文件,请阅读Adding Additional Resources You Want to Localize

按照Testing Right-to-Left Layouts中的描述,以从右到左的语言彻底测试用户界面,并且只有在必要时修改代码以支持从右到左的语言


Getting the Layout Direction - 获取布局方向

在iOS应用程序中,通过调用userInterfaceLayoutDirectionForSemanticContentAttribute:方法获取UIView实例的布局方向。 例如:

if ([UIView userInterfaceLayoutDirectionForSemanticContentAttribute:view.semanticContentAttribute] == UIUserInterfaceLayoutDirectionRightToLeft) {
    …
}

在Mac应用程序中,通过检查视图的userInterfaceLayoutDirection属性来获取NSView实例的布局方向。 例如:

if (view.userInterfaceLayoutDirection == NSUserInterfaceLayoutDirectionRightToLeft) {
...
}

Setting Text Alignment - 设置文本对齐

默认情况下,iOS中的文本对齐是自然的; 在OS X中,它是左对齐。 在从左到右的语言中,使用自然文本对齐方式将文本左对齐,在从右向左的语言中,自动镜像对齐方式。 例如,如果使用setAlignment:方法设置NSMutableParagraphStyle对象的对齐方式,请传递NSNaturalTextAlignment作为参数。

[[(NSMutableParagraphStyle *)paraStyle setAlignment:NSNaturalTextAlignment];

但是,如果在从左到右的语言中,将控件对齐到右侧(右到左语言中的左侧)。请获取布局方向,如Getting the Layout Direction中所述并设置 NSLeftTextAlignment的对齐方式为从右到左的语言。

对于Mac应用程序:

if ([NSApp userInterfaceLayoutDirection] == NSUserInterfaceLayoutDirectionRightToLeft) {
    [[(NSMutableParagraphStyle *)paraStyle setAlignment:NSLeftTextAlignment];
} else {
    [[(NSMutableParagraphStyle *)paraStyle setAlignment:NSRightTextAlignment];
}

Handling Bidirectional Text - 处理双向文本

双向(或“双向”)文本是包含以不同方向运行的段的文本。 诸如阿拉伯语和希伯来语等语言是从右到左书写的,但数字和拉丁文字(如非本地化产品名称)是从左到右书写的。 使用自动处理双向文本的标准视图和控件,如Displaying Text中所述。 如果您为文本输入创建自定义控件,则需要自己处理双向文本。

视频:WWDC 2013 Making Your App World-Ready: International Text > Bidirectional Text

1. Using Natural Writing Direction - 使用自然写作方向

对于文本和控件,请使用自然书写方向,通过检查要显示的文本的前几个字符来确定运行时的书写方向。

对于iOS应用程序,请在UITextInput协议中使用setBaseWritingDirection:forRange:方法,并传递UITextWritingDirectionNatural作为书写方向参数。 对于Mac应用程序,使用setBaseWritingDirection:方法设置控件和其他类型对象的基本书写方向,并传递NSWritingDirectionNatural作为参数。

尽管方向和对齐方式是不同的设置,但左对齐语言中的文本左对齐并且右对齐语言中的文本右对齐很常见。 阅读 Setting Text Alignment以了解如何设置从右到左语言的文本对齐方式。

2. Adding Unicode Markup to Bidirectional Text - 添加Unicode标记到双向文本

在少数情况下,默认行为会产生不正确的结果。 为了处理这些情况,Unicode Bidirectional Algorithm提供了许多可以用来强制正确行为的不可见字符。

例如,电话号码按照所有语言从左到右排列。 如果本地化的字符串包含电话号码的变量,请在变量之后插入一个从左到右的嵌入(LRE)字符U + 202A,并在变量之后插入一个弹出方向格式(PDF)字符U + 202C

// Wrap the plus (+) prefix and phone number in left-to-right directional markers
NSString *phoneNumber = @"408-555-1212";
NSString *localizedPhoneNumber = [NSString stringWithFormat:@"\u202A%@\u202C", phoneNumber];

相反,在从左到右的语言中,要始终以显示从右到左的变量,请在变量和弹出方向格式(PDF)字符之前插入从右到左嵌入(RLE)字符U + 202B ,变量后插入U + 202C

如果一个变量出现在字符串的开头,则自然方向会导致整个字符串使用变量的方向性。 如果变量的方向性未知,这是不正确的行为 - 例如,该变量可能是阿拉伯语或英语用户名。 在这种情况下,请在从右到左语言的变量之前插入一个从右到左的标记(RLM)字符U + 200F,或者在从左到右的语言的字符串变量之前,插入从左到右标记(LRM)字符U + 200E。 即使您没有针对从右到左的语言的本地化,也可以将此技术用于从左到右的本地化。


Flipping Cocoa Touch Views and Controls Programmatically - 以编程方式翻转Cocoa Touch视图和控件

当语言是从右到左时,一些Cocoa Touch视图不应该自动翻转。 在iOS 9和更高版本中,您可以使用为UIView定义的语义内容属性来指定某些视图应该如何显示在从右到左的上下文中。

例如,如果您的应用程序显示代表视频擦除器的滑块,则可以使用UISemanticContentAttributePlayback值指示此视图不应在从右到左的上下文中翻转。 要详细了解可以使用的属性,请参阅UISemanticContentAttribute

1. Flipping Images in an iOS App - 在iOS应用程序中翻转图像

在从右向左语言中,要翻转图像资源,您可以选择以下三个选项之一:


Flipping Cocoa Views and Controls Programmatically - 以编程方式翻转Cocoa视图和控件

当语言从右到左时,某些Cocoa视图不会自动翻转。 在您的Mac应用程序中,您可以通过编程修复Interface Builder中的文本对齐和视图的顺序,以生成所需的镜像结果。 您还可以翻转不在应用中反映的视图。

1. Flipping Images - 翻转图像

对于从右向左语言要翻转图像资源,请选择三种方法之一。 您可以为您支持的从右向左语言提供单独的本地化资源,如Adding Additional Resources You Want to Localize中所述。 您可以为Xcode项目添加可替换的从右到左的图像资源,并且在您的代码中,使用从右到左语言的替换图像。 对于从右向左的语言,您还可以在应用程序代理的awakeFromNib方法中以编程方式翻转图像。

例如,调用此flipImage:方法返回镜像图像。

- (NSImage *)flipImage:(NSImage *)image
{
   NSImage *existingImage = image;
   NSSize existingSize = [existingImage size];
   NSSize newSize = NSMakeSize(existingSize.width, existingSize.height);
   NSImage *flippedImage = [[[NSImage alloc] initWithSize:newSize] autorelease];
 
   [flippedImage lockFocus];
   [[NSGraphicsContext currentContext] setImageInterpolation:NSImageInterpolationHigh];
 
   NSAffineTransform *transform = [NSAffineTransform transform];
   [transform translateXBy:existingSize.width yBy:0];
   [transform scaleXBy:-1 yBy:1];
   [transform concat];
 
   [existingImage drawAtPoint:NSZeroPoint fromRect:NSMakeRect(0, 0, newSize.width, newSize.height) operation:NSCompositeSourceOver fraction:1.0];
 
   [flippedImage unlockFocus];
 
   return flippedImage;
}

2. Flipping Toolbars - 翻转工具栏

在Mac应用程序中,工具栏不会自动针对从右到左的语言进行镜像。 您可以通过编程方式利用awakeFromNib方法对工具栏项目的顺序进行反向排列或实现toolbarDefaultItemIdentifiers:代理方法以相反顺序返回回工具栏项目。

例如,将此代码片段添加到应用程序委托的awakeFromNib方法实现中,其中toolbar是要翻转的NSToolbar对象。

// Flip toolbar items order for RTL support
if ([NSApp userInterfaceLayoutDirection] == NSUserInterfaceLayoutDirectionRightToLeft) {
   NSArray *toolbarItems = [[self.toolbar items] copy];
   for (NSToolbarItem *item in toolbarItems) {
       [self.toolbar removeItemAtIndex:toolbarItems.count-1];
       [self.toolbar insertItemWithItemIdentifier:item.itemIdentifier atIndex:0];
   }
}

如果控件上的图像传达方向 - 例如左箭头和右箭头 - 则应该将其翻转。

3. Flipping a Table View in a Mac App - 翻转Mac App的Table View

注意:在iOS中,表格只有一列,所以您不必担心镜像列顺序。

当布局是从右到左时,表不会自动镜像。 列的顺序不会改变。 如果使用自动布局和base internationalization,基于视图的表格中的视图会自动翻转,但基于单元格的表格中的headers和cells不会更改其文本对齐方式。

Changing Text Alignment - 更改文本对齐方式

对于基于单元格的表格,使用Interface Builder将列和单元格的对齐方式设置为自然书写方向。

To set the text alignment of a column and its cell - 设置列及其单元格的文本对齐方式

  • Interface Builder中,选择大纲视图中的Table Column
  • 如有必要,请显示属性检查器。
  • 从“对齐”控件中选择“自然”。
  • 在大纲视图中,单击表格列旁边的显示三角形并选择其Text Field Cell
  • 在“属性”检查器中,从“对齐”控件中选择自然( - - - )

或者,以编程方式将对象的alignment属性设置为NSNaturalTextAlignment

Reversing Column Order - 反向列顺序

对于Mac应用程序,将此方法添加到NSTableView类(使用Objective-C类别),该类反转表中列的顺序。

@implementation NSTableView (RTLSupport)
- (void)reverseColumnOrder {
   if ([[NSApplication sharedApplication] userInterfaceLayoutDirection] != NSUserInterfaceLayoutDirectionRightToLeft)
       return;
   unsigned long index = self.tableColumns.count-1;
   while (index > 0) {
       [self moveColumn:0 toColumn:index];
       index--;
   }
}
@end

Testing Right-to-Left Locale Formats - 测试从右向左的区域设置格式

您不需要将语言更改为阿拉伯语或希伯来语,来测试从右向左的区域设置格式。而是在方案编辑器中更改语言和区域,如 Testing Specific Languages and Regions中所述。要更改文本方向而不更改语言或区域,请阅读Testing Right-to-Left Layouts

要在iOS设备上测试从右到左的语言环境格式,请在“设置”中一起选择区域和格式化语言,如Setting the Region on iOS Devices中所述。语言子菜单出现在区域弹出式菜单中,用于多个区域中使用的语言。要测试阿拉伯语国家的语言环境,请从阿拉伯语子菜单中选择国家。要测试希伯来语的区域设置格式,请从区域弹出菜单中选择希伯来语(以色列)。

要在Mac上测试从右到左的区域设置格式,请在系统偏好设置中分别选择区域和格式化语言。如果要测试阿拉伯语的区域设置格式,请将区域设置设置为使用阿拉伯语的区域设置,并将格式语言更改为阿拉伯语。同样,要测试希伯来语的区域设置格式,请将区域设置设置为以色列,并将格式语言设置为希伯来语。或者,您可以设置区域,然后将首选语言设置为阿拉伯语或希伯来语。

To test the locale format in a right-to-left language on Mac - 在Mac上以从右到左的语言测试区域设置格式

  • 在系统偏好设置中,点击Language & Region
  • 从“区域”弹出式菜单中选取一种使用该语言的区域。
    日历设置会自动更改以匹配区域。
  • 点击Advanced
  • General窗格中,从Format language弹出式菜单中选择从右向左的语言。

后记

本篇主要讲述了支持从右到左的语言,感兴趣的给个赞或者关注~~~~

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,045评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,114评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,120评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,902评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,828评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,132评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,590评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,258评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,408评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,335评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,385评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,068评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,660评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,747评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,967评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,406评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,970评论 2 341

推荐阅读更多精彩内容