Robert's Guide to Japanese Text in Web Pages

Wells | Robert

NIHONGO

I create each Japanese word as a separate GIF file. The files are tiny: for example, 195 bytes to store the 3 Kanji characters meaning "Japanese language", e.g.nihongo. Web browsers cache GIF files, so after the first time a given GIF is downloaded, it won't have to be loaded again, so if a word is used multiple times, it will display VERY quickly on average. I store all my Japanese words in a subdirectory named nihongo to keep them together, and name them with their romanji spelling, shortened to 8 characters.

This technique is appropriate if you want everyone to be able to see the Japanese text in your web pages, regardless of whether they have installed Japanese fonts for their browser.  Note that with Windows 98, the Windows Update feature makes it very easy to download and install free Japanese fonts, and also an IME that works with Internet Explorer 4.01 and Outlook.

Use JWP to type Japanese word and copy to clipboard

I use JWP version 1.3, the Japanese Word Processor for Windows written by Stephen Chung. JWP does not require Japanese Windows and does not require Japanese True Type fonts, and runs fine under standard North American Windows 95, NT, and 3.1; it uses bitmap Japanese fonts in 16x16, 24x24, and 48x48 sizes. I have it set for 16x16 display and 48x48 printer fonts. It includes a very nice IME (Input Method Editor) in which lower case is interpreted as Hirigana, upper case is interpreted as Katakana, and Capitalized text is interpreted as Kanji, with F2 selecting among possible Kanji interpretations. JWP is excellent freeware which you can download at ftp://uesama.tjp.washington.edu/pub/Japanese/IBM/JWP/.

Type the word you want to enter, select it with the mouse, and do Edit>Copy to copy the word to the Windows clipboard.

By the way, I use JWP to send and receive EMAIL in Japanese with my techo-savvy friends in Japan. JWP lets you select the Clipboard format in the Utilities>Options… dialog box, and you should set it to New JIS, which is a seven bit encoding of Japanese. When you get an email containing escape sequences that might be Japanese, copy it out of your email program and paste it into JWP, and if it was sent in New JIS, it will be displayed properly. When you compose an email, do it in Japanese in JWP, the copy it and paste it into the body of your email program to actually send it. This is not quite as nice as having the email program itself handle New JIS conversion and display, but it is very nice and easy once you are used to it.

anatawa robert@wellscs.comninihongonomeeruokaitekudasai.

Use Paintshop Pro 3 to create the GIF

I used a trial version of Paintshop Pro 3.11, which can be downloaded from JASC at http://www.jasc.com/. This is the best image editor I have found. Here are the steps:

  1. In Paint Shop Pro, do a one-time creation of a 16 color palette in which color 0 is white, and color 1 is black, and the other colors are something else like yellow, using Color>Edit Palette to make the color changes via double clicking, and using Color>Save Palette to save it to a file, which you can use for each conversion.
  2. Use Edit>Paste->As New Image to paste the Japanese word into a new image window.
  3. Use Colors>Load Palette to convert the image to the saved palette. This does two things: it decreases color depth, and it switches the color indexes so the background white color is at index 0, and the foreground black color is at index 1. For some reason JWP passes its bitmap version of the clipboard text with the background on index 1 and the foreground text at index 0.
  4. Use File>Save As… to save it as a GIF. Make sure it is set to list files of type GIF, and make sure Options specifies that the transparency value is index 0.

Use an HTML editor such as Word 97 to insert the GIF

The following procedure was for Microsoft Word Internet Assistant, which has been superceded by Word 97, FrontPage 98, and many alternative web page editors.  The issues are the same, but the details of how you do the insert, set the width and height, and set the alternative text, will vary depending on your particular web editor. To insertnihongo into the running text, with "nihongo" as the ALT text, I did this:

  1. do Insert>Picture… on the menu. Use the browse button on the Picture tab to find the desired GIF file and select it.
  2. Go to the Options tab and enter the width and height of the image; the height will be 16 for single words in the 16x16 JWP font, and the width is reported by Paint Pro on the lower left status line. Specifying this will allow the browser to layout and display the page before all the Japanese word images have finished downloading, so the page will come up more quickly.
  3. Back in the Picture tab, type the full romanji version of the word as the alternative text, so Lynx browsers and people with image autoload turned off can see the romanji version. It will also be displayed until the image has finished downloading initially.
  4. Hit okay and you are done.

Once you have entered a given word into an HTML document, the easiest way to reuse it is just to cut and paste it - Word Internet Assistant will display it as the Japanese image, and you can use the normal Edit cut and paste to make a copy of the right HTML fragment somewhere else.

Contact robert@wellscs.com | Updated November 27, 1998.
Wells | Robert
© 1996, Robert E. Wells. If you use this technique in your Web pages, please give me credit in your acknowledgements section, and email me so I can add a link to your site. Thanks, -Robert