top | software | pinconv | dictionary | history | rss | about

中国語と日本語をページ内で混在させる時の注意点

HTML内で日中混在表示を実現するにあたって、CSSのfont-family設定をいくつか試してみました。備忘録をかねて以下にまとめておきます。

テストはこのページで行っていますので、まずはこちらを参照してください（文字コードはUTF-8です）。下はFirefoxとIEで表示をチェックした際の画像です。

ソースにあるように、1～7番までのテキストをそれぞれfont-familyなどの設定が異なるspanタグで括り、表示を確認しています。Firefoxの方はほとんど問題ないので、以下では主にIEの表示を評価しています。

1番のnoneクラスは、ゴシック系のフォントで表示することだけを指定しています（font-family:sans-serif;）。どちらのブラウザでも日中混在表示はできていますが、サイトの訪問者全員がこれと同じ画面を見ているとは限りません。使っている環境の設定次第だと思います。「宁吓刘份」が美しくありませんが、これは別の問題なのでここではスルー。

2番のhigeクラスは明朝系のフォントで表示するよう指定しています（font-family:serif;）。簡体字の表示にはserif系のSimsunが使われることが多いと思い、この指定ならきれいに表示されるかなと期待していたんですが、IEでの表示はボロボロです。漢字がグチャグチャに重なって読むこともできません。

3番のvdnクラスはゴシック系のフォント、それもできればVerdanaを使うよう指定しています（font-family:Verdana,sans-serif;）。が、残念ながらIEでは簡体字部分が中黒に化けてしまいました。指定しているフォントで表示できないのなら、代わりのフォントをシステムから探し出して、なんとか表示するくらいの対応はして欲しいのですが……。先日、当サイトの文字化けの原因となったのが、まさにこのvdnクラスです。

4番のthmクラスでも、同様にゴシック系のフォントを指定してますが（font-family:Tahoma, 'MS Gothic', Osaka,sans-serif;）、今回は表示できています。私が使用しているOSがWinXPで、FontLink機能が働いているためだと思います（Tahomaだけにしても表示されます）。

5番と6番のzhクラスのフォント指定は「font-family :宋体,SimSun,'MS Song','MS Mincho',serif;」です。中国語をきちんと表示させるための指定で、5番ではspanタグにlang属性「lang=zh」も与えています。ただ、6番を見れば分かるようにlang属性があってもなくても結果に違いはありませんでした。そこで、思い切ってfont-familyなどは指定せずに、lang属性「lang=zh」のみを与えたのが7番なのですが、これも問題ないようです。ちなみに、5～7番では簡体字の「骨」もちゃんと表示されています。

私の環境（日本語Windows XP）だけで検証してもあまり意味がないので、各種ブラウザでの表示が確認できるBrowsershotsで、英語版Win98のIEとMac OS XのSafariでの表示を試してみました。それぞれ以下の通りです。

1)英語版Win98のIE

2)Mac OS XのSafari

3)おまけ：中国語関連の設定を全くしていないWinXP

英語版Win98は5～7番以外全滅です。Macの表示は実に美しいですね。中国語関連の設定を全くしていないWinXP（妻のマシン）では、6番が中黒化けをしています。やはり一番大切なのはlang属性のようです。

まとめ

日中混在表示をしたい、でもフォントの指定はシンプルにしたいと思っていたのですが、シェアNo.1のIEがボロボロの状態でしたので、きちんと表示させるには中国語を括るタグにlang属性を与えておく必要があるようです。見た目のこともあるのでfont-familyも指定した方が良いでしょう（ページの文字コードはUTF-8）。それにしてもMac OS XのSafariは美しいですね。思わず物欲が燃え上がりそうになりました。

参考：Windows 2000/XPのFont Link機能(Font Linking)の紹介

参考：はてな 以下のスタイルシートを、Mac、Unix対応にもするには……

推薦：Browsershots

2005-07-29 16:50:22
permalink | Tips

←Proofing Tools 2003の導入 | top | 中国語の「彼女」→

Comments

はじめまして。

中国語＆日本語混在のブログを立ち上げようとしています。いろいろ検索したら、Ctransさんのページの情報が非常に参考になりました。

UTF-8対応のはてなで立ち上げようと登録までしました。しかし実際に日記を書く段階で、文字化けが発生してしまい、何もできない状態にあります。どうも、ウェブの表示エンコードがEUCコードに設定されてしまうことが原因のようです。

マニュアルでエンコードをUTF-8に変えてみたのですが、今度は真っ白で何も表示されなくなってしまいました。

１から１０まで教えていただくことは難しいと思いますが、この辺の情報に詳しいサイトをご紹介いただければ幸いです。

Posted by 初学者 at 2005-11-27 02:51:47

はじめまして。ブログで中日混在はとても楽しいですが、非常に悩ましい問題でもありますよね。はてなは大変便利で私も使っていますが、はてなダイアリーは内部でEUCを使っているので、不可能ではありませんが、ストレス無く中日混在の記事をアップし続けるのはなかなか大変です。はてなグループであれば、内部がUTF-8ですので比較的容易に中日混在ブログを作成できると思います。以下は当方が使用しているはてなグループのURLです。
http://chinese.g.hatena.ne.jp/

また、はてな以外のブログサービス、例えばニフティのココログなどもUTF-8ですので候補になるのではないでしょうか。はてなダイアリーで中日混在を実現する場合は、suikan氏がまとめられた情報がありますので、以下を参照されると良いと思います。
http://d.hatena.ne.jp/suikan/20040420/p5

Posted by ctrans at 2005-11-27 22:57:23

貴重なご意見を早急にいただきましたことに大変、感謝いたします。ありがとうございます。

Ctransさんの「はてな」にある、妄言砂漠が非常に参考になったので、このサイトが便利なのかな？と安直に思っていたのですが、そうでもないようですね。「ココログ」が簡単とのご指摘をいただきましたので、「はてな」と「ココログ」双方で試運転をして、うまくやれる方を選びたいと思います。

軌道に乗ったら、お知らせいたしますので、そのときには見に来てください。よろしくお願いします。

Posted by 初学者 at 2005-11-28 00:01:26

Ctransさま
ずいぶん前にご相談させていただいた、初学者です。あれから多言語対応ブログの「ココログ」や「はてな」を試してみましたが、結局、使い勝手の面で「Excite」を選び、小さなブログを開くことにしました。
私の通っている中国語教室の授業内容がメインで、とても手前みそなサイトになっておりますが、ようやく軌道に乗ってきたので、お知らせいたします。
アドバイスをいただいたことを感謝しております。ありがとうございました。
また北辞郎も活用させていただきます。よろしくお願いします。

Posted by 初学者 at 2006-04-30 11:10:43

初学者さま

ブログを開設されたのですね。おめでとうございます(^^)
exciteは、私も一時期利用していました。使いやすくて、デザインがすっきりしているのがいいですよね。

最新のエントリで、北辞郎をご紹介いただいたようで、大変よろこんでおります。ありがとうございました。
これからも拝見させていただきますので、よろしくお願いいたします。

Posted by ctrans at 2006-04-30 21:35:40

はじめまして、ごっつと申します。
私はココログでblogを書いているのですが、このたび中国に行ってきたので中国語の名称混じりで書こうと思い、ＩＥで「・」に文字化けするので調べていてこのサイトにたどり着きました。
普段、Firefoxユーザなので気にしていなかったのですが、ふとＩＥで見たら悲惨なことに…^^;
本文はタグでちまちまと直さないとだめですね。ＩＥつかえん^^;
というわけで、参考にさせて頂きました♪

Posted by ごっつ at 2006-07-23 22:09:32

Post a Comment