<rt>: The Ruby Text element #

::: section-content The <rt> HTML element specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography. The <rt> element must always be contained within a <ruby> element. :::

Try it #

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

HTML Demo: <rt> #

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% ::: :::

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

Attributes #

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

Examples #

Using ruby annotations #

::: section-content This simple example provides Romaji transliteration for the kanji characters within the <ruby> element:

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

<ruby> 漢 <rt>Kan</rt> 字 <rt>ji</rt> </ruby>

:::

Result #

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

Technical summary #

::: section-content

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

:::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-rt-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

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