世界を目指しての旅行記ほか by カズ＠憧れの大地
雑記帳
WEBページで多言語同時表示 -３-
前回までにWEBページ上で日本語と中国語を同時に表示する方法を記してきました。しかし、色々な環境で試していくうちに、不具合もいろいろ発見されるようになりました。
やるからには、OSやブラウザに依存せずどんな環境でも見れるようにしたいものです。勿論限界はあるのですが、ベストな作り方はどのようなものか――この章ではそれを検証していきます。
検証した環境
| OS | ブラウザ（いずれも日本語版） |
| Win2000 Professional SP2 | Firefox1.0（Geckoエンジン代表）、Opera7.5、IE6.0 |
| WinXP Home Edition Ver.2002 SP2 | Firefox1.0（Geckoエンジン代表）、Opera7.5、IE6.0、NN4.7 |
- 1．WinXP + Opera、NN4.7で不具合
- これまで私が試してきた環境は、自宅マシン（WinXP）上で、GeckoエンジンとIEのみでした。その後、Opera7.5をダウンロードして試してみると、恐ろしい結果になってしまいました。中国語簡体字は表示されず、その後ろの日本語部分の字体が、無残に崩れているのです。（Win2000上では正常に表示される。なお、Operaのバージョンアップのためか、この現象は暫くすると発生しなくなりました）。また、NN4.7でも、Operaほど無残ではないものの、簡体字の部分が“・”で表示されてしまいます。
-
（サンプルの図はいずれも「中国旅日記＞雲南民族村」）
上の図を比べてみると、“傣”の字以降で問題が発生していることが分かります。Operaの日本語表示不具合は、何らかのタグがある場所で終わるようです。
図1 こう表示されてほしいのに…
図2 Operaではこう表示されてしまう
図3 NN4.7でもこうなる
（注：NN4ではCSSの対応が不完全なため、CSSでレイアウ
トした場合他のブラウザとは表示が大きく変わってしまう） - しかし、その上にある“滇”の字も日本語の文字コード外なのですが、後ろの日本語は崩れていません。実は“你”や“圳”など、一部セーフの中国語文字もあるのです。
-
いずれにしても、こんなにひどい表示では話になりません。そこで、ページ全体のフォントをいろいろ変更してみました。その結果、これらのブラウザで簡体字が正常に表示されるフォントは…
Arial Unicode MSのみ！！ページ全体のフォントをこれに変えてみると、確かに、簡体字もその後ろの日本語文字も、図4のように、きれいに表示されます。
図4 Arial Unicode MSでの表示
ただ、このフォントは――好みの分かれるところですね。Operaに限らず、どのブラウザでもこんな字体で表示されます。
このフォントに対する私の結論は…この「旅日記」の雰囲気には合わない！！しかし、このフォントでなければだめとなると――ええい、いくら中国サイトとはいっても、日本語に無い漢字はそれ程多くない。1文字ずつ指定しよう！そこで、スタイルシートに以下のようなコードを追加しました。
span.jianti{
ちなみに“jianti”とは、“簡体”のピンイン表記です。この部分は自分の好きなように変えてOKです。
font-family: "Arial Unicode MS",Serif ;
}
（2回目でも書いたように、Arial Unicode MSはMicrosoftのOS＝Windowsでしか表示できない文字です。そこで、その他OS対策に、カンマで区切ってSerifあたりを追加しましょう）
そして、簡体字のあるページのHTMLファイルのソース上で、以下のようにコーディングします。
-
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
（略）
</head>
<body>
（略）
上記の民族以外にも、壮（チワン）族、哈尼（ハニ）族、<span class="jianti">傣</span>（タイ）族、蔵（チベット）族などのエリアがあり“雲南の縮図”もしくは“ミニチュア雲南”とでも言うことができようか。
（略）
</body>
</html>これでOK! 簡体字のところだけ微妙に字体が違うのは目をつぶりましょう。
図5 全て解決された表示
- 2．Win2000で不具合
-
さて、上記のように修正したサイトを職場のパソコン（Win2000、ブラウザはIE6.0）で確認してみました。すると…
簡体字の部分が“・”になっている！なぜだ？とあれこれ調べてみたところ、ソースの一番上の部分に目が止まりました。
-
<html lang="ja">HTMLを作成する場合、上記のように<html>の部分で言語を設定する必要があります。しかし待てよ、Unicodeが日本語の文字コード体系に含まれているのではなく、日本語の文字がUnicodeに含まれているのだ。ということは、ここで言語を日本語に設定するのはおかしいのではないか？
- Unicodeは文字コード体系であって言語ではないので、<html lang="utf-8">などとやっても意味はありません。HTMLのルールには違反するのですが、ここは"lang"の部分を削除しましょう。
-
<html>
このようにして再度表示すると――今度こそうまくいきました！
＊ ＊ ＊
以上で、私の使用している環境で全てうまく表示されるようになりました。しかし、まだまだ不足です。他のブラウザではどうだ？ Macではどうだ？ Linuxではどうだ？
一番上の表以外の環境を使用している皆さん、情報をください！
情報を投稿
