O elemento HTML <ruby> é uma ferramenta eficiente para aprimorar a apresentação de texto, especialmente para idiomas asiáticos. Esse elemento permite exibir anotações fonéticas ou outras informações complementares acima ou ao lado do texto de base. A partir do Chrome 128, as anotações Ruby poderão ser quebradas de linha, e você poderá estilizar o texto na cor rubi com a propriedade CSS ruby-align.
Um elemento <ruby> consiste em duas partes principais: a base de rubi, que é o texto principal, e o texto de rubi, que é o texto da anotação, marcado com o elemento <rt>. O texto Ruby pode ser exibido sobre ou abaixo da base rubi, como mostrado nos exemplos a seguir.
<ruby>
絵文字
<rt>emoji</rt>
</ruby>
<ruby style="ruby-position: under;">
강남대로
<rt>江南大路</rt>
</ruby>
Por que ele se chama rubi?
Quando os livros foram digitados usando tipos móveis, os tamanhos desses tipos foram definidos em nomes de tamanho de ponto, como Perl e Diamond. O Ruby era usado no sistema britânico para se referir ao tamanho de ponto 5,5. As impressoras japonesas usavam um tamanho semelhante ao Ruby (ponto 5,5) para o texto da anotação e, portanto, começaram a se referir ao próprio texto da anotação como Ruby (ou Rubi foneticamente) em impressões. Quando o texto da anotação foi incluído em HTML, o elemento foi definido como <ruby>. Pica (pc) é outro nome de tamanho de ponto histórico usado em CSS como uma unidade de tamanho de fonte.
Rubi quebrável
Antes, se uma base de rubi ou um texto de rubi fosse maior do que uma linha inteira, eles eram agrupados individualmente, criando desafios de layout. Para superar isso, os desenvolvedores Web muitas vezes marcam um pedaço de texto usando várias tags ruby. Com o rubi quebrável de linha, você pode pular a criação dessa marcação.
No exemplo a seguir, o pinyin (romanização do chinês) é adicionado como um conjunto de anotações de rubi na poesia clássica chinesa. Os resultados da renderização atual são unidos na área de texto da anotação rubi.
Renderização do Chrome 128 com texto de anotação de rubi que quebra de linha sobre o texto de base agrupado, atingindo a renderização de texto ideal.
Em outro exemplo da literatura japonesa, a quebra de linha acontece antes do longo elemento rubi, criando um espaço em branco na primeira linha.
Com o rubi quebrável de linha, a quebra de linha é posicionada no meio de um longo elemento rubi, atingindo o layout ideal.
Esse recurso não corrompe textos curtos em rubi que tenham menos ou iguais a quatro caracteres de base e menores ou iguais a oito caracteres de anotação.
Quando um elemento <ruby> é aninhado dentro de outro elemento <ruby>, o elemento <ruby> interno não quebra de linha.
Como isso muda o comportamento das páginas da Web atuais que usam texto rubi longo, se você precisar desativar esse comportamento de quebra de linha, aplicar white-space:nowrap desativará a quebra de linha dentro do elemento de destino, como de costume.
A propriedade CSS ruby-align
A nova propriedade CSS ruby-align também está disponível no Chrome 128. A propriedade aceita um dos valores de palavra-chave space-around, space-between, start e center, e controla o alinhamento do texto base e do texto de anotação de rubi.
