<rp>: The Ruby Fallback Parenthesis element #

::: section-content The <rp> HTML element is used to provide fall-back parentheses for browsers that do not support display of ruby annotations using the <ruby> element. One <rp> element should enclose each of the opening and closing parentheses that wrap the <rt> element that contains the annotation's text. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <rp> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-shorter .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor} 漢 (kan) 字 (ji) ::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} ruby { font-size: 2em; } ::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::

Attributes #

::: section-content This element only includes the global attributes. :::

Usage notes #

::: section-content

Ruby annotations are for showing pronunciation of East Asian characters, like using Japanese furigana or Taiwanese bopomofo characters. The <rp> element is used in the case of lack of <ruby> element support; the <rp> content provides what should be displayed in order to indicate the presence of a ruby annotation, usually parentheses. :::

Examples #

Using ruby annotations #

::: section-content This example uses ruby annotations to display the Romaji{target="_blank"} equivalents for each character.

::: code-example [html]{.language-name}

<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

:::

Result #

::: {#sect1 .code-example} ::: iframe ::: :::

See the article about the <ruby> element for further examples. :::

Without ruby support #

::: section-content If your browser does not support ruby annotations, the result looks like this instead:

::: {#sect2 .code-example} ::: iframe ::: ::: :::

Technical summary #

::: section-content

Content categories	None.
Permitted content	Text
Tag omission	The end tag can be omitted if the element is immediately followed by an `<rt>` or another `<rp>` element, or if there is no more content in the parent element.
Permitted parents	A `<ruby>` element. `<rp>` must be positioned immediately before or after an `<rt>` element.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	Any
DOM interface	`HTMLElement`

:::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-rp-element]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

     Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

rp 5 79 38 5 15 5 4.4 18 38 14 4.2 1.0 :::