先日、デザイン上ふりがなを振らなきゃいけない機会に遭遇し、初めてrubyタグ関連を知りました。
自分の備忘録も兼ねて記事残します。
rubyタグとは
テキストにルビ（ふりがな）を振るためのマークアップ要素です。
命名なんかだじゃれみたいで笑った。
注釈で使ったりもあるらしいですが、あまり一般的ではないとのことです。
HTMLの要素で、ベーステキストの上、下、隣に描画される小さな注釈であり、よく東アジアの文字の発音を表すのに使われます。他の種類の注釈にも使われることがありますが、この使い方はあまり一般的ではありません。
mdn web docs（https://developer.mozilla.org/ja/docs/Web/HTML/Element/ruby）
rubyタグの使い方
めちゃめちゃシンプルでした。
<ruby>
亜米利加<rt>あめりか<rt>
<ruby>
全体を<ruby>で囲い、ふりがな部分を<rt>で囲うだけ。
上記のコードでこんな感じになりました。
もちろんcssでスタイリングも可能。
ruby {
font-size: 0.8em;
color: #ff0000;
}
rt {
font-size: 0.5em;
color: #ff0000;
}
対応ブラウザ
2024年現在、普通に問題なく使えますね。
表作るのめんどくさかったのでmdnさんから拝借。
rbタグ・rpタグもあるらしい
なんか調べてたら出てきたので書きます。
もちろん、rubyタグと併用して使います。
- rbタグ：ふりがなを振る対象のテキスト
- rpタグ：rbタグが未対応のブラウザでふりがなが普通のテキストサイズで表示される際に、（）で囲って表示させる
rbタグ
漢字それぞれにふりがなを振りたいときに使えるみたいです。
<ruby>
<rb>亜</rb><rb>米</rb><rb>利</rb><rb>加</rb>
<rt>あ</rt><rt>め</rt><rt>り</rt><rt>か</rt>
</ruby>
rpタグ
未対応ブラウザで表示崩れしないために使うみたいです。
以下コードで、亜米利加（あめりか）と表示させます。
<ruby>
<rb>亜</rb><rb>米</rb><rb>利</rb><rb>加</rb>
<rp>（</rp><rt>あ</rt><rt>め</rt><rt>り</rt><rt>か</rt><rp>)</rp>
</ruby>
ただ、対応ブラウザを見る感じそこまで実装しなくてもいいのでは？という意見もありました。
状況に応じてって感じですかね。
まとめ
htmlでもまだまだ知らないことたくさんあるなーって思います。
ふりがなかー擬似要素でやるかーでなにも調べず実装しなくてよかったです。