Language. Culture. Localization.

Category: Course Work

Website Localization: localizing JavaScript Game “Hextris”

During website localization class this semester, one of the things we have discussed in class is to localize a game written in JavaScript. When we are hunting for a final project for this course, we came across this beautifully designed game called Hextris (Source: Github).

The game interface is quite straight forward. When game starts, some instructions will show up on the hexagon. The player can use the left and right arrow keys to spin the hexigon in the middle. If the player click the pause button, a “game paused” page will show up. Then the player can access “help page” by clicking the help button on the upper left corner, or restart the game by clicking the restart button on the lower left corner (see screenshots below).

(game start page)

(game paused page)

In order to localize the game, we need to translate the strings that show up during the game play, as well as add a language picker which allows players to switch between languages. As the game is very well designed aesthetically, we really wanted it to look as polished as it was after localization. So we decided to localize this game into four languages: Chinese, Japanese, French and Russian, and on top of this, add an awesome language picker which fits in the original design of the game.

Workflow & Responsibilities

In this last semester website localization final project, we really want to imitate the real-world workflow, to divide up the job based on workflow and try to collaborate without understanding how others get things done. After discussion, we decided that our workflow will be:

  1. Implement 24 Ways
  2. String Translation
  3. Add language picker (non-functional yet)
  4. Make Language Picker Functional

In this workflow, I was responsible for the third step, which is to conceptualize a language picker and add it to the game interface.

Adding the awesome language picker


In order to add a language picker that fits the logic and aesthetic design of the game, the first thing I did was to go through the game and see where the button should go, when it should appear and how it should look like.

Looking at the screenshot of the “game paused page” above, you might have noticed, as I did, that there are three hexagon buttons on three corners of the page. I then automatically thought that there should be a fourth button on the upper right corner of the page, in a hexagon shape, that appears when the player clicks the pause button. This button could be our language picker. In addition to this, in order to fit in the spinning theme of the game, I also wanted the button to spin once clicked, and then displays a language menu which allows the player to switch among languages.

(comceptualizing the language picker)

Creating the button in Photoshop

After conceptualization, it was time to bring this thing to life. As I really wanted the language picker to appear only on the “game paused page”, I looked into the other buttons that shows up at the same time. I chose “restart button” as the button to imitate, and looked into the html file to see how it is added to the game. It turns out that all the buttons were first created as an image (.svg file) and then added to the html. So I created the svg image using Photoshop and online converter, and linked it to our html. It successfully shows up in the game when I turned off the css style sheets. The next step is to make it pretty.

(creating language button in Photoshop)

CSS styling & JavaScript

It was not as hard to do css styling on this language button and menu as I originally thought. As the button was created in a hexagon shape with the right color, the only thing I need to do is to adjust the position, so that it stays on the upper right corner of the interface. When it comes to the language menu, I adjusted the font, position, background color and color. It looked quite chic already after all these, but I really wanted to make it able to spin.

I tried several methods to make the language button spin and then display the menu, like css rotate() and css animation, but they didn’t work out for me. My final resort is to try JQuery. After doing some research, I found an add-on JQuery library called JQuery rotates. There is even a piece of sample code on their website which is exactly what I needed. I adapted the code to my game, and it worked! Check out this video to take a look at our demo of the game after localization.


Localizing for the National Park Service, Point Reyes Seashore

Localization Practicum is the main course throughout the second year of TLM program at MIIS.  During the whole year, we work as employees of a student-driven LSP, Globe Multilingual Services, and run our own projects as project managers, engineers, DTP specialists and vendor managers. We reach out to the NGOs to see if they need localization services and onboard them as clients if they do. Newsletter localization for the Point Reyes Seashore of National Park Service is one of the projects I worked on as a project manager for Globe.

Project Description

The National Park Service (NPS) is a bureau of the U.S. Department of the Interior. The NPS preserves unimpaired the natural and cultural resources and values of the National Park System for the enjoyment, education, and inspiration of this and future generations.

The NPS Point Reyes National Seashore of California got in touch with Globe about a newsletter localization project. I accepted the project as a Globe project manager and was the main contact person for the client. I also worked as a DTP specialist on the project.

