Home » Posts tagged 'adobe'
Tag Archives: adobe
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!
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