Japanese for Your Mac: Authoring Web Pages in Japanese

Tips on adding Japanese to your own web pages.

If you have experience developing English pages and would like to include some Japanese text, you need a text or html editor or a web page design tool that supports Japanese. Full-featured editors like Dreamweaver support Japanese, but I use BBedit from BareBones Software a text editor optimized for web development, with Japanese support. For other web page editors that can handle Japanese, see the list of unicode savvy Mac web page editors on the Yale Chinese Mac page.)

Now here are just a few tips to get you past some sticking points.

General tips

On your web page, make sure to specify the encoding in a meta tag in the head section: <meta http-equiv="Content-type" content="text/html; charset=shift_jis">. The most common flavor of unicode encoding is indicated with charset=utf-8.
Less critical, but good practice is to specify the language of the page in your html code. You can do this by adding a lang="en" or lang="ja" attribute to the <html> tag at the start of the file. On a page that is mostly English, you can also specify that one portion is Japanese by adding the lang attribute to a particular element, like this: <p lang="ja">. You can also add it to the span and div elements to designate smaller or larger sections of Japanese text.
Make sure the ftp program you use to upload the html files is not making any automatic conversions that corrupt the Japanese. In earlier versions of Fetch, for example, select Preferences>Misc and make sure "Translate ISO Characters" is not checked. Fetch vers. 5 and later does not seem to have this problem.

Ruby (Furigana) Markup

If you are teacher, you may be interested in how to display ruby or furigana over Chinese characters on your web pages. Many recent browsers, like Safari 5 and Google Chrome, can display Ruby. And Firefox can display it with a plugin. (Details are on the browsers page.) Simple Ruby markup looks like this:

<ruby> <rb>日本語</rb> <rt>にほんご</rt> </ruby>

The <rb> tag is for "ruby body,", and the <rt> tags are for "ruby text." To make the pronunciation display more nicely in browsers that don't support ruby, you can add <rp> "ruby parentheses" tags like this.

<ruby> <rb>日本語</rb> <rp>(</rp> <rt>にほんご</rt> <rp>)</rp> </ruby>

For detailed information, see the Ruby Annotation Specification at the World Wide Web Consortium.

Encoding Tips

The most common character encoding for Japanese web pages is Shift JIS, but Unicode also has a number of advantages. (If you don't know what an encoding is, see the Encoding section of this site.)

If you use Shift JIS encoding and have accented English characters, as in vis-àvis and garçon, you'll have to code these using latin character entities like è and ç. Otherwise these characters will not display correctly in shift-jis.
Unlike Shift JIS and other specifically Japanse encodings, unicode allows you to combine English with multiple Asian languages on a single page. BBEdit supports unicode. In fact, it has so many different flavors of unicode in its encoding menu that it can be confusing which to choose. UTF-8 (with a byte order mark included) seems to be the most common flavor of unicode for html.
If you are using CSS and external style sheets, be careful about the encoding of the style sheets. Even if your html files are encoded using unicode, your style sheets do not have to be. I've found that certain unicode encodings can cause some browsers to be unable to read the style sheet: Some Mozilla browswers seem to generate an error on line 1 and ignore my external style sheets when I accidentally encoded them as UTF-16 with no byte order mark; on the other hand, I've read elsewhere that the presence of a byte order mark can upset the CSS parser too. To be safe I'm setting the encoding of my style sheets to Western (iso-8859-1). You can specify the encoding of an external style sheet just as you can specify it for an html file, but the syntax differs: for CSS, putting the following declaration in the first line of the file: @charset "iso-8859-1"

Back to Christopher Bolton's Home Page

Last updated 6/17/10