RTL Internationalization in iOS apps - abdelrahman-ahmed/RTL-Localizer-iOS GitHub Wiki

Welcome to the RTL-Localizer-iOS wiki!

Support RTL Languages using Base internationalization

Base internationalization separates user-facing strings from .storyboard and .xib files. It relieves localizers of the need to modify .storyboard and .xib files in Interface Builder.Instead, an app has just one set of .storyboard and .xib files where strings are in the development language —the language that you used to create the .storyboard and .xib files. When you export localizations, the development language strings are the source that is translated into multiple languages. When you import localizations, Xcode generates language-specific strings files for each .storyboard and .xib file. The strings files don’t appear in the project navigator until you import localizations or add languages.

This tutorial helps you support right to left languages in your iOS applications in an efficient way.

Follow the steps below

1. Open xCode and create new project "Localizer".

2. In the project navigator, select the project (not a target) and click Info If necessary, click the disclosure triangle next to Localizations to reveal the settings. click "+" sign to add a language and select arabic from the menu.

3. check in "Use Base Internationalization" if is not checked.

   

4. In the dialog that appears, specify the development language for your .storyboard and .xib files. Select the .storyboard and .xib files in the Resource File column and the development language in the Reference Language column and click Finish.

   

5. Xcode modifies your project folder according to the selections you make in this dialog. Xcode creates a Base.lproj folder in your project folder and adds to it the resource files you select. Xcode creates a language folder for the development languages but only adds resources that need translation to the folder.

   

   In the Language table, the number of localized resource files for the Development Language changes from 0 to the number of files you selected.

6. Under LaunchScreen.xib click on "LaunchScreen.strings (Arabic)" You will see generated key(object ID) and content for each string in LaunchScreen.xib delete the english text and type in the corresponding Arabic translation.

   Don't change the key ,if you do internationalization will not work.

   

   

7. show Assistant Editor to preview the UI

   

   

   

8. Build the user Interface as shown below

9. Using Auto Layout Use Auto Layout to lay out your views relative to each other without fixed origins, widths, and heights, so that views reposition and resize appropriately when the language or locale changes. Auto Layout makes it possible to have one set of .storyboard and .xib files for all languages.

   Follow these tips when using Auto Layout for internationalized apps:

   Remove fixed width constraints. Allow views that display localized text to resize. If you use fixed width constraints, localized text may appear cropped in some languages.

   Use intrinsic content sizes.The default behavior for text fields and labels is to resize automatically. If a view is not adjusting to the size of localized text, select the view and choose Editor > Size To Fit Content.

   Use leading and trailing attributes. When adding constraints, use the attributes leading an trailing for horizontal constraints. For left-to-right languages, such as English, the attributes leading and trailing are equivalent to left and right . For right-to-left language, such as Hebrew or Arabic, leading and trailing are equivalent to right and left . The leading and trailing attributes are the default values for horizontal constraints.

   Pin views to adjacent views. Pinning causes a domino effect. When one view resizes to fit localized text, other views do the same. Otherwise, views may overlap in some languages.

   Constantly test your layout changes. Test your app using different language settings.

   Don’t set the minimum size or maximum size of a window. Let the window and its content view adjust to the size of the containing views, which may change when the language changes.

   Do not use horizontal constrains for the views you them to be mirrored in RTL languages instead use trailing and leading constrains
   

   

10. Translate the english text into Arabic

11. Test Layout in Arabic setting

12. Run the project

    

    Note that in Arabic iOS used the Arabic strings and mirrors the views automatically, but unfortunately this does not work for all views such as TableView and ToolBar, in the next tutorial we are going to handle such case.