Elemento ruby

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento ruby provee los medios para aplicar anotaciones ruby a una línea de texto. Las anotaciones ruby son trozos cortos de texto que corren a la par del texto base y proveen algún tipo de ayuda para procesarlo. Son mayormente utilizadas en la tipografía asiática, pero pueden ser útiles para cualquier tipo de anotaciones.

El texto con anotaciones ruby se encuentra dentro del elemento ruby, mientras que rt provee las anotaciones para todos los caracteres no anotados que se encuentran a su izquierda. Por su parte, el elemento rp provee los medios para ocultar información adicional utilizada para mejorar la lectura en navegadores que no soportan las anotaciones. El texto dentro del elemento ruby se muestra como una sola línea de texto en navegadores que no lo soportan, por lo que puede ser razonable proveer, por ejemplo, paréntesis (ocultos dentro del elemento rp) para encerrar las anotaciones.

Un elemento rt provee anotaciones para todos los caracteres ubicados a su izquierda que todavía no han sido anotados.

El soporte provisto por los navegadores para los elementos ruby (ruby, rt y rp) es incompleto. Los autores pueden tener que recurrir a técnicas de estilo (CSS) para lograr que las anotaciones ruby funcionen consistentemente.

Las anotaciones ruby son habitualmente mostradas con un tamaño de fuente menor y por encima del texto base. Para una mejor comprensión de cómo funcionan las cosas, en los navegadores que soportan al elemento y en los que no, echaremos un vistazo al siguiente código y a su representación aproximada en ambos casos. Los paréntesis son provistos dentro del elemento rp para ayudar a los navegadores que no proveen soporte.

Así es como una anotación debería verse en los navegadores que la soportan. Nota como todo el texto dentro de los elementos rp es completamente ignorado.

<ruby>Texto base<rp> (</rp><rt>Anotación</rt><rp>)</rp></ruby>

Anotación

Texto base

Ahora, así es como un navegador sin soporte mostraría el texto, ignorando todos los elementos y simplemente mostrando la información como una sola línea de texto.

<ruby>Texto base<rp> (</rp><rt>Anotación</rt><rp>)</rp></ruby>

Texto base (Anotación)

Nota: recuerda que éstas son solamente emulaciones logradas con otros elementos soportados y estilos básicos de CSS.

Ejemplos

El primer ejemplo contiene la palabra "Tokio" escrita en japonés. Las anotaciones son provistas en hiragana para cada carácter (kanji), y sirven como una ayuda fonética para el lector. Este tipo de anotaciones es uno de los usos más comunes para estos elementos.

<p><ruby><rp>(</rp><rt>とう</rt><rp>)</rp><rp>(</rp><rt>きょう</rt><rp>)</rp></ruby></p>

(とう)(きょう)

Nuestro segundo ejemplo, muestra otro tipo de anotaciones. En este caso, los símbolos de un mazo de cartas de póker son anotados para proveer sus nombres y mejorar la comprensión.

<p>Los cuatro símbolos en el mazo de cartas de póker con <ruby><rp> (</rp><rt>corazón</rt><rp>)</rp></ruby>, <ruby><rp> (</rp><rt>pica</rt><rp>)</rp></ruby>, <ruby><rp> (</rp><rt>trébol</rt><rp>)</rp></ruby> and <ruby><rp> (</rp><rt>diamante</rt><rp>)</rp></ruby>.</p>

Los cuatro símbolos en el mazo de cartas de póker con (corazón), (pica), (trébol) and (diamante).

El tercer ejemplo muestra un texto clásico, donde algunas palabras poco comunes o antiguas son anotadas con sinónimos para ayudar a los lectores a comprender su significado fácilmente.

<p>...y, así, se dio luego orden como velase las armas en un corral grande que a un lado de la venta estaba, y recogiéndolas don Quijote todas, las puso sobre <ruby>una pila que junto a un pozo estaba<rp> (</rp><rt>pila del abrevadero, pila bautismal</rt><rp>)</rp></ruby> y, <ruby>embrazando su adarga<rp> (</rp><rt>metiendo el brazo por el asa de su escudo</rt><rp>)</rp></ruby>, asió de su lanza y con <ruby>gentil continente<rp> (</rp><rt>elegante apostura</rt><rp>)</rp></ruby>, se comenzó a pasear delante de la pila; y cuando comenzó el paseo comenzaba a cerrar la noche.</p>

...y, así, se dio luego orden como velase las armas en un corral grande que a un lado de la venta estaba, y recogiéndolas don Quijote todas, las puso sobre una pila que junto a un pozo estaba (pila del abrevadero, pila bautismal) y, embrazando su adarga (metiendo el brazo por el asa de su escudo), asió de su lanza y con gentil continente (elegante apostura), se comenzó a pasear delante de la pila; y cuando comenzó el paseo comenzaba a cerrar la noche.

El cuarto y último ejemplo muestra una anotación en la cual se indican, además, los idiomas del texto anotado y la anotación.

<p>Hola a todos! Estoy al fin en <ruby lang="jp">東京<rt lang="es">Tokyo</rt></ruby>!</p>

Hola a todos! Estoy al fin en 東京Tokyo!

Atributos

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.