Introduction

In this semester, we explored different website development languages and platforms and ways of localizing the websites. For our group final project, we decided to localize a JavaScript game, to employ 24 ways library to localize the website, and to come up with automation solutions when using 24 ways.

The game we chose is blackjack — a card game that compares who gets the biggest value between player and dealer. This JavaScript game is mainly written in ES5, but uses ES6 to display strings in the game. ES6 has a totally different way to display strings comparing with ES5 standard. Because of this,  the process of wrapping up strings becomes totally automated.

In terms of localization, we used 24 ways library to achieve multilingual functionality.  We localized the program in Chinese, and designed a language button to switch between English and Chinese.

In the workflow of 24 ways, we managed to automate the preparation steps. In this blog, I will introduce how did we do it in details.

24 Ways Automation

String Preparation

24 ways uses “_()” to wrap up strings that were prepared to be translated. If the program is written in ES5, we need to manually break down strings and variables to wrap up the strings that require translation.  However, this program applied ES6 standard to display strings, so we could make advantage of it to automate the wrapping up strings step. The difference between ES5 and ES6 is shown in the following picture.

ES6 uses “`” sign to wrap up strings and “${}” to mark variables comparing ES5’s syntax (ES5 uses double or single quotation marks to wrap up stings; no symbols to mark a variable). It’s completely different from ES5 syntax. With ES5 standard we cannot wrap up strings by applying regular expression or “find and replace” function of text editors, since there are many other places to use double or single quotation marks, such as id and attributes.

Therefore, we can easily find and replace both “`” and “${}” with 24 ways’ wrapping strings method, and we don’t need to worry target unnecessary quotation marks. The final result is as follows.

String Translation

After preparing the strings, we were moving to the string translation phase. We found that 24 ways applies the exact same string wrapping pattern (“_()”) as Python localization library – pygettext. Therefore, we tried to employ pygettext to extract the strings that need to be translated.  You can find pygettext script in the python folder. The only thing that needs to be noticed is that one must make sure the file that contains strings is in the same folder as pygettext’s. After this step, one should open command prompt and type a command line (see the picture below). The pygettext library will then generate a pot file that can be converted into a po file using Poedit. Po files can be translated in most of the CAT tools.

In a po file, there will be source texts and target texts. The target texts will be empty initially. At this stage, we came up with a further automation solution. 24 ways internationalization method requires preparing string files for each languages with the same format (see the picture below).

On the left side it’s the po flie; on the right side it’s the 24 ways’ strings file. It occurred to us that we may apply regular expression and “find and replace” function in a text editor to get strings files out of po files.

First of all, one should check the regular expression box to enable the method of applying regular expression in the “find and replace” function. And then we can remove unnecessary parts by employing regular expression or simply string literals (“.” means all characters and symbols; “^” the start of a search pattern; “$” the end of a search pattern; “*” means 0 or more same elements; “\s” means a space; “\n” means a line break).

The above picture is an example of the string literal way to target information needed. All “msgid” were replaced by tabs.

In order to get a 24 ways strings file format, one need to replace line breaks and all the “msgstr” with colons.

The last step is to replace line breaks with a comma. The following picture shows the final result.

Introduction

Starting from this semester, our team (Xiu) began to work on the General Stilwell Scholarship (GSS) project. General Stilwell made tremendous contributions to the victory of Asian War zone during the World War II by helping Chinese people to defeat the imperial Japanese army.  Stilwell family devoted a lot to improve Sino-US relationship as well. The Stilwell Scholarship is to offer financial assistance to Chinese students and help them complete their master degree at Middlebury Institute of International Studies at Monterey (MIIS).

The scope of this project includes building a presentation-oriented website for GSS, presenting MIIS and GSS in Chinese social medias and localizing the website into Chinese.

I would like to talk website localization in details in this blog. However, first of all, I will brief basics of this project.

Project Brief

Our client is Ms. Shirley who is in charge of fund raising and alumni relationship at Middlebury Institute of International Studies at Monterey (MIIS). She currently runs the Stilwell Scholarship Foundation.

The project began with the client meeting in which we set up the goals, tasks and responsibilities.  The most important things we learned is the scope of this project, client’s expectations, and resources we need for completing it.

After the first client meeting, we hosted our first internal meeting to discuss our plan for the project, to decide respective roles within our team, and to come up with detailed working items for the project. The most important task is to create a whole new website for the client and localize it afterwards. This task does not only involve website design or relevant technological matters but also requires communicating with the client to decide content for the website.

In our team we have two Stilwell Scholarship recipients, so we decided to shoot an interview for current receipts. In this regard, people could get a more personal perspective of the scholarship. Video shooting is another important working item. Our colleague Seoyoung from the media department helped us complete this part of project.

