1. Home
  2. Docs
  3. Documentation
  4. Translations & RTL

Translations & RTL

Translations & RTL is one of the important features in our Core module. This article will explain to you how localization works and show you how to configure the localization part as well as RTL languages.

1. How localization works
a. What localization is

The feature adapting an app to support a particular language is called: localization. Luckily, thanks to built-in support for localization of Xcode, we can internationalize an app along with the localization feature easily.

Let’s take the first step as follows. At a new project or an existing application that you want to support translation, click on Info tab at Project settings, check “Use Base Internationalization” check-box:

With Use Base Internationalization option, Xcode will transfer the LaunchScreen.storyboard and Main.storyboard into the “Base.lproj” folder with the default language – usually is English. Once you have checked this option, you can add more different languages that you want.

b. Which files will be affected by Internationalization

There are two places where we need to pay attention to language translation.
– The first place is the storyboard files, where we will translate directly on the outlet like UIlabel, or UItextfield, etc.
– The second place is the string or the text in the code. These texts will be collected and stored in a file – called .string file. And here, you have to translate all manually – my condolences.

We are going to show you how to create a .string file:
– In the folder you want to store this file, Right Click and select New File…
– On the dialog that appears, select String File

– Name this file, then click Create

– Click on this file, and look at the right column, click the Localize…

– Here it will display the available languages. This is multiple-choice so you can choose more than one language.

That is done. For each language, Xcode will generate for us a corresponding folder – createdLanguage.lproj

In the .string file which has just created, right-click and select Show In Folder, you will see the folder containing languages. As you can see above, we have en.lproj and ro.lproj representing English and Romanian. Later, if you want to add another language, just go here and add the file you want.

2.How to add a new language

– Still in Info tab at Project settings, click on (+) in Localizations section. It will drop the list of languages down. You can choose which language you want. 

– After you have chosen, there will be a pop-up, this is where you will select the files that you want to apply the translation

– As you can see, in our existing project, we have both types: .storyboard file and .string file

– The last step is translation. At the .strings file, translate all texts appearing in your app into the expected language.

3. Configure in code

After setup important parts of the project, you need to call some APIs so that your application can localize successfully. And the good news is that we’ve helped you configure almost everything. Below is the documentation.

  • Navigate to Core/ Helpers/ Localization. In this folder, click on ATCLocalizationHelper.swift file.
  • In this file, we have two noticeable properties:

a. isRTLLanguage

static var isRTLLanguage: Bool {
   return NSLocale.characterDirection(forLanguage: NSLocale.current.languageCode ?? "") == .rightToLeft
}

This property is used to keep track of the current language type (“Right to Left” or “Left to Right”). With this property, you can handle the language-related code accordingly.

With UIKit, UILabel already supports content flipping if it’s the RTL language. But with UIImage, we need to config a little bit. And in our codebase, we also already handled this component. Navigate to UIImage in Core/ UIExtensions folder, we have a property as follows:

var localized: UIImage? {
   return ATCLocalizationHelper.isRTLLanguage ? self.imageFlippedForRightToLeftLayoutDirection(): self
}

So what you need to do is to call `localized`, we are going to take care of the rest. For example:

imageViewOutlet.image = yourImage.localized

b. localize(in:) method

private func localize(in file: String) -> String {
   if let language = NSLocale.current.languageCode, language == "en" {
       return self
   } else {
       return NSLocalizedString(self, tableName: file, bundle: Bundle.main, value: "", comment: "")
   }
}

This method specifies the location of the file you have used to translate languages. So, you only have 2 things to do:

  • Create a .string file to translate into different languages. Note in this file, you can create as many languages as you want. Check out ATCLocalizableCommon.string file Core/ Helpers/ Localization for more details.
  • Declare your property which will retrieve all the words you have defined/ translated in your language corresponding to the current word. For example,
var localizedCore: String {
   return localize(in: "ATCLocalizableCommon")
}

To apply this feature, you just need to call this API in the strings you want.

titleLabel.text = "Hello World!".localizedCore

Note: You might be wondering why we split up so many localization files. It’s simply to be easier to control, easier to separate since we have many decoupled modules.