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.

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.

Browser support for ruby elements (ruby, rt and rp) isn't complete. Authors may have to rely on styling techniques (CSS) to make ruby annotations work crossbrowser.

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 (Noun) is (Verb) on the table (Noun).

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←[Noun] is←[Verb] on the table←[Noun].

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.