La Etiqueta RP

Se utiliza para mostrar anotaciones ruby, comúnmente empleadas en idiomas como el japonés, chino o coreano para proporcionar pronunciaciones o explicaciones sobre caracteres.

La etiqueta <rp> (abreviatura de "ruby parentheses") se utiliza junto con las etiquetas <ruby> y <rt> para mostrar anotaciones ruby, comúnmente empleadas en idiomas como el japonés, chino o coreano para proporcionar pronunciaciones o explicaciones sobre caracteres. Su función principal es añadir paréntesis de respaldo que solo se mostrarán si el navegador no soporta anotaciones ruby. A continuación, te explicamos cómo usarla.

¿Qué son las anotaciones ruby?

Las anotaciones ruby son textos pequeños que aparecen encima, debajo o al lado de un carácter base, generalmente para indicar su pronunciación (ejemplo: furigana en japonés). En HTML, esto se logra con:

  • <ruby>: Contenedor principal.

  • <rt>: Texto de la anotación.

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

Sintaxis básica

La estructura típica incluye:

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

Ejemplo:

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

Resultado en navegadores modernos:
<ruby>漢<rt>かん</rt></ruby> (solo se ve la anotación).

Resultado en navegadores sin soporte:
漢 (かん) (se muestran los paréntesis).

Funcionamiento de <rp>

  • Si el navegador soporta ruby, ignora <rp> y muestra solo <rt>.

  • Si no soporta ruby, muestra el contenido de <rp> alrededor de <rt> como texto alternativo.

Casos de uso

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)

Combinación con múltiples anotaciones

Puedes anotar varios caracteres individualmente:

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

Personalización con CSS

Aunque <rp> no suele necesitar estilos, puedes modificar la apariencia de <rt>:

rt {
  font-size: 0.7em;
  color: #e74c3c;
}
rp {
  display: none; /* Oculta los paréntesis incluso en navegadores antiguos (no recomendado) */
}

Buenas prácticas

  • No omitas <rp>: Aunque los navegadores modernos lo ignoran, es clave para la accesibilidad en sistemas antiguos.

  • Usa paréntesis simples: <rp>(</rp> y <rp>)</rp> son estándar.

  • Mantén el orden: Siempre coloca <rp> antes y después de <rt>.

Ejemplo completo

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

Compatibilidad

La mayoría de los navegadores modernos (Chrome, Firefox, Edge, Safari) soportan <ruby>, pero <rp> asegura que el contenido sea legible en sistemas obsoletos o herramientas de accesibilidad.

Conclusión

La etiqueta <rp> es esencial para garantizar que las anotaciones ruby sean accesibles en todos los contextos. Aunque su uso es específico, es crucial en proyectos multilingües o enfocados en idiomas asiáticos. ¡Inclúyela siempre que trabajes con anotaciones fonéticas!