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
Windows OS
Since Windows 2000, Japanese text can be inputted and read.
If you're using this system and can't read or type in Japanese, you'll need to enable
Japanese text display:
- Windows XP:
Start > Control Panel > Date, Time, Language & Regional Options >
Languages tab > Install East Asian Languages > Apply > Ok.
- Windows 2000 Professional:
Start > Settings > Control Panel > Regional Options > General tab >
check Japanese. You may need to insert Windows 2000 Professional CD.
Mac OS
For Macs, reading and modifying Japanese and asian text is already supported.
However, if for some reason you can't read or modify the text, or you want to
input in Japanese, you'll need to take a few extra steps:
- Go to System Preferences and click on International under "Personal"
- Go to the Input Menu tab
- Check the languages you wish to use.
For Japanese, you'll want to check the languages under Kotoeri (which literallytranslates as "to choose one's words").
- Lastly, if you check "Show input menu in menu bar," you'll be able toswitch from English to whatever languages you selected, and vice versa, bynavigating to the language icon at the top right of your screen.
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:
Windows OS
In your browser's menu bar, go to Tools > Options, and add Japanese to the
languages list.
Mac OS
In your browser's menu bar, go to Preferences > Languages, and add Japanese to
the languages list.
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:
What is Unicode?
Unicode provides a unique number for every
character, no
matter what the
platform, no
matter what the
program, no
matter what the language.
-- www.unicode.org
- 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.
Declare UTF-8 encoding in HTML & XHTML documents:
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"
/>
Declare UTF-8 encoding in XML documents:
<?xml version="1.0" encoding="UTF-8"?>
Declare UTF-8 encoding in CSS documents:
@charset "utf-8";
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:
HTTP/1.1 200 OK
Date: Wed, 05 Nov 2003 10:46:04 GMT
Server: Apache/1.3.28 (Unix) PHP/4.2.3
Content-Location: CSS2-REC.en.html
Vary: negotiate,accept-language,accept-charset
TCN: choice
P3P: policyref=http://www.w3.org/2001/05/P3P/p3p.xml
Cache-Control: max-age=21600
Expires: Wed, 05 Nov 2003 16:46:04 GMT
Last-Modified: Tue, 12 May 1998 22:18:49 GMT
ETag: "3558cac9;36f99e2b"
Accept-Ranges: bytes
Content-Length: 10734
Connection: close
Content-Type: text/html; charset=utf-8
Content-Language: en
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:
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:
<?php header('Content-type: text/html; charset=utf-8'); ?>
For other methods, check out the list provided by W3C
here.
A Bit of Common Sense
- 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.
- 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
-
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