Elemento rt
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.
Tabla de contenidos
Descripción
El elemento rt
provee una anotación ruby para todo el texto no anotado que lo precede dentro del elemento ruby
en el cual se encuentra. El elemento rt
es habitualmente acompañado por el elemento rp
, el cual provee los medios para ocultar información utilizada para mejorar la legibilidad en navegadores que no soportan estos elementos. Los contenidos del elemento rp
son invisibles en navegadores que soportan anotaciones ruby.
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 muestra un análisis gramatical básico de una oración. Dentro de cada elemento ruby
solo una anotación es declarada. Recuerda que los elementos rt
proveen anotaciones para los caracteres precedentes que no se encuentran ya anotados.
El elemento rp
Se utiliza junto a rt
para mejorar la legibilidad en los navegadores que no proveen soporte.
<p>El <ruby>libro<rp> (</rp><rt>Sustantivo</rt><rp>)</rp></ruby> <ruby>está<rp> (</rp><rt>Verbo</rt><rp>)</rp></ruby> sobre la <ruby>mesa<rp> (</rp><rt>Sustantivo</rt><rp>)</rp></ruby>.</p>
El libro está sobre la mesa.
El segundo ejemplo contiene a la palabra "Tokio" escrita en japonés. Esta vez dos anotaciones están presentes en un elemento ruby
, ambas brindando una ayuda fonética con símbolos hiragana para cada carácter (kanji). Este tipo de anotaciones contituye 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>
東京
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.