• Weblog :
• Development
• More from Development

Webdesign in Japanese

Monday, June 1, 2009

This post is a semi-tutorial on how to make Japanese characters (essentially most asian and non-english characters) website-compatible. I've been thinking about posting this for a while now, but had to do quite a bit of research before giving any definite answers. Since I started learning Japanese, I've been interested in figuring out exactly how it works with webpages and even web coding and forms. However, since I haven't studied any other asian language besides Japanese, I'm afraid the focus of this post will focus on Japanese. Through a few tests and lots of googling through many boring tutorials and specs, I've compiled a list of basic rules on Japanese character-based webdesign:

Configuring Operating Systems

Configuring Browsers

This may or may not be necessary after you've set your Operating System (OS) to read Japanese. Most of the newer browsers already come compatible with asian languages, but if for some reason you still can't read/type, you can try the following:

Default Fonts

With English, the default font for all webpages is Times New Roman. This font is also installed by default in all Operating Systems. And because it's already installed by default, web browsers such as Firefox and IE (Internet Explorer) have set the default font for webpages to Times New Roman (which can be overruled by HTML, CSS, etc).
As Times New Roman is the default font for English, MS Mincho (or MS 明朝) is the default serif font for Japanese. There are also gothic fonts - as Arial works for English, MS Gothic works for Japanese.
I use a mac, and these fonts were already included in the OS packaging. I cannot say for sure about Windows, but if it's not included you can simply download and install the font yourself.

Here's a list of useful links for more on fonts:

• Asian & Extended Language Font Packs for Adobe Reader
• Installing the MS Mincho Font for Windows
• A nice list of the most commonly-used Japanese fonts by Ascender Corp.
• U+fonts Japanese (free fonts download)

What is Unicode?

• You don't necessarily have to encode all HTML and XML pages as Unicode.
• However, documents require some form of Unicode in order to have characters in them.
• Any encoding can be used if properly declared.

For this particular tutorial, I would recommend you use UTF-8. It's the most efficient standard to support asian characters as well as english (roman) characters in one page, or even a page with only one or the other. If you change the encoding to UTF-8, it usually will not affect the roman characters already on a previously-existing document.

How to use UTF-8

1. Save the data as UTF-8.
If you're hand-coding your files, you should be able to do this through your editor.
If you're using a software like Dreamweaver, you can set your document to UTF-8 in your Preferences (these vary from software to software).

2. Declare UTF-8 Encoding in your web documents.




3. Check your server.
This may or may not be a problem, and varies with different servers.
Some servers may contain HTTP headers that can set their own character encoding (besides UTF-8) which could end up overriding everything you did in steps 1 and 2.

First, you'll want to check if your server has this problem. You'll be looking for something called an HTTP Request Header. It's expressed in MIME type 'text/html' which looks something like this:


Look for the line that has the Content-Type: text/html; charset=utf-8 parameter. In this example, it's set to UTF-8 so it's fine for what we want to do.
However, if it says Content-Type: text/html; charset is ISO-8859-1, you'll need to take a few extra steps to change this later.

Here are a few web-based services that can check your HTTP headers for you:

• Mozilla Web-sniffer
• Red Swain's HTTP Viewer

If the Content-Type is set to something other than UTF-8, there are several ways of fixing this. The method I prefer is to simply input a line in my PHP index page:


For other methods, check out the list provided by W3C here.

A Bit of Common Sense

1. Asian characters, especially Chinese-based (in Japanese it's called Kanji), are very complex. Meanings can change with one small hook or stroke difference, so it's important for a reader to notice all the little details. Because of this, I would recommend you set the font size to at least 14 pixels (the standard font size for English characters is 12 pixels). Any smaller and it may be illegible and you will lose your audience.
2. While asian languages are great to learn and are very useful when traveling abroad, the current international language of business and marketing is English. In other words, if you want your site to flourish, have an English translation readily available. Most of the Japanese business websites I've seen so far almost always include an English version (even my host university has one!).

And still there are some unknowns

I did mention this was a "semi-tutorial" right? While I'm about 95% certain most of what I've written here is correct, I haven't tested every possibility in Windows or IE since I'm a Mac + Safari/Firefox person. I am also a newbie when it comes to UTF-8 and other encoding languages - I never ran into this problem before I started blogging in Japanese.
If you happen to be a UTF-8 guru and notice any errors on my part, please don't hesitate to correct me!!

Resources

• IME's for Microsoft
• National Diet Library Newsletter
• jp41.com
• Unicode.org
• Christopher Bolten's Japanese for Your Mac
• W3C
• And special thanks to Sibo for helping me figure this out earlier on :).

Posted by Jay | 1 Commented

More Weblog Entries Tired Soldiers This has been one long weekend. Mainly because I had to work most of it on a project due on Monday (I'm still working on it actually...nothing like full-time on the weekdays with freelance on the ... Read more? Echo by Kunie Kanbara A HUGE thank you to Kuroimisa for hosting the inspirational MT ... Read more? The Jayborghini So as Deto dubbed it on Twitter, this is the Jayborghini >D. My brand new Honda ... Read more? Pool Party Meme 01 Footsteps My first "Meme" for Gid & Asa's Pool Party Meme challenge. To summarize a Meme... [quote]For fun! Ice ... Read more? Inspiration I was stalking Gid's blog and saw a very inspirational video by Dutton Films featuring ... Read more? Twitter Over Capacity Gettin into the social media flow...and tweeting multiple times gets you to this page: Didn't know this was possible... Read more? Flight in Motion This is a simple vector. Usually I wouldn't bother posting it, but I just thought it looked really cool with all the birds flying out of the Illustrator artboard. Check out the screenshots :). Read more? A New Perspective on Bach One of my most treasured hobbies is playing the piano. Since I dropped formal studies not 2 years after I started (at the age of five...very Asian I know), I've been learning on my own by playing out... Read more? The Waller PLUG!! It's been a long time since I've seen something like this in the walling community - innovation such as what vitaamin from Minitokyo... Read more?

Highlighted Posts Current Projects Completed Projects WB Galleries Who is behind TJN? My name is Jay Lee, and I am currently an undergraduate student at a University of California studying Fine Arts and Digital Arts, though I'll be the first to tell you I've learned more from working than from the classroom. My preferred art mediums include: digital on adobe products, corel, web; fine on oil-on-canvas or charcoal; photography in black and white, with a focus on portraiture and music; and classical music on piano. I work as a graphic and website designer with a primary interest in marketing and adverising. (Yes, the stuff you get spammed with - but I'll only claim credit for the prettier ones.) Read more about Jay