Tag HTML <rt>
A tag <rt> é usada para adicionar anotações nas partes superior e inferior do texto, colocado dentro da tag <ruby>.
A tag <rt> carrega a anotação — a leitura, pronúncia ou tradução — dentro de um elemento <ruby>. O elemento <ruby> associa um trecho de texto base a uma ou mais anotações <rt>, técnica usada para mostrar a pronúncia de caracteres do Leste Asiático (furigana japonês, pinyin chinês, coreano) ou, de forma mais geral, qualquer pequena nota explicativa impressa ao lado do texto.
Por padrão, o navegador renderiza o conteúdo de <rt> em letra pequena acima do texto base. O texto base é tudo o que está dentro de <ruby> que não está envolvido em <rt>.
A tag <rt> é um dos elementos HTML5.
Como <rt> funciona dentro de <ruby>
Uma anotação ruby tem duas partes: o texto base e a anotação. A anotação vai em <rt>; o texto base é deixado sem marcação.
<ruby>漢字<rt>かんじ</rt></ruby>Aqui 漢字 é o texto base e かんじ é a leitura exibida acima dele. Você pode anotar cada caractere separadamente para que cada leitura fique sobre seu próprio caractere:
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>O padrão moderno com fallback <rp>
Alguns navegadores (e a maioria dos contextos de texto simples, leitores de tela ou copiar-colar) não conseguem renderizar anotações ruby. A tag <rp> ("parênteses ruby") fornece parênteses de fallback exibidos somente quando a renderização ruby não está disponível. Os navegadores que suportam ruby ocultam o conteúdo de <rp>.
Este é o padrão canônico e recomendado:
<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>- Em um navegador com suporte a ruby, isso renderiza
かんじacima de漢字, e os parênteses ficam ocultos. - Em um contexto de fallback, degrada graciosamente para o texto legível
漢字(かんじ).
Sempre envolva cada <rt> em um par de elementos <rp> quando quiser um fallback robusto.
Exemplo completo
Tag HTML <rt>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<ruby>
漢<rp>(</rp><rt>かん</rt><rp>)</rp>
字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
</body>
</html>Resultado
Sintaxe e omissão da tag
A tag <rt> vem em pares, mas a tag de fechamento pode ser omitida quando <rt> é imediatamente seguido por outro <rt> ou por um elemento <rp>, ou quando não há mais conteúdo no elemento pai <ruby>.
Nota sobre <rb> e <rtc>
Você pode encontrar tutoriais mais antigos que usam <rb> (ruby base) e <rtc> (ruby text container) para marcar anotações complexas em vários níveis. Esses elementos foram removidos do padrão HTML e estão obsoletos. Eles têm suporte inconsistente entre navegadores e não devem ser usados em código novo.
Para o texto base, simplesmente deixe-o sem marcação dentro de <ruby> em vez de envolvê-lo em <rb>. Use o padrão moderno <ruby> + <rt> (+ <rp>) mostrado acima.
Estilizando a posição da anotação
A propriedade CSS ruby-position controla onde a anotação <rt> aparece em relação ao texto base — over (acima, o padrão para a maioria dos scripts), under (abaixo) ou inter-character. Por exemplo:
ruby {
ruby-position: under;
}Isso move a leitura para abaixo dos caracteres base, que é a convenção para alguns idiomas. ruby-position é suportado em todos os principais navegadores modernos.
Suporte de navegadores
A anotação ruby (<ruby>, <rt> e <rp>) é suportada em todos os navegadores modernos, incluindo Chrome, Edge, Firefox e Safari.
Atributos
A tag <rt> suporta os Atributos Globais e os Atributos de Evento.