<ruby>El elemento <ruby> en HTML5 es utilizado para representar anotaciones ruby, las cuales son convenciones tipográficas comunes en Japón, China y otras culturas asiáticas que se usan para proporcionar una pronunciación o transliteración de ideogramas. Ruby es especialmente útil para clarificar el significado o la pronunciación de caracteres complejos o menos comunes.
<ruby>El elemento <ruby> como tal no posee atributos únicos reservados exclusivamente para él más allá de los globales que son comunes a todos los elementos HTML. Algunos de estos atributos globales incluyen:
Es importante notar que <ruby> casi siempre se utiliza en combinación con otros elementos específicos para completar su funcionalidad, como <rt> (ruby text) y <rp> (ruby parenthesis text).
<rt>: Representa el texto de anotación ruby. Este elemento define la pronunciación o transliteración del texto contenido en <ruby>.<rp>: Proporciona anotaciones entre paréntesis para navegadores que no soportan rutinas ruby. Generalmente se coloca antes y después del <rt> para asegurar compatibilidad.<ruby> en HTML5 con ejemplosVeamos un ejemplo sencillo donde se usa <ruby> para mostrar la lectura fonética de un carácter Kanji en japonés.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Anotación Ruby</title>
<style>
ruby {
font-size: 24px;
}
rt {
font-size: 14px;
color: red;
}
</style>
</head>
<body>
<p>Esta es una demostración de texto con anotación ruby:</p>
<p>
<ruby>
漢字 (Kanji)
<rt>かんじ</rt>
</ruby>
</p>
</body>
</html>En este ejemplo:
漢字 (Kanji) es el carácter que necesita anotación.<rt> se usa para mostrar la lectura fonética "かんじ" (kanji) encima o al lado del carácter basado en el estilo del navegador.<rp> para CompatibilidadAquí utilizamos <rp> para proporcionar paréntesis que aseguren la legibilidad en navegadores que no soportan anotaciones ruby.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Anotación Ruby</title>
</head>
<body>
<p>Esta es una demostración de texto con anotación ruby y soporte de compatibilidad:</p>
<p>
<ruby>
漢字 (Kanji)
<rp>(</rp>
<rt>かんじ</rt>
<rp>)</rp>
</ruby>
</p>
</body>
</html>En esta variación:
<rp> se coloca antes y después de <rt>. Si el navegador no soporta ruby, se mostrará el texto de <rt> entre paréntesis para mantener la claridad de la información, es decir, aparecerá como 漢字 (かんじ).Utilizando estos elementos conjuntamente, se puede garantizar que las anotaciones ruby sean accesibles y adecuadamente representadas en una variedad de contextos y navegadores.