ルビ

サンプル

青梗ちんげん菜さい
青梗(ちんげん菜さい)

<ruby>
 青梗<rt>ちんげん</rt>
 菜<rt>さい</rt>
</ruby>

もしくは、

<ruby>
青梗<rp>(</rp><rt>ちんげん</rt><rp>)</rp>
菜<rp>(</rp><rt>さい</rt><rp>)</rp>
</ruby>

---

<ruby>	ルビの全体を示す。
<rb>	対象のテキスト（例だと青梗菜）。<rb>はhtml5.0から省略可能
<rt>	ルビ部分（例だとちんげんさい）
<rp>	未対応ブラウザの表示方法

---

CSS

above(アボイヴ)

<ruby style="ruby-position: above">above<rp>(</rp><rt>アボイヴ</rt><rp>)</rp></ruby>

---

inline(インライン)

<ruby style="ruby-position: inline">inline<rp>(</rp><rt>インライン</rt><rp>)</rp></ruby>

---

inlineとaboveの違いについて

aboveだとプラウザが非対応の場合、表示されません。

inlineは表示されますが、見栄え的にルビという感じがしません。

---

位置を指定する

サンプル

右にルビをだしてみます。(右)で設定

中央にルビをだしてみます。(中央)で設定

左にルビをだしてみます。(左)で設定

<p><ruby style="ruby-align: right;">右にルビをだしてみます。<rp>(</rp><rt>右</rt><rp>)</rp></ruby>で設定</p>
<p><ruby style="ruby-align: center;">中央にルビをだしてみます。<rp>(</rp><rt>中央</rt><rp>)</rp></ruby>で設定</p>
<p><ruby style="ruby-align: left;">左にルビをだしてみます。<rp>(</rp><rt>左</rt><rp>)</rp></ruby>で設定</p>

位置という部分に右ならright、真ん中ならcenter、左ならleftとしてください。

---

headにて一括設定する

ruby{
    ruby-position: above;
    ruby-align: right;
}

 

関連記事