<rp></rp>
ブラウザ |
|
---|---|
分類 | --- |
利用場所 | 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>
上記のように記述した場合、未対応ブラウザでは次のように表示されます。
使用例
<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])
- 上記の未対応ブラウザの表示例は、Opera12の表示内容を擬似的に再現したものです。