Hatena::Groupchinese

妄言砂漠

2008-08-01

[] position  position - 妄言砂漠 を含むブックマーク はてなブックマーク -  position - 妄言砂漠

f:id:Ctrans:20080801145050p:image:w400

昨日、d:id:QianChongさんに教えていただいた(感謝)表示不具合の原因が判明。IEでこの日記を見ると上の画面のようにコメントが本文にかぶってしまっていたのですが、スタイルシートの「div.comment」に「position: relative;」を加えたらかぶらなくなりました。公開デザインの「ataraxia」を利用していますが、格好良いデザインが気に入っていたので問題が解決できてうれしい。早速元に戻しました。

関連:
http://d.hatena.ne.jp/designset/1062
http://d.hatena.ne.jp/chepooka/20080426/1209222362 *1

*1:作者のchepookaさんへのお知らせもかねて

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

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ではピンインの問題をうまく回避できないようでした。

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