W3docs

Tag HTML <rtc>

O elemento HTML <rtc> é obsoleto e foi removido da especificação. Saiba por quê e conheça a marcação ruby moderna com <ruby>, <rt> e <rp>.

O elemento HTML <rtc> (Ruby Text Container) agrupava um ou mais elementos <rt> para adicionar uma segunda camada de anotações — como uma tradução ou leitura alternativa — ao texto base ruby dentro de um contêiner <ruby>.

Importante: <rtc> é obsoleto. Foi removido do HTML Living Standard junto com os elementos <rbc> e <rb>. Os navegadores modernos não oferecem mais suporte ao modelo "complex ruby" do qual fazia parte, podendo ignorar a tag ou renderizá-la de forma imprevisível. Não use <rtc> em novas páginas. Esta página o documenta para referência histórica e apresenta a substituição moderna abaixo.

Por que foi removido

<rtc> pertencia a um modelo ruby mais antigo e complexo que também dependia de <rbc> (ruby base container) e <rb> (ruby base). Esse modelo permitia aos autores empilhar duas camadas de anotação — por exemplo, uma leitura fonética e uma tradução — sobre uma única base. Na prática, a implementação era inconsistente entre os navegadores e difícil de criar, por isso a especificação foi simplificada. Hoje os elementos <ruby>, <rt> e <rp> (com um pouco de CSS) cobrem os casos relevantes.

A substituição moderna

Para o ruby padrão do Leste Asiático — um caractere base com um guia de pronúncia acima — você só precisa de <ruby>, <rt> para a anotação e <rp> como fallback para navegadores sem suporte a ruby.

Exemplo: ruby sem <rtc>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <ruby>
      旧<rp>(</rp><rt>jiù</rt><rp>)</rp>
      金<rp>(</rp><rt>jīn</rt><rp>)</rp>
      山<rp>(</rp><rt>shān</rt><rp>)</rp>
    </ruby>
  </body>
</html>

Os parênteses de <rp> são ocultados pelos navegadores que renderizam ruby e exibidos como texto simples pelos que não renderizam — assim 旧(jiù)金(jīn)山(shān) permanece legível em qualquer lugar.

Controlando ruby com CSS

Você pode ajustar onde a anotação aparece e como ela se alinha usando CSS em vez de elementos contêiner extras:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ruby {
        ruby-position: over;   /* place reading above the base (under, inter-character, alternate also valid) */
        ruby-align: center;    /* distribute the annotation: start, center, space-between, space-around */
      }
    </style>
  </head>
  <body>
    <ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby>
  </body>
</html>

Se você realmente precisar de uma segunda camada de anotação (o caso de uso para o qual <rtc> foi criado), a abordagem mais confiável atualmente é usar dois elementos <ruby> empilhados ou estilizar com ruby-position, já que o modelo de complex ruby não é mais interoperável.

Caminho de migração

Para atualizar marcações legadas que usam <rtc>:

  1. Remova o contêiner <rbc> e coloque os caracteres base diretamente dentro de <ruby>.
  2. Mantenha cada <rt> imediatamente após a base que ele anota.
  3. Remova o agrupamento com <rtc>; se o usava para uma camada de tradução, mova esse texto para um elemento separado ou para um segundo <ruby>.
  4. Adicione parênteses de fallback <rp> para navegadores sem suporte a ruby.

Suporte dos navegadores

<rtc> foi removido da especificação e não faz parte do suporte moderno a ruby. Trate-o como sem suporte em novos trabalhos. Os elementos substitutos têm suporte sólido:

ElementoSuporte
<ruby>Todos os navegadores modernos
<rt>Todos os navegadores modernos
<rp>Todos os navegadores modernos
<rtc>Obsoleto — removido, não use

As propriedades CSS ruby-position e ruby-align têm suporte nas versões atuais do Chrome, Edge, Firefox e Safari (o comportamento dos fornecedores para algumas palavras-chave do ruby-align ainda varia).

Elementos relacionados

  • <ruby> — o contêiner de anotação ruby
  • <rt> — o texto ruby (pronúncia/anotação)
  • <rp> — parênteses de fallback para navegadores sem suporte a ruby

<rtc> anteriormente suportava os Atributos Globais e Atributos de Evento.

Prática

Prática
Qual é o status correto do elemento HTML rtc atualmente?
Qual é o status correto do elemento HTML rtc atualmente?
Was this page helpful?