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.
Desktop Publishing Proof-of-Concept: Localizing a Japanese Children’s Book
Before coming to MIIS, I taught English in a little tourist town in Gifu Prefecture, Japan, called Gero. Gifu is a beautiful place, with amazing nature, fresh food, and — best of all — hot springs. It also, like many things in Japan, has a cute mascot: Minamo, the Water Fairy. A friendly character that brings happiness to everyone he encounters.
So, in an effort to let more people know about Minamo and, by association, Gifu Prefecture, I decided to localize the below children’s book featuring Minamo and famous sights around Gifu from Japanese to English. You can find the original book on Minamo’s official webpage (obviously he has one).
I’ll go into more detail about the process I took to localize the book, but first, the finished product:
I’m pleased with the result! It wasn’t a too difficult project, but it presented some interesting challenges.
The Process
This project can be broken up into a few distinct phases. They are:
To-Do
- Download all assets
- Prepare pages for translation
- Localize reading order
- Translate
- Insert back into website format
I wanted the final product to be as close to the original as possible, which meant recreating the simple webpage that it is embedded in. I didn’t have access to the original files, but masking out the text wasn’t too difficult, as it’s mostly on a white background with just a few sentences overlapping the pictures. In some places the text was quite narrow because of the vertical orientation of the Japanese writing. And, being a Japanese book, the layout was right-to-left, which meant reworking the page numbers and the order that the pages appeared within the website.
The last page of the book is a map of Gifu with short descriptions of famous places. This map features a few different fonts and lots of small text, and so took a little longer to localize. Finally, the cover page had some characters separated into little bubbles — a practice that looks fine in Japanese, but wouldn’t work well in English. You can see below a comparison — Japanese on left, English on right — showing how I chose to localize these pages.
Localizing the reading order involved first using Adobe Photoshop to erase the pages numbers completely, and then using Adobe InDesign to add real page numbers to the project that could be manipulated. Photoshop and InDesign work seamlessly together, and you can edit an image from InDesign at the same time right in Photoshop without doing any file juggling by Right Clicking > Edit With > Adobe Photoshop. When you save within Photoshop, the changes will instantly be reflected in InDesign. Couldn’t be simpler.
I also needed to go into the HTML of the webpage to change how the reading panel behaved. To my surprise, the code for the webpage was very well commented — in English, no less. It was a simple matter of renaming files and changing a few attributes.
For places where the margins were very narrow and I didn’t want to cover up any of the illustrations, I used the Pen tool in InDesign to create custom borders around the illustrations where no text was allowed. This saved me from having to resort to awkward line breaks or squished text. You can find a great tutorial on how to do this here. The final product looked like this:
If I did it over, I might make the border a little bit further from the picture. But, not too bad for a proof-of-concept! While we’re on this page, if you read my English translation you may be thinking to yourself, “What on earth is a ‘milkvetch’?” Or maybe it’s just me. In any case, I went back and forth on whether to translate the flower’s name literally, or just localize it to “flowers”. In the end, I decided that since this book is meant to be showcasing specific things found in Gifu, I should use the flower’s real name. However, I did try to make it clear that it is, in fact, a flower.
And that’s pretty much it! I’m glad I was able to do this project. It was nostalgic seeing all these places in Gifu again and reading about them. I hope I’ve done Minamo proud!
Social Localization and Translation Crowdsourcing Best Practices
This January I had the pleasure of enrolling in a weekend workshop at the Middlebury Institute of International Studies at Monterey called “Social Localization/Translation Crowdsourcing”, taught by Adam Wooten. During class, we discussed the advantages and disadvantages of crowdsourcing, some common misconceptions, and best practices for implementing it. We also had the chance to speak with some guest speakers, including Head of Localization at Mozilla Jeff Beatty.
To bring all of this knowledge from the workshop together, our final project consisted of three professional presentations: two infographs made by ourselves, and one mock presentation given to a company of our choice as a group project.
For my infographs, I used the presentation program Visme, and drew inspiration for the color scheme from the Nintendo Switch gaming console because of its simple, eye-catching design that I thought would work well for this pair. I hope the information I’ve included in them can help you in researching crowdsourcing best practices! Click for higher resolution, and feel free to use them so long as the credits at the bottom remain intact.
It was my first time creating an infograph like this, and I’m pleased with the result! I wanted something that would look good hanging beside each other, or at least with a consistent theme that could be used for future presentations.
Bringing Translation Crowdsourcing to the Human Rights Watch
For the group portion of this project, I worked with Daniel Rairigh and Kayla Muñoz in creating a mock community translation campaign (we called ourselves “KD&T Enterprises”, which I think sounds catchy) for the Human Rights Watch, a non-profit organization with a large reach that we feel could benefit from the crowd. Here is an excerpt from the description on their website:
“Human Rights Watch is a nonprofit, nongovernmental human rights organization made up of roughly 400 staff members around the globe. Its staff consists of human rights professionals including country experts, lawyers, journalists, and academics of diverse backgrounds and nationalities. Established in 1978, Human Rights Watch is known for its accurate fact-finding, impartial reporting, effective use of media, and targeted advocacy, often in partnership with local human rights groups.”
The Human Rights Watch offers articles in many languages on their website; however, many of these articles are only available in one language.
Our proposal for them included reaching out to universities to help create a platform to use for translation, and also the implementation of a progress bar/rewards system. Community leaders assigned to different regions would suggest various needs that their locale could use, and by translating content the community would get chances to vote on which need they feel is the most pressing. In this way, Human Rights Watch can get a better picture of where and how assistance is needed, and the translators can see a real, immediate, and potentially life-saving result from their work.
This project required us to record ourselves giving a presentation as if we were actually giving it to staff at Human Rights Watch — a copy of which I’ve included below. In it, we give a brief overview of our community translation proposal (I’m the third person to talk!).
You can also read a more in-depth proposal on the plan here, with supporting documents on maintaining quality and quantity that were included in our theoretical “packet” to Human Rights Watch. They’re similar to the two infographs above, but customized for Human Rights Watch specifically.
Conclusion
Translation Crowdsourcing (Community Translation, Social Localization, etc.) is an exciting tool that when wielded correctly can make monumental tasks manageable — even trivial. It’s also a fascinating and challenging tool, because while there are certain best practices that have been developed, an effective crowdsourcing campaign needs to be customized from the ground up to match whatever project for which it’s being used. It requires a certain amount of client education, too, because there are a lot of misconceptions floating around out there — not the least of which is that it’s free (it is not). It’s also not without risk. But the results that come about from a well-executed crowdsourcing effort can accomplish tasks that would otherwise be impossible, making it well worth your consideration.
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