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.