rubyタグは文字以外の要素の上にもふれる

青空文庫を読んでいたら出てきたので「こういうのもあるのか…」というメモ

記述例

例えば以下のように記述する

<ruby>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="5 5 10 10" width="20" height="20">
  <circle cx="10" cy="10" r="5" fill="#000" />
</svg>
<rp>(</rp><rt>黒円</rt><rp>)</rp>
</ruby>

そうするとこのように円のsvgの上にルビをふることができる。

ルビがsvgの上にふられる

参考リンク

• 芥川龍之介 羅生門 - 肩で息を切りながら、眼を、眼球めだまが〜 の下りでまぶたという字を画像でおいてrubyタグで表現することをしている