<rtc>: The Ruby Text Container element #

::: section-content ::: {#sect1 .notecard .deprecated} Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time. :::

The <rtc> HTML element embraces semantic annotations of characters presented in a ruby of <rb> elements used inside of <ruby> element. <rb> elements can have both pronunciation ( <rt>) and semantic ( <rtc>{aria-current=“page”}) annotations. :::

Try it #

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

HTML Demo: <rtc> #

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-standard .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} 馬(mǎ) 來(lái) 西(xī) 亞(yà) (Malaysia) ::: :::

::: {#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. :::

Examples #

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

<div class="info">
  <ruby>
    <rtc>
      <rb>旧</rb><rt>jiù</rt>
      <rb>金</rb><rt>jīn</rt>
      <rb>山</rb><rt>shān</rt>
    </rtc>
    <rtc>San Francisco</rtc>
  </ruby>

::: :::

Result #

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

Technical summary #

::: section-content

Content categories	None.
Permitted content	Phrasing content or `<rt>` elements.
Tag omission	The closing tag can be omitted if it is immediately followed by a `<rb>`, `<rtc>` or `<rt>` element opening tag or by its parent closing tag.
Permitted parents	A `<ruby>` element.
Permitted ARIA roles	Any
DOM interface	`HTMLElement`

:::

Specifications #

::: _table #

Specification #

HTML Standard
[# rtc]{.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

rtc ≤80 80 33 No 67 ≤13.1 80 80 33 57 ≤13.4 13.0 :::