Las anotaciones Ruby son pequeñas porciones de texto que se representan encima, debajo o al lado del texto base, es decir, se trata de anotaciones circundantes a un texto. Estas anotaciones se crean con el elemento <ruby> y se utilizan, en general, para mostrar la pronunciación de tipografías asiáticas, aunque se pueden usar en cualquier tipo de anotación.
Junto con el elemento <ruby> se usan otros dos elementos: <rt>, para proveer las anotaciones que se mostrarán alrededor del texto base, y <rp> para insertar caracteres ocultos (normalmente paréntesis) que se mostrarán en caso de que el navegador web no tenga soporte para las anotaciones Ruby.
Lista de elementos para anotaciones Ruby descritos en este artículo:
| Elemento | Descripción |
|---|---|
<ruby> | Texto Ruby (anotaciones circundantes) |
<rt> | Definición de anotación Ruby |
<rp> | Respaldo de soporte en anotaciones Ruby |
Crear anotaciones Ruby
Las anotaciones Ruby se crean con el elemento <ruby>. Se trata de un elemento con dos etiquetas: <ruby> (de apertura) y </ruby> (de cierre). Dentro de estas etiquetas se añade el texto base al que se le quiere hacer una anotación.
La anotación se realiza con el elemento <rt> y se representará en un tamaño más pequeño que el texto base. Este elemento también tiene dos etiquetas para indiciar el inicio y el fin de la anotación.
Ejemplo de anotación Ruby:
<ruby>
Texto base
<rt>Anotación</rt>
</ruby>
El código superior generará el ejemplo siguiente:
Texto base
Tal y como se puede observar en este ejemplo, el texto «Anotación» aparece justo encima del «Texto base». Si el navegador no tuviese soporte para este tipo de anotaciones, la anotación se vería a continuación del texto base; así:
Texto base Anotación
Al no haber un carácter separador, el texto es confuso y no se entiende. Se puede usar el elemento <rp> para que muestre el texto «Anotación» entre paréntesis, que sólo se mostrará cuando el navegador no tenga soporte Ruby:
<ruby>
Texto base
<rp>(</rp>
<rt>Anotación</rt>
<rp>)</rp>
</ruby>
Para nuestro navegador web, que sí tiene soporte, este ejemplo se verá de la misma manera. Pero para un navegador web sin soporte, se verá así:
Texto base (Anotación)
Otros ejemplos
Ejemplo 1
En el ejemplo siguiente se le da un uso típico para tipografías asiáticas:
<ruby>
漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
Resultado del ejemplo 1:
漢 字
Ejemplo 2
En este ejemplo se explica que el código hexadecimal es el color verde:
<ruby>
#00FF00
<rp>(</rp>
<rt>Verde</rt>
<rp>)</rp>
</ruby>
Resultado del ejemplo 2:
#00FF00
Ejemplo 3
En el último ejemplo se describe una fase lunar:
<ruby>
🌓
<rp>(</rp>
<rt>Cuarto creciente</rt>
<rp>)</rp>
</ruby>
Resultado del ejemplo 3:
🌓
Tal y como se puede deducir de estos ejemplos, son muchos los usos posibles de las anotaciones Ruby, más allá de las tipografías de Asia. Lo importante es tener claro que el soporte provisto por los navegadores web es incompleto, y que quizá sería buena idea recurrir a técnicas de diseño CSS para garantizar una representación que funcione en cualquier navegador.
