<rp></rp>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
分類 ---
利用場所 ruby要素の子要素として(rt要素またはrtc要素の直前か直後、しかしrt要素の間には入れられない)
内容 フレージング・コンテンツ

rp要素は、ルビテキストを囲む括弧記号などを指定します。この要素は、ruby要素の子要素として使用します(rt要素またはrtc要素の直前か直後に配置します)。


<ruby>
漢<rp></rp><rt>かん</rt><rp></rp><rp></rp><rt>じ</rt><rp></rp>
</ruby>

<ruby>
今日
<rp></rp><rt>きょう</rt>
<rp></rp><rtc>Today</rtc><rp>])</rp>
</ruby>

rp要素の内容(括弧)は、ルビに対応していないブラウザで表示されることになります。ルビに対応しているブラウザでは、この要素の内容は無視されます。

  • これは、ルビに対応していないブラウザ向けに、ルビの範囲を伝えやすくするためのものです。一般的に、それは括弧記号で表されると思いますが、必要であれば括弧以外の内容を入れることもできます。

次の例では、亜米利加というテキストにアメリカというルビを振っています。

<ruby>亜米利加<rt>アメリカ</rt></ruby>

上記のように記述した場合、未対応ブラウザでは亜米利加アメリカが連続して表示されてしまいます。(分かりにくいテキストになってしまいます)

亜米利加アメリカ


未対応ブラウザでも分かりやすくしたい場合は、次のようにrt要素(ルビテキスト)の前後にrp要素を配置します。

<ruby>亜米利加<rp></rp><rt>アメリカ</rt><rp></rp></ruby>

上記のように記述することで、ルビテキストの前後に括弧が表示されるようになります。

亜米利加(アメリカ)


必要であれば、次のように別の括弧記号を使用することもできます。

<ruby>亜米利加<rp></rp><rt>アメリカ</rt><rp></rp></ruby>

また、次のように括弧以外の内容も入れることができ、2つ1組ではなく単体で使用することもできます。

<ul>
<li><ruby>亜米利加<rp></rp><rt>アメリカ</rt></ruby></li>
<li><ruby>伊太利亜<rp></rp><rt>イタリア</rt></ruby></li>
<li><ruby>仏蘭西<rp></rp><rt>フランス</rt></ruby></li>
</ul>

rtc要素で使用する場合

rtc要素を使って両側ルビを設定している場合は、例えば次のようにrp要素を配置することができます。

<ruby>
今日
<rp></rp><rt>きょう</rt>
<rp></rp><rtc>Today</rtc><rp>])</rp>
</ruby>

上記のように記述した場合、未対応ブラウザでは次のように表示されます。

今日(きょう[Today])

使用例

グループルビで使用した例

<p><ruby>
今日<rp></rp><rt>きょう</rt><rp></rp>
</ruby></p>

表示例

今日きょう

  • 未対応ブラウザの表示例: 今日(きょう)
モノルビで使用した例

<p><ruby>
漢<rp></rp><rt>かん</rt><rp></rp><rp></rp><rt>じ</rt><rp></rp>
</ruby></p>

表示例

かん

  • 未対応ブラウザの表示例: 漢(かん) 字(じ)
熟語ルビで使用した例

<p><ruby>
<rb>朝</rb><rb>寝</rb><rb>坊</rb>
<rp></rp><rt>あさ</rt><rt>ね</rt><rt>ぼう</rt><rp></rp>
</ruby></p>

表示例

あさぼう

  • 未対応ブラウザの表示例: 朝寝坊 (あさねぼう)
両側ルビで使用した例

<p><ruby>
<rb>朝</rb><rb>寝</rb><rb>坊</rb>
<rp></rp><rt>あさ</rt><rt>ね</rt><rt>ぼう</rt>
<rp></rp><rtc>Oversleeping</rtc><rp>])</rp>
</ruby></p>

<p><ruby>
<rb>朝</rb><rb>寝</rb><rb>坊</rb>
<rp></rp><rt>あさ</rt><rt>ね</rt><rt>ぼう</rt>
<rp></rp><rtc><rt>asa</rt><rt>ne</rt><rt>bou</rt></rtc><rp>])</rp>
</ruby></p>

表示例

あさぼう Oversleeping])

あさぼう asanebou])

  • 未対応ブラウザの表示例: 朝寝坊 (あさねぼう [Oversleeping])
  • 未対応ブラウザの表示例: 朝寝坊 (あさねぼう [asanebou])
  • 上記の未対応ブラウザの表示例は、Opera12の表示内容を擬似的に再現したものです。