ルビの位置が文字に近すぎる問題をcssだけで解決する

基本のルビの書き方

<ruby>
 漢字
 <rt> かんじ <rt>
</ruby>

こうすると、なんかルビの位置が漢字に近すぎる。
どうするか、あまり対策が載っていない。
そこでこうしてみた。

まずHTMLの漢字をspanで囲む。

<ruby>
 <span>漢字</span>
 <rt> かんじ <rt>
</ruby>

CSSをこう書く

span {
 display: block
}

まあつまり、漢字の部分がblock用紙になれば良いわけだから、pとかでもいけると思う（未検証）

いやあ、頑張った頑張った。