ルビ（ふりがな）をCSSで表現したい

先日使う機会があったので書き留めときます。
それほど必要性が無いようにも思いますが、漢字がそれほど強くない僕にとっては助かるのです。
小説（殆ど読みません）などで難しい漢字がでてきたら雰囲気で適当に読み進めますし、結果間違った覚え方の元になることもしばしば。
そもそもWebページで難しい漢字を使うことが少ないような気がします。

ルビがあればユーザビリティとか良くなるんじゃないか？というWebサイト候補
・閲覧者が小学生以下多数のWebサイト
・科学や生物、専門的なWebサイト
・絵本的なものや学ぶことを目的としたWebサイト全般
・「瞬間」を「とき」と読ませたい場合

<ruby>恥<rt>はじ</rt></ruby>の多い生涯を送って来ました（太宰治）

いま、この<ruby>瞬間<rt>とき</rt></ruby>から寝ようと思います

恥はじの多い生涯を送って来ました（太宰治）
いま、この瞬間ときから寝ようと思います

<p class="tatext">
 <ruby>恥<rt>はじ</rt></ruby>の多い生涯を送って来ました（太宰治）
</p>

<p class="tatext">
 いま、この<ruby>瞬間<rt>とき</rt></ruby>から寝ようと思います
</p>

.tatext {
  writing-mode: vertical-rl; /* 右から左へ縦書き */
  text-orientation: mixed; /* 文字の向きを自動調整 */
}

恥はじの多い生涯を送って来ました（太宰治）
いま、この瞬間ときから寝ようと思います