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 | 0 Commented

More Weblog Entries Saikano One of my most abstract pieces yet...and judging from a few comments on AnimePaper and Read more? CSS Mess I just had to plug this. Way too funny. CSS Mess - Any Normal Browser vs. Internet Explorer 6 Read more? Chrome for Mac Unless you live under a rock and don't concern yourself much with the digital age, you'll remember that Google came up with a new browser Google ... Read more? Oatmeal Cookies So every now and then I feel this urge to bake something (what can I say, I have a sweet tooth!). And I always have this really bad guilt trip when I eat ice cream or cake, so I decided to make some ... Read more? Mochi Burrito So I was reading some book in my room (11pm) trying to fall asleep, but my dog (Mochi) starts bouncing around my bed and won't leave me alone. I look down. I get blasted by the puppy-... Read more? Ski Trip 2009 I love snow. And I love snowboarding (even though I suck at it). So of course I couldn't resist when I got an email about a ski trip my college friends were planning last week - Big Bear, here I ... Read more? His Name is Mochi Meet Mochi! My puppy!! ♥♥♥ We actually got him the day before my birthday from a guy who works for my mom. He was already 3 months old at the time, and still just a tiny ... Read more?

Highlighted Posts Current Projects WB Galleries Who is behind Dragonrain? 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