CSSでルビ（ruby）の読みがなの位置を変えるワザ

ルビの読みがなの位置は上ですね。
それを下にしたい時や自由に調整するにどうすればいいか。

css3のプロパティには ruby-position: over | right | under | left | inter-character; というのがありますが、実はこれ、Chrome では効かないんですね（下図参照: 上の方）。さあ大変。

というわけでちょっと実装方法を考えてみました🙂
出来上がりは下図の下のもの。 display:table を使います！

コードは以下。CodePen はこちら。
検証ブラウザは Chrome / Firefox / Edge です。

<div class="ruby1">
 彼の名前は<ruby>愛新覚羅溥儀<rt>あいしんかくらふぎ</rt></ruby>。
</div>

/* .ruby1 */
.ruby1 {
 display: inline;
}
.ruby1 ruby {
 display: table-cell;
}
.ruby1 rt {
 margin-top: -0.2em;
 display: block;
}

簡単ですね！そしてセマンティック（ここ大事）。

ちなみにrtの見え方ですが、
Chrome では text-align:justify みたいな見え方になりますが、
Edge / Firefox では text-align:center みたいな見え方になります。

こういう方法もありますね！⬇️

CSSでデザイン調整可能なルビ - Qiita