IE8で上下ルビは出来ない？

質問

HTAを使って、上下にルビを振りたいです。

例）
でんさんき
　電算機
computer

ネットを参照して、幾つかの例を試したのですが、どれも期待通りにはならなかったです。
おそらく、HTAの基礎になっているIE8自身が対応していないからだと思います。

結局、出来ないのでしょうか。
なお、美醜には拘りません。

回答No.1

Ogre7077 · ベストアンサー

定形外のルビを振るならば
<ruby> を使わないで実現するのが現実的かと思います。

HTA となると古い IE が前提なので綺麗に出来ませんが、以下でいかがでしょうか。
数値については調整してください。

<style>
p { font-size:1em; line-height:2em; }
p .wruby { position: relative; line-height:1em;}
p .wruby span { position: absolute; left: 0; top: 0; font-size: 50%; argin-top: -1em; }
p .wruby span.down { margin-top: 1em; }
</style>

<p>
これは<span class=wruby>電算機<span>でんさんき</span><span class=down>ordinateur</span></span>です

お礼

返答ありがとうございます

成功しました。出来るんですね。
ただ、

"%; argin-top"

は

"%; margin-top"

に変更しました。
（随分悩みました。エラー出ないし（笑い））

今後もおねがいします

補足

修正されてますね。

回答No.2

Ogre7077

No.1 を少し修正

<style>
p { font-size:1em; line-height:2em; }
p .wruby { position: relative; line-height:1em;}
p .wruby sup { font-size: 50%; overflow: visible; white-space: nowrap; position: absolute; left: 0; top: 0; vertical-align: top; margin-top: -1em; }
p .wruby sub { font-size: 50%; overflow: visible; white-space: nowrap; position: absolute; left: 0; bottom: 0; vertical-align: bottom; margin-bottom: -1em; }
</style>
<p>
これは<span class=wruby>電算機^{でんさんき}_ordinateur</span>です。