Introduction
With the advancement of technology, people now can literally say a thousand words with a picture. Pictograph is an app that allows you to hide messages in a picture. All you need to do is uploading a picture into Pictograph and typing the message you would like to hide in the picture. Pictograph will encode the message for you. When your recipient receives the picture, they need to decode the picture using Pictograph in order to see the hidden message. Here is a demo of how the app works.
Summer Zhao, Star Tang, and I worked as a team to localize the app into Simplified Chinese using Xcode 11. Our target operating system is iOS. We planned to spend two weeks, starting from downloading the app from Github, and see how far we could go with this project. The following is how much we got done with the project.
Before Localization
We found this app on Github. However, before we could get it successfully to build in Xcode on our laptop, there were several steps to be completed to set the environment right. According to the error messages shown in Xcode when we first built it, it seemed like our laptops were missing things in order to run Pictograph in Xcode. Summer figured out that this had something to do with a folder called “Pods” inside the package we downloaded from Github. We needed to install CocoaPods inside our project folder. At the long last, we were able to run this app in Xcode.
Localization
Our first task was to localize the strings in the app. In order to do that, we needed to internationalize the strings. That is, wrapping the strings with a method so that they can be conveniently externalized for translation. Pictograph is written in Swift, and this is how to internationalize strings.
The first screenshot contains the string “Want to hide an image?” The second screenshot shows how it is internationalized. After making sure this method works, the rest of the task was a matter of finding all the user facing strings and wrapping them. Although this app appears to be simple, there are actually many strings shown in different places in the app. It involved a lot of trial and error to get all the strings internationalized. After doing that, we were able to export the strings and use Memsource to translate those externalized strings.
Background Color
After localizing the strings, we were looking for what could be changed as well. We did not like the glaring red background color, so we decided to change it. We located a line of code in a file called “PictographViewController.swift" where the background color was controlled. The original color was red as shown in the first screenshot. We chose blue as the new color, as shown in the second screenshot.
If you are an Apple product user, Dark Mode is no stranger to you. You can also change the color for Dark Mode if you like.
Icon Color
In order to be matched with the new background color, the icon needed to be changed too. Summer designed a new icon with blue as the main color. Then, we replaced the old icon with the new one.
App Font
Since our localized app was going to be in Simplified Chinese, we wanted to make sure that the font we used for the app was Simplified Chinese characters friendly, so we located and imported a custom font, “SkyGarden." The following screenshots show the list of built-in fonts and the custom font we imported.
The Simplified Chinese characters in the middle is the preview with the chosen font applied.
Things Unfinished
Although we were able to import and get a preview of the custom font, we were not able to apply the custom font to the app. After digging into the code of the app, we found that the font of the app is controlled by a line of code “UIFont.systemFont().” It seems like in order to apply our font, we would need to tell the app to look for our custom font and grab it for the interface. Because none of us had been exposed to Swift and also due to the difficulty we ran into for just getting the app to build in Xcode, we ran out of the time we set for ourselves in the beginning. Therefore, we did not make the custom font work in our app.
After Thoughts
We were so close to fully localize the app into Simplified Chinese. Here is the working version with the fonts not applied. With the winter breaking coming, I am confident I will be able to familiarize myself with Swift and get the custom font to work.