As we began the Stilwell project, our client asks us to help set up a WeChat account or a mini-program in the hope of increasing MIIS’s presence in China. Therefore, we got the chance to meet with the WeChat development team to discuss the details of this matter, and we also talked about the possibilities of incorporating the MIIS account into Monterey Travel Mini-Program, which is under the development. We have not done much in the WeChat part of the project due to the time and resource limit, but we set up the communication channel for future colleagues.

Website Migration and Localization

First of all, we wireframed the website on the notebook reflecting the client’s expectations and requirements. There should be 4 pages: Home, About (under this tab, there are two subpages – About MIIS and About Scholarship), Recipients and Donate. After deciding the structure for each page, we are ready for creating the website for the General Stilwell Scholarship.

For this project, we build the website on the WordPress in order to quicken the workflow. WordPress has many useful plugins ranging from website design to multilingual internationalization. After picking up the appropriate theme for the project, we started building the website.

In terms of website creation, we employed the Elementor plugin to facilitate the website development process. In this blog, I will not focus on this aspect of the project. The picture below is the interface of Elementor when building the website.

Website Migration

Normally, the development phase of the WordPress website is on the local computer. After the website development phase, the developer will migrate the website to a remote server. However, for the General Stilwell Scholarship project, three people of our team need to work together closely to develop the website. Therefore we used a website platform called MiddCreate in which one can develop their own website with very few limitations.

After completing the website development, we installed a plugin called One-in-All WP Migration which could zip up all WordPress files and generate a .wordpress file. The plugin is easy to use by simply clicking “Export” button, and then one could get the .wordpress file of their website and migrate it to a remote server to host the website.

After selecting a remote website server and securing a domain, we installed the WordPress in the cPanel. Here one need to make sure not install WordPress in a folder, otherwise, the url to the website will be links such as “www.xxx.com/blogs”.  Then we installed One-in-All WP Migration in the WordPress in the cPanel, and import . wordpress file to the remote server. The website migration is completed after finishing these steps.

Website Localization

The final task is to localize the website and make sure the multi-lingual website functions smoothly and gets the same effects when switching between languages. The Stilwell Scholarship is to offer financial assistance to Chinese students, so we only need to localize the website into Chinese.

We installed the WPML plugin to complete the localization process. First of all, one can click “Translation Management” to select pages that need to be translated.

One can oversee the progress of all pages of the website. In this case, all pages have already been translated. If there is a page that is ready to be translated, one can check the box beside the page.

The following step is to add it to translation basket. In the translation basket, one can assign the translation job to local translators. Exporting the page in a xliff format is also an option, so one can assign it to a external translator.

Otherwise, by clicking “Translators” tab, one can add a new translator or edit the current translators database.

The translator can start the translation process by simply logging in the WordPress and going to the “Translation” tab.

The above picture is the translation interface in the WordPress. After translating a segment, one can mark the translation as complete. When finishing translating all segments, one can see the translation progress bar is marked as “100% Complete”.

Even though the localization process is easy and efficient by employing the WPML plugin, there are several places we need to be cautious of, such as strings that were generated by theme or plugins as well as differences in format between languages.

Introduction

In this semester, I and several classmates studied self-directed study course under the supervision of professor Max Troyer. The name of the course is Localization Engineering. We aimed to explore basic skills a localization engineer needs to have and spent most of our time on regular expression. Regular expression is a powerful tool that can help engineers extract the information needed as well as breaking down texts and organizing them in whatever ways they like. As a localization engineer, one need to be familiar with all “tricks” that associate with texts of documents in various formats. Therefore, regular expression is a required skill for us who want to be qualified localization engineers.

This project is a python script that runs on the command prompt. It is a contact form that stores contact information, such as name, email, and phone number. One can search information by typing the name of the contact person and update contact information if it does not exist in the contact form.

Regular expression serves as the most important component in this program. Without further ado, I will break down the program in details in the following article.

Extract information

The following picture presents what things this program can do.

We can simply type the name of the contact person to get corresponding contact information. Apparently, the program has contact information pre-stored. So, what will happen if we type a contact person who doesn’t exist in the contact form?

We can see from the above picture that the program would ask people to update contact information when the contact person does not exist in the contact form. After typing all relevant information, we can search the name again, and get the contact information we just updated.

This contact form is built based on regular expression. The first step is to extract information we need in the “database”.

You may be surprise when seeing our “database” of the program. Yup, it’s actually a simple plain text with basic contact information. We don’t need it being organized since we will employ regular expressions to extract the information we need.

First of all, we need to open our “database” and read the content of it as an object. Then I wrote three regular expressions to extract information in three categories — name, email and phone number.

Next, I created three empty lists and put information I just got into them according to their categories. Now, I have already had all information ready for future use.

Create dictionaries

