rp element
If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.
Table of contents
Description
The rp
element provides the means to hide information on ruby annotations (ruby
). The main purpose of this element is to make ruby
more compatible, specially because of the partial support provided by browsers.
In browsers supporting ruby annotations, anything that's wrapped within the rp
element will not only be invisible to the user, but will also lack meaning for the document.
The usual contents of a rp
element are parenthesis, but authors can use anything they consider will be comprehensible or appropriate for users to read, when their browsers don't provide support for ruby
.
Because of this, you should consider how ruby annotations are displayed in supporting and non-supporting browsers. We'll take a look at the following code and its approximate rendering in both cases. Parenthesis are provided inside the rp
element to aid non-supporting browsers.
This is how the annotation should look in a supporting browser. Note how all the text inside rp
elements is completely ignored.
<ruby>Base text<rp> (</rp><rt>Annotation</rt><rp>)</rp></ruby>
Annotation
Base text
Now, this is how non-supporting browsers display the text, ignoring all elements and just showing the information in a simple run of text.
<ruby>Base text<rp> (</rp><rt>Annotation</rt><rp>)</rp></ruby>
Base text (Annotation)
Note: remember that these are only emulations achieved with other supported elements and basic CSS styling.
Examples
The following example shows a basic gramatical analisis of a sentence. Inside each ruby
element an annotation is declared (rt
), and parenthesis for non-supporting browsers are provided inside the rp
elements.
<p>The <ruby>book<rp> (</rp><rt>Noun</rt><rp>)</rp></ruby> <ruby>is<rp> (</rp><rt>Verb</rt><rp>)</rp></ruby> on the <ruby>table<rp> (</rp><rt>Noun</rt><rp>)</rp></ruby>.</p>
The book is on the table.
Now we'll consider a different approach to aid readability, using square brackets instead of parenthesis.
<p>The <ruby>book<rp>←[</rp><rt>Noun</rt><rp>]</rp></ruby> <ruby>is<rp>←[</rp><rt>Verb</rt><rp>]</rp></ruby> on the <ruby>table<rp>←[</rp><rt>Noun</rt><rp>]</rp></ruby>.</p>
The book is on the table.
Additionally, CSS could be used to alter the looks of rp
and, for example, change its color or font size.
Attributes
Global attributes
For information about global attributes refer to this list of global attributes in HTML5.
Events
Global events
For information about global events refer to this list of global events in HTML5.