脇見運転 このページをアンテナに追加 RSSフィード

ページ下に目次を用意しています。ボストン滞在記録は2004年1月からご覧ください。スカイポッドについては専用目次をご覧ください。

2004-04-25 多国語の文字化けをなくす

suikan2004-04-25

クリスチャン・サイエンス

知り合い何人かに「ぜひ、ボストン・シンフォニーの写真を!」とせがまれています。私のようなへぼの写真を見なくてもいくらでもいい写真はあるのですが。

それはさておき、BSOは毎週行くWhole Foods MarketのWestland店のすぐそばにあります。そこで家人が買い物に行っている間に写真を撮りに行きました。ついでにいつも気にしていた堂々たる建物もぱちり。そばに解説がありました。なになに「クリスチャン・サイエンスの第一教会」

何ーーーっ!

クリスチャン・サイエンスというと19世紀後半におこった、心霊療法とキリスト教をごっちゃにした新興宗教*1です。ボストンに本部があったのか。それもこんなにでかい。

いやそれにしても

これが全部マサチューセッツ通り沿いに並んでいるとは。ボストン恐るべし。

関連写真

文字化けをなくす

目次

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

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

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

などがあります。これらは言語設定が欠落しているためです。

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

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

そこで、中国語の部分だけ「ここは中国語です」とlang属性でタグ付けします*3((2006-01-17 Lang属性スタイルシートを使うように書き直しました))

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

はてなダイアリー日記の中で繁体中国語の文字列を次のように<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でのみ有効です。閲覧者のOSMacUnixの場合には効果は期待薄です。より多くのプラットフォームで正しく表現するため、以下の情報を募集します。

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

なお、スタイルシートに詳しい人ならば、上のフォントファミリ設定はserifとsans-serifがごっちゃになっていることに気づかれたと思います。WindowsではMingLiUやSimSunのようなserif中国語フォントが多言語処理用標準フォントとして使われていますが、バックアップに便利なMS UI Gothicはsans-serifです。そのため、本来正しくないと思いつつもこのような設定にしています。この辺、アイデアがあればお聞かせください。

最後に、原則としてフォントファミリはこのように複数のフォントを提示すべきです。左から「もっとも望ましいが一般的ではないかもしれないフォント」…「あまり望ましくないが一般的なフォント」へと順に並べます。右端にはserif*5かsans-serif*6をおくといいでしょう。

はてなグループへの要望

httpsが実装されていることを確認しました。ありがとうございます。

しかし、いくつか問題があります。

  • 最初にhttpでグループ内ページにアクセスすると、その後もhttpでアクセスし続ける。
  • グループ内ページへのリンクのURLをhttpで記述すると、そのままhttpでアクセスする。

いずれも使う側のミスといえないことはありませんが、セキュアな通信の立場から見るとこれらは望ましくありません。

そこで、httpだけを許す通常の動作と、httpsだけを許すオプション動作を分離することを提案します。

(id:hatenadiaryへの提案)

*1:私はアメリカの理科の教科書に創造論を載せるようごり押しした急先鋒はクリスチャン・サイエンスだと思っていたのですが、それは違うようです。

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

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

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

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

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

QianChongQianChong 2004/04/26 00:36 さっそく教えて頂いたとおりスタイルシートを作り、繁体字の部分にタグを貼り付けてみました。結果は…すばらしいっ!フォントサイズの乱れもなく、美しく表示されました。これでブラウザの設定はいつも通りに戻せるし、いいことづくめ。本当にありがとうございました。

moli-xiongmoli-xiong 2004/04/26 03:01 私もさっそくやってみました。結果は…すばらしいっ!中国語で書いた上司への苦情が、美しく表示されてしまい、あわてています!ありがとうございました!

suikansuikan 2004/04/26 03:52 やや、どうやらこの方法で問題は解決のようですね。よかったよかった。

suikansuikan 2004/04/26 04:50 <span>~</span>の使い方に制限があります。説明を追加しました。

moli-xiongmoli-xiong 2004/04/26 22:54 spanのタグで囲めるのは1行だけとありますが、どれが1行なのかわかりません。25日の私の日記は、全部ひとまとめでくくってしまいましたが、無問題でした。こういうやり方だと、なにか支障が出てくるのでしょうか? よろしかったらまた教えてください!

moli-xiongmoli-xiong 2004/04/26 22:56 そうそう! 前から言いたかったんですが、suikanさんのカレンダー、しゅぱぱぱぱって写真が集合してきて、超かわいい!

akuninakunin 2004/04/26 23:14 ついでに突っ込むと、今日の縮小版の写真と拡大版の写真が違って見えるのですが...(ぉぃ)

suikansuikan 2004/04/27 01:47 ん?違ってますか?スクリプトで自動生成しているのですがサーバーがおかしいのでしょうか。

akuninakunin 2004/04/27 09:00 どうやら変にトリミングがかかっていますね>拡大写真

suikansuikan 2004/04/27 11:40 いろいろ位置あわせとかクリッピング・レクタングル(古)の都合のようです。

azzurroazzurro 2007/08/17 17:00 はじめまして。アズーロと申します。大変、お世話になったので、お礼と言っては何ですが、Mac OS 9での中国語表示ですが、オプションでフォントをシステムにインストールすれば閲覧・作成は可能です。ただ多くのMac OS 9ユーザはインストールしていませんので、文字化けするかと思います。 http://hyena.human.niigata-u.ac.jp/files/os9-01.html#OS9 (一応、Macユーザです)

suikansuikan 2007/08/18 22:50 はじめまして。MacOS9も中国語はまだオプションなのですか。ほとんどのユーザーにとっては多国語は不要とはいえ、そろそろインストール不要になって欲しいですね。

2001 | 01 |
2003 | 10 | 11 | 12 |
2004 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2005 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2006 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2007 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2008 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2009 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2010 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2011 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2012 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2013 | 01 | 03 | 04 | 05 | 06 | 07 | 09 | 10 | 11 | 12 |
2014 | 02 | 03 | 04 | 07 | 08 | 09 | 10 | 11 | 12 |
2015 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 12 |
2016 | 01 | 02 | 03 | 04 | 07 | 09 | 10 | 11 | 12 |
2017 | 01 | 02 | 04 |