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

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

例）
でんさんき
　電算機
computer

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

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

No.1 ベストアンサー 回答者： Ogre7077 回答日時： 2015/01/23 11:45

定形外のルビを振るならば

<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>です

この回答への補足

修正されてますね。

補足日時：2015/01/23 15:55

この回答へのお礼

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


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

"%; argin-top"

は

"%; margin-top"

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


今後もおねがいします

お礼日時：2015/01/23 15:55

No.2 回答者： Ogre7077 回答日時： 2015/01/23 15:47

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>です。