Etiqueta ruby en HTML
¿Qué es la etiqueta <ruby> en HTML?
La etiqueta HTML <ruby> es una etiqueta de formato de texto que se utiliza para anotar texto con una pronunciación o explicación en otro idioma. La etiqueta <ruby> define el contenido que se mostrará como el texto anotado y la pronunciación o explicación del mismo.
La etiqueta <ruby> se compone de dos partes principales: el texto anotado y la pronunciación o explicación. El texto anotado se define dentro de la etiqueta <ruby>, mientras que la pronunciación o explicación se define dentro de la etiqueta <rt>.
Ejemplo de uso
La estructura básica de la etiqueta “ruby” se ve así:
<ruby>
caracter base <rt>anotación</rt>
</ruby>
Lenguaje del código: HTML, XML (xml)En este ejemplo, el carácter base se encuentra dentro de la etiqueta “ruby” y la anotación se encuentra dentro de la etiqueta “rt” (ruby text).
Además de “rt”, también se pueden utilizar otras etiquetas “ruby” como “rb” (ruby base) y “rp” (ruby parenthesis) para indicar el carácter base y los paréntesis que rodean la anotación, respectivamente. Por ejemplo:
<ruby>
<rb>漢</rb><rp>(</rp><rt>kan</rt><rp>)</rp>字
</ruby>
Lenguaje del código: HTML, XML (xml)En este ejemplo, la etiqueta “rb” se utiliza para indicar el carácter base “漢” y las etiquetas “rp” se utilizan para indicar los paréntesis que rodean la anotación “kan” que se encuentra dentro de la etiqueta “rt”.
Atributos
La etiqueta HTML <ruby> no admite ningún atributo propio, su única función es proporcionar una forma de definir anotaciones ruby en idiomas asiáticos utilizando las etiquetas <rb> y <rt>.
Pero se pueden usar atributos universales como “class” y “id” para aplicar estilos CSS y para enlazar con scripts.
Más ejemplos
Aquí te presento tres ejemplos de cómo se puede utilizar la etiqueta <ruby> en HTML5 para definir anotaciones ruby en idiomas asiáticos como el chino, japonés y coreano:
Ejemplo 1: Anotación ruby en chino utilizando la etiqueta <ruby>
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta ruby</title>
</head>
<body>
<p>El siguiente texto utiliza anotación ruby para indicar la pronunciación de la palabra china "zhōngguó": <ruby><rb>中国</rb><rt>zhōng guó</rt></ruby>.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <ruby> para indicar una anotación ruby en el texto chino. Hemos utilizado la etiqueta <rb> para especificar el carácter principal (“中国”) y la etiqueta <rt> para especificar su texto de apoyo correspondiente (“zhōng guó”).
El texto de apoyo se muestra encima del carácter principal y en un tamaño de fuente más pequeño.
Ejemplo 2: Anotación ruby en japonés utilizando la etiqueta <ruby>
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta ruby</title>
</head>
<body>
<p>El siguiente texto utiliza anotación ruby para indicar la pronunciación de la palabra japonesa "sakura": <ruby><rb>桜</rb><rt>さくら</rt></ruby>.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <ruby> para indicar una anotación ruby en el texto japonés. Hemos utilizado la etiqueta <rb> para especificar el carácter principal (“桜”) y la etiqueta <rt> para especificar su texto de apoyo correspondiente (“さくら”).
El texto de apoyo se muestra encima del carácter principal y en un tamaño de fuente más pequeño.
Ejemplo 3: Anotación ruby en coreano utilizando la etiqueta <ruby>
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta ruby</title>
</head>
<body>
<p>El siguiente texto utiliza anotación ruby para indicar la pronunciación de la palabra coreana "hangeul": <ruby><rb>한글</rb><rt>han-geul</rt></ruby>.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <ruby> para indicar una anotación ruby en el texto coreano. Hemos utilizado la etiqueta <rb> para especificar el carácter principal (“한글”) y la etiqueta <rt> para especificar su texto de apoyo correspondiente (“han-geul”).
El texto de apoyo se muestra encima del carácter principal y en un tamaño de fuente más pequeño.