• Weblog :
• Development
• More from Development

Webdesign in Japanese

Monday, June 1, 2009 | Posted by Jay 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 AdobeReader
• Installing theMS Mincho Font for Windows
• A nice list of the most commonly-used Japanese fonts by AscenderCorp.
• U+fonts Japanese (free fonts download)

What is Unicode?

• You don't necessarily have to encode all HTML and XML pages asUnicode.
• However, documents require some form of Unicode in order to have charactersin 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:

• MozillaWeb-sniffer
• Red Swain'sHTTP 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

2. 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 ofthis, I would recommend you set the font size to at least 14 pixels (thestandard font size for English characters is 12 pixels). Any smaller and it maybe illegible and you will lose your audience.
3. While asian languages are great to learn and are very useful when travelingabroad, the current international language of business and marketing isEnglish. In other words, if you want your site to flourish, have an Englishtranslation readily available. Most of the Japanese business websites I've seenso far almost always include an English version (even my host university hasone!).

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
• ChristopherBolten's Japanese for Your Mac
• W3C
• And special thanks to Sibo for helping mefigure this out earlier on :).

• yukina
• 1 Commented

---

• More Weblog Entries

  Version 4.0 TJN's got a new facelift! We're now upgraded AWAY from the stone ages - faster code, dividers, organized styling...I'... Read more?
  
  Tips To Save On Gas If you remember gas prices shooting up in 2007, well, there were a bunch of emails like this floating around. Instead... Read more?
  
  Making a Website for the First Time I've received quite a few emails over the years TJN has been up and running (and while it was known as Dragonrain before... Read more?
  
  New Server 2011 If you're seeing this post, that means that TJN has successfully been relocated to the new server. Thanks to ... Read more?
  
  Every Conscious Hour of February 1st 2011 When I first heard about Hourly Comics from Gid, I was like "oh, that's a cool idea" and figured I'd join in for shits ... Read more?
  
  Little Tweaks All Over The Place Hello hello, I'm back with some site maintenance news and updates! A lot of small changes that filled up quite a few ... Read more?
  
  SFX Translations 102 YAY FOR SFXs!!!Quite a few tweaks made in our SFX Translations section:A Stronger Search Engine - Fully-Compatible with ... Read more?
  
  The Mask Well I was gonna dress up as Waldo originally - went to Costume Castle and everything to look for the Harry Potter style... Read more?
  
  Tree at the Top of the Mountain I've been having quite a few problems at home (which I commented on AP Clash 2010 during the final round post)...SOOO I ... Read more?
  
  Mini Crab Chips So I finally got around to hunting down the local Japanese market, Mitsuwa, and had Ramen there for the first time last ... Read more?
  

• Highlighted Posts

  • 

  Current Projects

  • 

  Completed Projects

  • 
  • 
  • 

  WB Galleries

  • 
  • 
  • 

  Who is behind TJN?

  My name is Jay Lee, and I have traveled to the East Coast of the United States, studied in Kyoto, Japan for a time, and currently live in Southern California.
  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 designer and web developer with a primary interest in marketing, advertising, and business.
  
  
  Read more about Jay

---