Etiqueta HTML <rt>
La etiqueta <rt> se utiliza para añadir anotaciones en la parte superior e inferior del texto ubicado dentro de la etiqueta <ruby>.
La etiqueta <rt> contiene la anotación — la lectura, pronunciación o traducción — dentro de un elemento <ruby>. El elemento <ruby> empareja un fragmento de texto base con una o más anotaciones <rt>, una técnica utilizada para mostrar la pronunciación de caracteres del este asiático (furigana japonés, pinyin chino, coreano) o, de forma más general, cualquier pequeña nota explicativa impresa junto al texto.
De forma predeterminada, el navegador muestra el contenido de <rt> en letra pequeña encima del texto base. El texto base es todo lo que hay dentro de <ruby> que no está envuelto en <rt>.
La etiqueta <rt> es uno de los elementos HTML5.
Cómo funciona <rt> dentro de <ruby>
Una anotación ruby tiene dos partes: el texto base y la anotación. La anotación va en <rt>; el texto base se deja sin envolver.
<ruby>漢字<rt>かんじ</rt></ruby>Aquí 漢字 es el texto base y かんじ es la lectura que se muestra encima. Puedes anotar cada carácter por separado para que cada lectura aparezca sobre su propio carácter:
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>El patrón moderno con fallback <rp>
Algunos navegadores (y la mayoría de los contextos de texto plano, lectores de pantalla o copiar y pegar) no pueden renderizar anotaciones ruby. La etiqueta <rp> ("paréntesis ruby") proporciona paréntesis de reserva que se muestran solo cuando la renderización ruby no está disponible. Los navegadores que sí soportan ruby ocultan el contenido de <rp>.
Este es el patrón canónico y recomendado:
<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>- En un navegador compatible con ruby, esto muestra
かんじencima de漢字, y los paréntesis quedan ocultos. - En un contexto de reserva, se degrada con gracia al texto legible
漢字(かんじ).
Envuelve siempre cada <rt> en un par de elementos <rp> cuando quieras un fallback robusto.
Ejemplo completo
Etiqueta 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
Sintaxis y omisión de etiqueta
La etiqueta <rt> va en pares, pero la etiqueta de cierre puede omitirse cuando <rt> va seguida inmediatamente de otra <rt> o de un elemento <rp>, o cuando no queda contenido en el elemento padre <ruby>.
Nota sobre <rb> y <rtc>
Es posible que encuentres tutoriales más antiguos que utilizan <rb> (base ruby) y <rtc> (contenedor de texto ruby) para marcar anotaciones complejas de varios niveles. Estos elementos han sido eliminados del estándar HTML y están obsoletos. Tienen soporte inconsistente en los navegadores y no deben usarse en código nuevo.
Para el texto base, simplemente déjalo sin envolver dentro de <ruby> en lugar de envolverlo en <rb>. Utiliza el patrón moderno <ruby> + <rt> (+ <rp>) mostrado anteriormente.
Estilizar la posición de la anotación
La propiedad CSS ruby-position controla dónde aparece la anotación <rt> en relación con el texto base — over (encima, el valor predeterminado para la mayoría de los scripts), under (debajo) o inter-character. Por ejemplo:
ruby {
ruby-position: under;
}Esto mueve la lectura por debajo de los caracteres base, que es la convención en algunos idiomas. ruby-position está soportado en todos los principales navegadores actuales.
Soporte de navegadores
La anotación ruby (<ruby>, <rt> y <rp>) está soportada en todos los navegadores modernos, incluyendo Chrome, Edge, Firefox y Safari.
Atributos
La etiqueta <rt> admite los Atributos Globales y los Atributos de Evento.