kirokugakari

紙媒体違うねんからルビなんてふれませんよ　って却下してきましたが、html5のタグで実装してみました。

<p>
これは
<ruby>
<rb>薔薇</rb>
<rt>ばら</rt>
</ruby>
の香りです。
</p>

対応ブラウザの場合、下記のように表示されます。

これは 薔薇 ばら の香りです。

対応していないブラウザの場合

これは薔薇ばらの香りです。

と表示されてしまいます。

<p>
これは
<ruby>
薔薇<rp>（</rp><rt>ばら/rt><rp>）</rp>
</ruby>
の香りです。
</p>

とすれば、対応していない場合は（　）でくくられます。

これは薔薇（ばら）の香りです。

ほらね♪

ruby要素 … ルビをふるテキストの範囲
rb要素 … ルビベース（対象のテキスト）を明示的に示す
rt要素 … ルビテキスト（ふりがなの文字列）
rtc要素 … ルビテキストのコンテナ
rp要素 … 未対応ブラウザで表示される括弧

なので・・・

<p>
私の名前は
<ruby>
<rb>西野</rb><rp>（</rp><rt>にしの</rt><rp>）</rp>
<rb>都</rb><rp>（</rp><rt>みやこ</rt><rp>）</rp>
です。
</ruby>
<ruby>
<rb>西宮市</rb><rp>(</rp><rt>にしのみやし</rt><rp>)</rp>
に住んでいます。
</ruby>
</p>

と、ルビを振る範囲を設定することができます。

私の名前は 西野（にしの） 都（みやこ） です。 西宮市(にしのみやし) に住んでいます。

こちらのサイトがとても参考になりました。
TAG Index
https://www.tagindex.com/html5/text/ruby.html

ところで・・・ルビって、宝石のルビーのことなんですね。

１９世紀後半、イギリスで活字の大きさを宝石で表現していた名残のようで、

ルビーは5.5ポイントのことだとか。

ちなみに、

　　エメラルド（6.5ポイント）
　　ルビー（5.5ポイント）
　　パール（5ポイント）
　　ダイアモンド（4.5ポイント）

だそうですよ。
こちらのサイトで知りました。

https://ameblo.jp/ar50pctrainer/

ありがとうございます。