テキストでルビを表示してくれるのでいい感じそう。
ただ、今の環境ではすべてのブラウザでちゃんと表示してくれるかがかなり不安です。ですが、おもしろいのでメモっておきます。そのうち使うかもしれないし。
- ルビをふる文字を囲む
- ルビを指定
- ルビ非対応ブラウザに対応させる
もくじ
ルビをふりたい文字をrudy要素で囲みます。
1 | <rudy>薔薇</rudy> |
ルビをrt要素で囲みます。
ルビ対応しているブラウザにかんしてはこれで終了。
1 | <rudy>薔薇<rt>ばら</rt></rudy> |
ルビ非対応では以下のように表示されてしまうんです。
1 | 薔薇ばら |
こんな不本意なことになっちゃいます。
これを防ぐために「薔薇（ばら）」のような表示にしようかと。
カッコを指定するにはrp要素を使います。
このrp要素はルビ対応のブラウザでは表示されない特徴があります！
最終的に以下のようになりました。
1 | <rudy>薔薇<rp>（</rp><rt>ばら</rt><rp>）</rp></rudy> |
