Hatena::Groupchinese

妄言砂漠

2008-01-09

[][] ピンインの表示  ピンインの表示 - 妄言砂漠 を含むブックマーク はてなブックマーク -  ピンインの表示 - 妄言砂漠

id:cowleyさんの日記を拝見して、ピンインの表示問題が気になったので実験することにします。

二氧化碳

èryǎnghuàtàn

èryǎnghuàtàn

èryǎnghuàtàn

上のピンインを表示するために入力したHTMLは次の通りです。

<span lang="zh-cn" class="cn">二氧化碳</span>
<span class="pyn1">èryǎnghuàtàn</span>
<span class="pyn2">èryǎnghuàtàn</span>
<span class="pyn3">èryǎnghuàtàn</span>

で、スタイルシートには次のクラスを追加しました。

.pyn1 {
  font-family :"Times New Roman",Times,serif;
}
.pyn2 {
  font-family :"Courier New",Courier,monospace;
}
.pyn3 {
  font-family :"Lucida Sans Unicode",sans-serif;
}
.cn{
  font-family :SimSun,sans-serif;
}
.tw{
  font-family :MingLiU,sans-serif;
}

Times New Roman」と「Courier New」は、たいていのWindowsマシンに入っているはずなので、上記のpyn1かpyn2のように指定すれば、だいたい問題なく閲覧できると思います(spanタグを打つのがちょっと手間ですが)。

追記:「.cn」と「.tw」は簡体字と繁体字表示用のクラスです。「碳」などを直接入力するときれいに表示されない問題を回避するために使ってます。

再追記:スクリーンショット.jpで確認したところ、Operaではピンインの問題をうまく回避できないようでした。

[] 模様替え  模様替え - 妄言砂漠 を含むブックマーク はてなブックマーク -  模様替え - 妄言砂漠

公開デザインの「monotone-flower」が格好良かったので、この日記の模様替えをしました。

トラックバック - http://chinese.g.hatena.ne.jp/Ctrans/20080109