La Etiqueta RT

Se utiliza junto para crear anotaciones fonéticas o explicativas sobre caracteres en idiomas como japonés, chino o coreano. Su propósito es mostrar pronunciaciones.

La etiqueta <rt> (abreviatura de "ruby text") se utiliza junto con <ruby> y <rp> para crear anotaciones fonéticas o explicativas sobre caracteres en idiomas como japonés, chino o coreano. Su propósito es mostrar pronunciaciones (ejemplo: furigana en japonés) o traducciones breves. A continuación, te enseñamos cómo implementarla correctamente.

¿Qué son las anotaciones ruby?

Las anotaciones ruby son textos pequeños que aparecen sobre, debajo o al lado de un carácter base para guiar su lectura. En HTML, se estructuran con:

  • <ruby>: Contenedor principal.

  • <rt>: Texto de la anotación (se muestra encima del carácter base).

  • <rp>: Paréntesis de respaldo para navegadores sin soporte.

Sintaxis básica

La estructura típica es:

<ruby>
   Carácter base
   <rt>Anotación</rt>
</ruby>

Ejemplo:

<ruby>
   漢 <rt>かん</rt>
</ruby>

Funcionamiento de <rt>

  • Propósito: Proporcionar una guía de pronunciación o significado.

  • Posición: Por defecto, se muestra encima del carácter base (dependiendo del idioma y navegador).

  • Compatibilidad: Funciona en Chrome, Firefox, Safari y Edge. En navegadores antiguos, se usa <rp> como respaldo.

Casos de uso comunes

Japonés (furigana)

<ruby>
   東京 <rp>(</rp><rt>とうきょう</rt><rp>)</rp>
</ruby>

Visualización:

  • Navegadores modernos: 東京

  • Sin soporte: 東京 (とうきょう)

Chino (pinyin)

<ruby>
   北京 <rp>(</rp><rt>Běijīng</rt><rp>)</rp>
</ruby>

Visualización:

  • Navegadores modernos: 北京

  • Sin soporte: 北京 (Běijīng)

Traducciones breves

<ruby>
   Pizza <rt>ピザ</rt>
</ruby>

Personalización con CSS

Puedes modificar el estilo de <rt> para ajustar su posición, tamaño o color:

rt {
  font-size: 0.6em;       /* Tamaño más pequeño */
  color: #e74c3c;         /* Color rojo */
  margin-bottom: 5px;     /* Espacio debajo */
  font-family: Arial;     /* Fuente personalizada */
}
<ruby style="font-size: 24px;">
   漢 <rt style="color: #2ecc71; font-size: 0.5em;">かん</rt>
</ruby>

Combinación con múltiples caracteres

Para anotar varios caracteres, repite la estructura <rt>:

<ruby>
   日 <rt>に</rt>
   本 <rt>ほん</rt>
   語 <rt>ご</rt>
</ruby>

Accesibilidad y buenas prácticas

Usa <rp>: Añade paréntesis de respaldo para navegadores sin soporte:

<ruby>
   漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
</ruby>

Atributo lang: Define el idioma del documento para garantizar renderizado correcto:

<html lang="ja"> <!-- Japonés -->

Evita abusar: Usa <rt> solo para anotaciones relevantes, no para estilizar texto arbitrario.

Ejemplo completo

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    ruby {
      font-size: 28px;
      margin: 20px;
    }
    rt {
      font-size: 0.6em;
      color: #3498db;
    }
    rp {
      color: #7f8c8d;
    }
  </style>
</head>
<body>
  <p>
    Palabra en japonés: 
    <ruby>
      日本語 <rp>(</rp><rt>にほんご</rt><rp>)</rp>
    </ruby>
  </p>
</body>
</html>

Diferencias clave

<rt> <rp>
Muestra la anotación. Muestra paréntesis de respaldo.
Requiere soporte de <ruby>. Solo se activa sin soporte.

Conclusión

La etiqueta <rt> es fundamental para integrar anotaciones fonéticas en idiomas asiáticos o textos especializados. Al combinarla con <ruby> y <rp>, garantizas accesibilidad y compatibilidad. ¡Inclúyela en tus proyectos para enriquecer la experiencia de usuarios multilingües!