Tag HTML <ruby>

A tag HTML <ruby> define uma anotação ruby — um pequeno trecho de texto renderizado ao lado (geralmente acima) de algum texto base para mostrar sua pronúncia ou significado. As anotações ruby são mais comuns na tipografia do Leste Asiático: por exemplo, exibir a leitura fonética de um caractere chinês ou japonês para que um leitor que não conhece o caractere ainda possa pronunciá-lo.

A tag <ruby> é um dos elementos HTML5.

Como `<ruby>`, `<rt>` e `<rp>` funcionam juntos

Uma anotação ruby é construída a partir de um pequeno grupo de elementos que atuam como uma única unidade:

<ruby> é o contêiner. O texto base (os caracteres sendo anotados) fica diretamente dentro dele.
<rt> (ruby text) contém a anotação — a leitura ou nota exibida acima do texto base.
<rp> (ruby parenthesis) é um fallback opcional. Navegadores modernos ocultam seu conteúdo, mas navegadores que não suportam ruby o exibem, envolvendo a anotação entre parênteses para que a página ainda seja legível.

Portanto, uma anotação completa tem este aspecto:

<ruby>base<rp>(</rp><rt>reading</rt><rp>)</rp></ruby>

Um navegador compatível renderiza reading empilhado acima de base. Um navegador não compatível utiliza a forma inline base(reading), que é justamente a razão pela qual os parênteses <rp> são importantes — sem eles, a anotação ficaria colada ao texto base como basereading.

Nota: Você pode encontrar exemplos mais antigos que envolvem o texto base em um elemento <rb> (ruby base). <rb> está obsoleto — o HTML moderno coloca o texto base diretamente dentro de <ruby> sem nenhum envoltório. Não o adicione a novos markups.

Sintaxe

A tag <ruby> vem em pares. O texto base e suas anotações <rt>/<rp> são escritos entre as tags de abertura (<ruby>) e fechamento (</ruby>).

Exemplo: furigana japonês

No japonês, furigana são pequenos caracteres hiragana impressos acima dos kanji para indicar como o kanji é lido. O elemento <ruby> é a forma padrão de marcar furigana na web. Aqui o kanji 明日 (que significa "amanhã") é anotado com sua leitura Ashita:

Tag HTML <ruby>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <ruby>
      明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
    </ruby>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Anotando cada caractere separadamente

Você pode inserir vários pares de caractere base/<rt> dentro de um único elemento <ruby>. Cada caractere base é então anotado com sua própria leitura, e as leituras ficam alinhadas acima dos caracteres corretos:

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

Isso é útil quando uma palavra com múltiplos caracteres é lida de forma diferente por caractere. A mesma estrutura funciona para o pinyin chinês (pronúncia em letras latinas, por exemplo, 北京 com Běi / jīng) e para o bopomofo / zhuyin, em que os símbolos fonéticos são colocados ao lado dos caracteres base.

Estilizando ruby com CSS

A tag <ruby> suporta os Atributos Globais e os Atributos de Evento. Ela não possui atributos específicos do elemento — a aparência é controlada com CSS.

Você pode colorir o texto base e o texto de anotação de forma independente, selecionando os seletores ruby e rt:

ruby {
  color: blue;
}
rt {
  color: red;
}

Duas propriedades CSS são específicas para o layout ruby:

ruby-position controla onde a anotação fica em relação ao texto base. Os valores comuns são over (acima da base — o padrão para a maioria dos scripts), under (abaixo dele, às vezes usado para bopomofo ou para manter a altura da linha organizada) e alternate.
ruby-align controla como a anotação e o texto base são distribuídos quando diferem em comprimento, por exemplo, start, center ou space-between.

ruby {
  ruby-position: under;
  ruby-align: center;
}

Suporte nos navegadores: Os elementos <ruby>, <rt> e <rp> são bem suportados em todos os navegadores modernos. A propriedade ruby-position também é amplamente suportada, enquanto ruby-align tem suporte mais limitado — teste-a antes de depender dela, e mantenha o fallback <rp> para que o significado seja preservado mesmo onde o estilo ruby esteja incompleto.

Prática

Qual é o propósito da tag HTML <ruby>?

É usada para incorporar um vídeo.É usada para criar seções em um documento.Representa uma anotação ruby: pequenos trechos de texto exibidos ao lado do texto base para indicar pronúncia, tipicamente na tipografia do Leste Asiático.É usada para definir os parênteses de fallback exibidos em navegadores sem suporte.É usada para inserir uma imagem.

Como <ruby>, <rt> e <rp> funcionam juntos