Home » Posts tagged 'japanese'
Tag Archives: japanese
About Me
I have a passion for interactive entertainment and technology, and am interested in creating and curating content for the modern world.
Exceptional language, writing, proofing, editing and speaking ability; eager to learn and apply new and varied skills. Extroverted and unafraid to create new connections, and has a proven ability to maintain and nurture professional networks.
Proof of Concept: Localizing a Unity Game
This semester at MIIS, we worked on some techniques for localizing games in Android, iOS, and Unity. While it certainly helps to know some coding for things like this, applications like Android Studio and the Unity Personal editor can go a long way to making anyone with a little computer knowledge an amateur software localizer.
As a proof of concept for our final project, we worked on localizing an open-source game from English to Chinese, Japanese, and Italian. It took a while to find an open source game that worked and was appropriate for our needs, but we eventually settled on the game Terra Vita: a simple puzzle game created as part of the Global Game Jam. You can try out the game at this link if you like, or download the source code and edit it yourself.
The point of the game is to use two different kinds of satellites to create a path for messages to travel from Earth to a distant planet to help with terraforming. But asteroids and black holes getting in the way means you have to be creative about the path you use, while also trying to keep your expenses under a budget.
It’s a bit buggy, and falls short of most of the mechanics; for example, there’s no actual penalty for going over budget, and the way that asteroids interfere with your path is inconsistent. Nevertheless, it’s an interesting premise and, for our purposes, perfect to localize, as it contains a variety of text and no language picker. Also, it’s free, so I can’t complain too much.
We started the process by identifying all of the translatable text in the game and extracting it. We fully expected there to be some images that needed localizing, but it turned out that the title screen and everything else was just formatted text, and so this part of the process was simple. However, there were some interesting bits of text in the code that pointed to screens of the game that were never shown when playing, so we removed those from the extracted text data.
Next came the translation. Since this was just a proof of concept, we only ran everything through Google Translate. However, the Japanese and Chinese translations resulted in some bad cases of text bleeding out of the text boxes or getting cut off, so we had to occasionally do some creative translation in parts to shorten everything up. When we absolutely could not shorten the translation any more through editing, we ended up simply making the text itself smaller.
Once the translation was finished, we put the translated text into the game using the I2 Localization Unity asset, a great tool for localizing within Unity. We also made sure to put a language picker on the title screen, which worked out well.
Another interesting challenge was getting all of the currency symbols and number formatting correct for the different locales. For example, we wanted the Chinese version to have the 元 currency symbol be on the right side of the number, instead of the left where the $ for English or ￥ for Japanese sign are.
The currency was set up in such a way that there was inconvenient concatenation within the code as seen above, but one of my group members cleverly got around that, and we eventually had a great looking game screen.
That’s the long and short of it! The whole thing worked great. I think if we were to do it over again, I’d like to do something that has some more opportunities for image editing. When we first started this, I thought we were going to need to recreate some of our own assets, but it ended up not being necessary; which is, of course, indicative of good internationalization practices, but I would have still liked the challenge. Next time!
Mini-Portfolio for Advanced CAT Tools
This semester at MIIS, a lot of focus was put on learning how to use different Computer Assisted Translation tools and Translation Management Systems, as well as developing skills to learn any programs we might meet in our work.
Our most ambitious project by far was training a SMT Engine using the Microsoft Translator Hub. Our group decided to create an engine that would be able to machine translate Playstation system instruction manuals. To look at our project in detail, you can check out our statement of work and our presentation on lessons learned here, but it will suffice to say that the scale of the project greatly exceeded our initial expectations. We had to use PDF versions of various Playstation manuals to align, and the English versions differed from the Japanese versions at many points. Hours were spent on just alignment.
But eventually we ended up with a decent engine! With a larger library of correctly aligned files and use of human post-editing, our group decided that an engine for Playstation manuals could be feasible with the proper up-stream preparation.
We also experimented a bit individually with ModernMT, and open-source translation engine option. This was a pretty interesting experiment that required installing Linux and a lot of troubleshooting for things I had never encountered before.
All things considered, I was pretty pleased with the results! By the end of it, I had a working engine, and the Linux command line did make me feel rather hacker-y.
Lastly, we each made an instructional video for any tool we choose that could help in a localization workflow. I chose to do mine on the “Automatic Domain Terminology Extraction System ‘Gensen Web'” developed by the University of Tokyo Library System — a tool for extracting terminology from Japanese documents, including PDF. It’s a pretty simple tool, but if you want a head start on working it, please check out my instructional video found here.
I hope that the different guides that I’ve posted this year have helped you out! I don’t plan on posting much over the summer, but if something comes up, I may. Looking forward to learning and sharing more in fall!
Optimizing CJK Webfonts with Adobe Typekit
Localizing websites to CJK (Chinese, Japanese, and Korean) languages brings with it a few unique challenges, not the least of which is how to deal with your fonts. Keeping the branding of a site consistent and making everything look good often will mean that you want to use a font that’s not a default on most people’s computers. Which, of course, means turning to a webfont.
That’s not a problem we face writing in English. Since we only have 26+ characters, there is a large selection of default fonts to choose from. And if we don’t find one we like, having a site’s visitor download even a full webfont set doesn’t take very long at all.
But take Japanese. There’s around 2,000 common Japanese characters, and over 50,000 total. Can you imagine having every visitor to your localized website download a 50,000 character font file?
One way we can get around this is by optimizing our fonts using Adobe Typekit.
Typekit is a tool from Adobe that links your website’s code to their font repository. It’s pretty easy to set up, though the free account will only let you use two fonts per kit. But it’s not too pricey for the full account: starts at $50/year or $40/year for business accounts, and this price goes up based on page views.
But even with the free account, there are a number of things you can do to get a stylish, lightweight font. Everything that I’m about to go over is available through the Advanced features, by the way, so just make sure to switch over to that when making your kit.
Asynchronous Loading
By default, the Advanced Typekit code will enable something called Asynchronous Loading. When my team tested this out, it showed a measurable decrease in load times with it enabled. And so that I may serve as further proof that you don’t need to be an advanced coder to use advanced code, I only have a foggy idea on how it works. This quote from Bram Stein, Senior Computer Scientist at Adobe Typekit, describes the process in more detail:
“The default JavaScript embed code will load the JavaScript kit in a render-blocking way. However, once the JavaScript loads, the kit will load the fonts asynchronously. Why wait for the JavaScript to load? You’ll get better performance and the same behavior by switching to the advanced embed code; the advanced embed code will load both the fonts and JavaScript asynchronously.” – Bram Stein, Senior Computer Scientist at Adobe Typekit.
So, there you have it. One thing I do understand about Asynchronous Loading is that by enabling it, by default your site will have a flash of unstyled text (what Adobe calls “FOUT”) while your webfont loads. However, we can control how that looks with Adobe Typekit’s Font Events, which I’ll describe a little further down in this article.
Dynamic Subsetting
When you use a webfont, there are a few different subsets you can use. The default for most fonts includes all the characters required for English, French, German, Italian, Portuguese, and Spanish.
Right away, we can see that won’t work for our CJK fonts, and so you may be tempted to use the All Characters option, just to be safe. Don’t do this. The All Characters includes all the characters in the font files, including all of the supported languages for that font family. That means huge font files. It’s so impractical that Adobe automatically disables the option when trying to use Japanese fonts.
The one that we want is Dynamic Subsetting. With Dynamic Subsetting, the Typekit JavaScript generates a custom subset containing only the characters in use on your website. What this means is that your site’s visitor only downloads the characters that are currently on screen when they visit your site, which will significantly cut down on load times.
As an aside, the Vertical Features checkbox on this screen enables support of vertical text in Japanese fonts, if that’s something you need.
Font Events
Have you ever visited a webpage, and just for a split second see a flash of a different font before the regular font shows? That is an example of poorly managed Font Events that come with Asynchronous Loading. But Typekit offers a way of controlling this.
By using some simple code (which you can copy and paste from here), you control what font your site’s visitors see while your (hopefully quick and lightweight) webfont downloads. More importantly for branding purposes, you can tell the browser to have your loading font be invisible, so your visitors just see a flash of no text at all before your nice, stylized webfont load.
Our resident code wiz, Erika, can explain how to implement this better than I on her post about this project, so give that a read when you’re ready to edit your code.
Should I use Typekit?
If you are wanting to localize your websites for any CJK language — and if you’re not afraid to get just a little bit into the code of your site — Adobe Typekit is a great option. It’s very user-friendly, and there’s a lot of documentation out there on how to make best use of it. Using the paid version gives you a lot more fonts and options, but for a personal blog or small business, the free version has plenty of flexibility.
Credits