The key of this program is to have a search function when typing the name of the contact person. Python gets a powerful dictionary feature that could help us achieve this goal.

Dictionary, the equivalent of hashmap in Java, could grant users several useful methods. Search is one of them.  Here is an example of python dictionary:

{‘color’: ‘pink’, ‘food’: ‘Spam’, ‘quantity’: 5}

Color, food and quantity serves as “name”. You can get values by searching these names. It’s basically like key and value pairs in property files.

Let us get back to our program. We have already saved information of three categories into three separate lists. So, we have name list, email list and phone list. Thinking of our program and what goals we want to attain, we need to create dictionary to obtain search function, and we need to have email and phone number attached to the name separately. One dictionary could not help us achieve the above goals. In addition, the dictionary does not allow to have the name repeated twice in it. Under this circumstance, I concluded that I need two separate dictionaries to complete the task.

I used the zip function to combine name list with phone list and email list separately, and made them into two dictionaries by employing dict function.

The above picture shows the main loop of our program. In the first scenario, if the name we type existed in both dictionaries, we could print corresponding values according to the name. In the second scenario, since name is an input before the if condition, it’s already written into two dictionaries. Therefore, we could write phone and email values into two dictionaries based on that. By now, you can see how powerful python dictionary is.

Update file

Dictionary can only store information temporarily. So, we need to save updated information into our plain text “database”. The codes in the following picture helps us attain this goal.

For the purpose of testing whether the method is successful, I closed the program and re-opened it. I typed the name “Roin”, and I got the following result.

Yeah! My method works. I successfully saved updated contact information into the database.

Lastly, let’s look at our database one more time.

Our database is turned into python dictionary form after running the program! It’s totally different from the initial database.

Conclusion

A few words I would like to talk about before finishing this article is about the “pyperclip” version of this program. In short, in addition to open the file to read the content of the database, we can also copy the content into the clipboard, and achieve similar result when running the program. The only difference is to import the python pyperclip package beforehand. One can use these two versions based on their preferences and different needs.

Regular expression can be applied not only in contact form but also in many other occasions. As a localization track student, I would like to explore more use of it in future attempts.

Introduction

Pygame is a game-developing module of Python. It can be regarded as a platform or engine as well. The developer can employ many useful methods from it when developing 2D or 3D games. In this article, I will illustrate details of the internationalization workflow in Python and Pygame.

The internationalization workflow can be roughly divided into the following steps:

• string wrapping
• generate .pot file
• translation in Poedit
• save .mo and .po files into the correct folder
• use pygettext method in codes
• connect pygettext method with button function

Without further ado, let’s dive into details of these steps.

String wrapping

Unsurprisingly, the first step we need to do is to wrap strings for translation. Wrapping strings is relatively simple in Python (Pygame). We can simply use “_(“ and “)” to complete this task. In python, we do not need to create property files to store keys and values for different languages.

Generate .pot file

After wrapping strings, the second step is to generate a pot file for translation. Python has a script called Pygettext for internationalization. Normally, you can find Pygettext file in a similar path with the following C:\Users\Sibin Lu\AppData\Local\Programs\Python\Python36-32\Tools\i18n. The only thing one should keep in mind is to put the file for translation and Pygettext under the same folder when generating a pot file.

When you’re ready, you need to type a command line in command prompt to generate a pot file (see pic below).

Translation in Poedit

We can then translate the pot file in Poedit. This is the simplest step in the internationalization process. However, it is by no means an easy task if you would like to render a premium translation. Moreover, we need to be careful when choosing the language code.

Save .mo and .po files into the correct folder

After completing the translation, we can generate a mo and a po file which will be using in our program. Creating a correct folder structure is the first thing to do. Under the same folder of the program, we need to create a “Locale” folder, then “language code (es, zh, bg, etc.)”, and finally a “LC_MESSAGES”. Our mo and po files will go under the “LC_MESSAGES” folder.

Use Pygettext method in codes

The next step is to employ Pygettext method in the program. The method is as follows:

ru = gettext.translation(‘alien_invasion’, localedir=’locale’, languages=[‘ru’])

ru.install()

we can see from the above method that we need to specify the file, the directory and the Language code folder to get translated texts by simply calling this method. Howeverm it only works for a single language. In order to achieve multiple languages internationalization, we must combine Pygettext method with the button function.

Connect pygettext method with button function

In this program, we have a button function that can help us obtain the internationalization goal.

From the above picture, we get to know what things we can do with this function. There are several parameters in this function. Apparently, the action parameter is what we need. We could pass through the Pygettext method to it as arguments (see the pic below).

Then, we could switch between languages by simply clicking language buttons.

This is one of the many ways to do internationalization, and there are many other methods that are worthwhile to explore as well.

Welcome to Sites @ MIIS. This is your first post. Edit or delete it, then start blogging!