Project Scope

The Point Reyes Newsletter is a 12-page pdf with roughly 3500 words. It needed to be localized into Spanish (MX). There were also 3 maps embedded in the newsletter in scope. Therefore we had to do heavy DTP work that involved both InDesign and Photoshop.

I managed to get the source file in the .indd version on Oct.13, and the deadline for the project was Oct. 24. As client needed the localized newsletter for a public meeting on Oct. 25, we couldn’t afford any delay on this project. That means we only had 10 days turnaround time for the whole process.

Biggest Challenge

Upon getting the source file, I knew that short turnaround time would be my biggest challenge. As mentioned, we would need at least a translation > DTP > QA workflow. With the amount of DTP work involved, we would need at least 3 days for DTP plus 1 day for QA. Given the fact that we only work with volunteer translators on NGO projects, over 3000 words were apparently too much for one volunteer translator to finish within the time allowed.

One quick decision I made is to split the work among 5-6 translators. We will need to pay extra attention to consistency during QA, but this was basically the only way to finish the project on time. I also decided that we won’t be having editing phase in our workflow since it means extra linguists and extra time: we really don’t have time now.

Because I had no idea about the project scope before receiving the source file, talent onboarding have to start after Oct. 13. Time is ticking and luckily our vendor team was so efficient that we got all 5 translators ready to start by Oct. 15, each of them would be taking care of around 600 words.

Another measure I took to ensure on-time delivery was to onboard my most trusted internal resources for DTP and QA. Working with people I have a personal connection with got rid of a lot of back and forth. I got a huge amount of support from my peers so we were able to save tons of time in the post-translation process. We managed to deliver the project by EOD Oct.23, and the client was very happy with the quality. Please see our workflow and resources below:

From Practicum to Real World

In real-world project management, we will need to deal with rush jobs more often than we expect. Rush jobs are hard to handle: it is more difficult and takes more time to find available translators, even the smallest delay can cause bad results, and basically, no mistakes are allowed in the whole process. Here are some suggestions that might be helpful based on my experience managing this particular project:

Secure talents beforehand if you can. Once you know about the scope of the project before receiving the actual source file, you can start reaching out to your talents. Reaching out to linguist as early as possible will increase the chance of successful placement. You will also have extra time to resolve any technical issues your talents might have (in my case, setting up an account for them on Memsource).

Use your most trusted resources. In this practicum project, I was able to reach out directly to my peers in class, while in real-life projects, we might not have access to such resources. Therefore, building your pool of trusted talent is crucial and essential for every project manager: they are the people that can help you out in situations like this. Fostering your relationship with linguists on a daily basis is more important than you might see. After all, project management is about “people” rather than actual “projects”.

This post is also published on Globe Multilingual Service website, click here to view.

TMS Professional Portfolio

THIS professional portfolio shows the knowledge and skills I learned during the Translation Management Systems (TMS) class at MIIS. In TMS class, we navigate through the widely used TMS SDL WorldServer and accomplished a project with it. We also intensively discussed the how to choose, implement and integrate a TMS for a company.  This portfolio includes a SOW for the WorldServer project, project deliverables and the presentation slides on lessons learned. It also includes three professional blog posts on TMS selection suggestions.

1. WorldServer Project

We worked in a group of five and did a mock-up project using WorldServer. Our client this time is the Beijing Office of NewYork Times, asking us to translate a word document from their website into Simplified Chinese.

Please find our SOW here:RainbowCat_SOWforTMS

Project deliverables, including:

  • Source files
  • Pseudo-translation files
  • Target files
  • Translation memory and term base

Can be downloaded here:

A presentation on lessons learned during the project can be found here: TMS Group Pre

2. Professional Blog Posts.

During the semester, I wrote three blog posts on TMS selection and evaluation. Please find the links down here:

What Do You Want From a TMS Other Than Boosting Efficiency

Choosing a Proper TMS for Your Company: 4 Important Questions to Ask


Sites DOT MIISThe Middlebury Institute site network.