送り仮名を振る。
要素一覧
| 要素 | 概要 |
|---|---|
<ruby> |
送り仮名を振る。ベース文字とルビの２つで構成される。 |
<rt> |
ルビをつける。 |
<rp> |
ルビ非対応ブラウザで表示する文字 |
| HTML | 表示 |
|---|---|
<ruby>山田<rt>やまだ</rt></ruby> | 山田 |
<ruby>山<rt>やま</rt>田<rt>だ</rt></ruby> | 山田 |
<ruby>山田<rp>（</rp><rt>やまだ</rt><rp>）</rp></ruby> | 山田 |
<ruby><ruby>山田<rt>やまだ</rt></ruby><rt>ヒーロー</rt></ruby> | 山田 |
読み＋意味
ルビはふつう読みを与える。さらに意味を与えることもできる。ただ、二行分もルビを振ることになってしまう。あまり見たことがない。というか、今回はじめて知った。
検索ヒット問題
⚠注意！ ブラウザでテキスト検索するとき、ルビで分断されると検索できなくなる。たとえば上記の例だと「山田」で検索したとき、「山」「田」の２つに分けてルビを振っていたらヒットしなくなってしまう。なので熟語として連結した状態でヒットさせたいときはルビを分断せず、まとめてルビ振りすべき。残念ながら、読みの位置を正しく分断しつつ検索では熟語としてヒットさせることはできない。私はその術を知らない。
中二病御用達
ルビは中二病御用達である。たとえば以下のようにルビを振ることでかっこよく表現できる。
<ruby>極大消滅呪文<rt>メドローア</rt></ruby>
極大消滅呪文
<ruby><ruby>極大消滅呪文<rt>メドローア</rt></ruby><rt>ポップがマトリフから教わった最強魔法</rt></ruby>
極大消滅呪文
ルビ非対応での表示
<ruby>山田<rt>やまだ</rt></ruby>
山田（やまだ）
<ruby>山<rt>やま</rt>田<rt>だ</rt></ruby>
山（やま）田（だ）
ルビ非対応のブラウザなんてもう無いと思いたい。
あと、JavaScriptでDOM操作しているときのinnerTextにも影響を与える。
なので、どのように分割してルビを振るか、よく考えたほうがよい。
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
$ uname -a Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux
