文字化けをなくす

目次

  1. 理屈はともかく多国語日記(日記を書く)
  2. 文字化けをなくす ←今日
  3. <SPAN>と<div>の使い分け
  4. 国連憲章

中国語を入力してはてなダイアリーで表示させると文字が化けることがあります。化け方としては:

  • 一部の文字が黒い点になる。
  • 中国語の文字が日本語の文字になる。

などがあります。これらは言語設定が欠落しているためです。
多国語表示に使うunicodeには言語の概念がありません*1。そのため、自分が中国語のつもりで入力しても何語として表示されるかは次のような条件で変わります。

ブラウザで中国語のフォントを設定しても大抵は無駄です。なぜならページ全体の言語設定が日本語になっているからです。この場合ブラウザは日本語として文字を表示しようとします。ページ全体の言語を中国語にすると日本語の部分がだめになります。
そこで、中国語の部分だけ「ここは中国語です」とlang属性でタグ付けします*2*3

繁体中国語をタグ付けする。

はてなダイアリーの日記の中で繁体中国語の文字列を次のように<span lang="zh-tw" class="zhtw">タグと</span>タグで囲みます。zh-twは繁体中国語をあらわす文字です。zhtwは後で説明します。

<span lang="zh-tw" class="zhtw">已成為一種“傳&#x8AAA;”。&#x4F60;好&#x55CE;。</span>

すると次のように表示されます(結果はブラウザとOSの設定で異なります)。

已成為一種“傳說”。你好嗎。

なお、<span>~</span>で囲めるのは一行だけです。改行ごとに面倒でも囲みなおしてください*4

簡体中国語をタグ付けする。

先のスタイルシートを設定したら、はてなダイアリーの日記の中で簡体中国語の文字列を次のように<span lang="zh-cn" class="zhcn">タグと</span>タグで囲みます。zh-cnは簡体中国語をあらわします。zhcnについては後で説明します。

<span lang="zh-cn" class="zhcn">&#x5DF2;&#x6210;&#x4E3A;&#x4E00;&#x79CD;&#x201C;&#x4F20;&#x8BF4;&#x201D;&#x3002;&#x4F60;&#x597D;&#x5417;&#x3002;</span>

すると次のように表示されます(結果はブラウザとOSの設定で異なります)。

已成为一种“传说”。你好吗。

なお、<span>~</span>で囲めるのは一行だけです。改行ごとに面倒でも囲みなおしてください。

その他の言語は?

lang属性で指定するのは2文字の言語コードです。たとえば、lang="ja"と指定すれば日本語であることを宣言します。ロシア語なら"ru"、アラビア語なら"ar"です。しかし中国語のように地域によって文字が変わる場合には、言語コードの後ろに2文字の国コードをハイフンでつなげます。-twや-cnがそれです。
どのような言語コードと国コードが許されているかを説明することは、私の手に余ります。そこで参考になるページへのリンクを紹介しておきます。

スタイルを指定する

lang属性を指定すればすべて解決しそうですが、そうは問屋がおろしません。一番使われているInternet Explorerは、lang属性だけでは中国語が文字化けすることがあります。そこで、窮余の策として中国語の部分だけ中国語フォントを強制します。以下、説明します。
まずスタイルシートを作ります。

/* 繁体中国語 */
.zhtw{
font-family :MingLiU, 'MS UI Gothic', sans-serif;
}
/* 簡体中国語 */
.zhcn{
font-family :SimSun, 'MS UI Gothic', sans-serif;
}

このスタイルシートをコピーしてはてなダイアリーの設定画面のスタイルシート欄の一番下に貼り付けてください。貼り付けたら「この内容に変更する」ボタンを押します。
なお、ロシア語で試験したところスタイルシート無しでもきちんと表示されました。アラビア語は右から左に書くよう以下のようなスタイルシートを用意します。ヘブライ語も同じです。

/* アラビア語 */
.arabic{
direction : rtl;
}

そして
<span lang="ar" class="arabic"></span>で囲みます。

補足

以上の対策はWindowsでのみ有効です。閲覧者のOSがMacUnixの場合には効果は期待薄です。より多くのプラットフォームで正しく表現するため、以下の情報を募集します。

  • MacOS9以降標準で使える繁体、簡体中国語フォント
  • X-Windowsで広く出回っている繁体、簡体中国語フォント

なお、スタイルシートに詳しい人ならば、上のフォントファミリ設定はserifとsans-serifがごっちゃになっていることに気づかれたと思います。WindowsではMingLiUやSimSunのようなserif中国語フォントが多言語処理用標準フォントとして使われていますが、バックアップに便利なMS UI Gothicはsans-serifです。そのため、本来正しくないと思いつつもこのような設定にしています。この辺、アイデアがあればお聞かせください。
最後に、原則としてフォントファミリはこのように複数のフォントを提示すべきです。左から「もっとも望ましいが一般的ではないかもしれないフォント」…「あまり望ましくないが一般的なフォント」へと順に並べます。右端にはserif*5かsans-serif*6をおくといいでしょう。

*1:厳密に言えばいろいろ面倒な話があります。興味のある人はGoogleで検索してみてください。

*2:2005-05-28 Lang属性を使用するように書き直しました

*3:2006-01-17 Lang属性とスタイルシートを使うように書き直しました

*4:はてなと整合性をとるためには仕方のないことです

*5:飾りつきフォントの総称。明朝など

*6:飾りなしフォントの総称。ゴシックなど

/* -----codeの行番号----- */