La Etiqueta RUBY

Se utiliza para añadir anotaciones fonéticas o explicativas a caracteres en idiomas como japonés, chino o coreano.

La etiqueta <ruby> en HTML se utiliza para añadir anotaciones fonéticas o explicativas a caracteres en idiomas como japonés, chino o coreano. Estas anotaciones, conocidas como ruby text, suelen aparecer encima, debajo o al lado del texto base para guiar su pronunciación o significado. A continuación, te enseñamos cómo implementarla correctamente.

¿Qué es una anotación ruby?

Las anotaciones ruby son textos pequeños que acompañan a caracteres complejos para facilitar su lectura. Por ejemplo:

  • Japonés (furigana): 漢 → かん

  • Chino (pinyin): 北京 → Běijīng

  • Coreano (pronunciación): 한국 → Hanguk

En HTML, estas anotaciones se construyen con:

  • <ruby>: Contenedor principal.

  • <rt> (ruby text): La anotación.

  • <rp> (ruby parentheses): Paréntesis de respaldo para navegadores sin soporte.

Sintaxis básica

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

  • <rt>: Muestra la anotación (ejemplo: pronunciación).

  • <rp>: Añade paréntesis que solo se ven si el navegador no soporta <ruby>.

Ejemplo 1: Japonés (furigana)

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

Resultado:

  • Navegadores modernos: 漢

  • Sin soporte: 漢 (かん)

Ejemplo 2: Chino (pinyin)

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

Resultado:

  • Navegadores modernos: 北京

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

Anotaciones para múltiples caracteres

Puedes anotar cada carácter individualmente:

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

Personalización con CSS

Modifica el estilo de las anotaciones usando clases o selectores:

/* Estilo general */
ruby {
  font-size: 24px;       /* Tamaño del texto base */
  margin: 10px;
}

/* Anotaciones */
rt {
  font-size: 0.6em;      /* Tamaño más pequeño */
  color: #e74c3c;        /* Color rojo */
  font-family: Arial;    /* Fuente personalizada */
}

/* Paréntesis de respaldo */
rp {
  color: #7f8c8d;        /* Color gris */
}
<ruby style="font-size: 28px;">
   東京 <rp>(</rp><rt style="color: #2ecc71;">とうきょう</rt><rp>)</rp>
</ruby>

Accesibilidad y buenas prácticas

Siempre incluye <rp>: Garantiza que las anotaciones sean legibles en navegadores antiguos o herramientas sin soporte.

Define el idioma: Usa el atributo lang en <html> para mejorar el renderizado:

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

Evita usos incorrectos: <ruby> está diseñado para anotaciones lingüísticas, no para estilizar texto arbitrario.

Compatibilidad

  • Navegadores modernos: Chrome, Firefox, Safari y Edge soportan <ruby>.

  • Navegadores antiguos: Muestran el contenido de <rp>, como paréntesis alrededor de <rt>.

Ejemplo completo

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de &lt;ruby&gt;</title>
  <style>
    ruby {
      font-size: 24px;
      margin: 15px;
    }
    rt {
      font-size: 0.6em;
      color: #3498db;
    }
    rp {
      color: #95a5a6;
    }
  </style>
</head>
<body>
  <h2>Palabras en japonés con furigana</h2>
  
  <p>
    <ruby>
      日本語 <rp>(</rp><rt>にほんご</rt><rp>)</rp>
    </ruby> → "Idioma japonés"
  </p>

  <p>
    <ruby>
      東京 <rp>(</rp><rt>とうきょう</rt><rp>)</rp>
    </ruby> → "Tokio"
  </p>
</body>
</html>

Casos avanzados

Anotaciones verticales (para coreano o chino clásico)

Algunos navegadores soportan ruby-position: vertical en CSS:

rt {
  ruby-position: under; /* Anotación debajo (ejemplo: coreano) */
}

Uso en traducciones

<ruby>
  Pizza <rp>(</rp><rt>ピザ</rt><rp>)</rp>
</ruby>

Conclusión

La etiqueta <ruby> es una herramienta esencial para trabajar con textos en idiomas asiáticos o contenido especializado que requiera anotaciones. Al combinarla con <rt> y <rp>, garantizas que tu contenido sea accesible y visualmente coherente en todos los navegadores. ¡Úsala para enriquecer tus proyectos multilingües!