rubyタグを使ってHTMLにルビを振る 📝

ルビ注釈要素の存在は知っていましたが、しっかり使ったことがなかったので、仕様を調べてみました。

developer.mozilla.org

DEMO

ソースコード

index.html

<ruby>
  君塚
  <rp>(</rp>
  <rt>きみづか</rt>
  <rp>)</rp>
  史高
  <rp>(</rp>
  <rt>ふみたか</rt>
  <rp>)</rp>
</ruby>

こちらの 拡張 で読み上げ時の挙動も確認してみましたが、rtタグの中身だけ読み上げてくれるので、二重に読み上げられることはありませんでした。

chromewebstore.google.com

そもそも読めるようにルビを振っているわけですから、期待通りの挙動ですね。