あれやこれや自分のための覚書

webページでルビをふる

ルビを振る

紙媒体違うねんからルビなんてふれませんよ って却下してきましたが、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

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

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

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

ちなみに、

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

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

https://ameblo.jp/ar50pctrainer/


ありがとうございます。

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近のコメント

    RSS へのコメント

    • エラーが発生しました。フィードの配信が停止している可能性があります。再度お試しください。
    友だち追加