Etiqueta HTML <ruby>
La etiqueta <ruby> define anotaciones fonéticas en japonés y lenguas asiáticas orientales. Descripción, atributos y ejemplos de uso.
La etiqueta HTML <ruby> define una anotación ruby — un fragmento de texto pequeño que se muestra junto a (generalmente encima de) un texto base para indicar su pronunciación o significado. Las anotaciones ruby son más comunes en la tipografía de Asia Oriental: por ejemplo, mostrar la lectura fonética de un carácter chino o japonés para que un lector que no conoce el carácter pueda pronunciarlo igualmente.
La etiqueta <ruby> es uno de los elementos HTML5.
Cómo funcionan juntos <ruby>, <rt> y <rp>
Una anotación ruby se construye a partir de un pequeño grupo de elementos que actúan como una unidad:
<ruby>es el contenedor. El texto base (los caracteres que se anotan) va directamente dentro de él.<rt>(ruby text) contiene la anotación — la lectura o nota que se muestra sobre el texto base.<rp>(ruby parenthesis) es un recurso alternativo opcional. Los navegadores modernos ocultan su contenido, pero los navegadores que no admiten ruby lo muestran en su lugar, encerrando la anotación entre paréntesis para que la página siga siendo legible.
Así, una anotación completa tiene el siguiente aspecto:
<ruby>base<rp>(</rp><rt>reading</rt><rp>)</rp></ruby>Un navegador compatible muestra reading apilado sobre base. Un navegador no compatible recurre a la forma en línea base(reading), razón por la que los paréntesis <rp> son importantes — sin ellos, la anotación quedaría pegada al texto base como basereading.
Nota: Puede que veas ejemplos más antiguos que envuelven el texto base en un elemento
<rb>(ruby base).<rb>está obsoleto — el HTML moderno coloca el texto base directamente dentro de<ruby>sin ningún contenedor. No lo añadas a las marcas nuevas.
Sintaxis
La etiqueta <ruby> va en pares. El texto base y sus anotaciones <rt>/<rp> se escriben entre las etiquetas de apertura (<ruby>) y de cierre (</ruby>).
Ejemplo: furigana en japonés
En japonés, el furigana son pequeños caracteres hiragana impresos sobre los kanji para mostrar cómo se lee el kanji. El elemento <ruby> es la forma estándar de marcar el furigana en la web. Aquí el kanji 明日 (que significa "mañana") se anota con su lectura Ashita:
Etiqueta HTML <ruby>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ruby>
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>
</body>
</html>Resultado
Anotación de cada carácter por separado
Puedes colocar varios pares carácter base/<rt> dentro de un mismo elemento <ruby>. Cada carácter base se anota entonces con su propia lectura, y las lecturas quedan alineadas sobre los caracteres correspondientes:
<ruby>
漢 <rt>kan</rt>
字 <rt>ji</rt>
</ruby>Esto resulta útil cuando una palabra de varios caracteres se lee de forma diferente por carácter. La misma estructura funciona para el pinyin chino (pronunciación en letras latinas, p. ej. 北京 con Běi / jīng) y para el bopomofo / zhuyin, donde los símbolos fonéticos se colocan junto a los caracteres base.
Estilos ruby con CSS
La etiqueta <ruby> admite los Atributos Globales y los Atributos de Evento. No tiene atributos propios del elemento — la apariencia se controla con CSS.
Puedes colorear el texto base y el texto de anotación de forma independiente apuntando a los selectores ruby y rt:
ruby {
color: blue;
}
rt {
color: red;
}Existen dos propiedades CSS específicas para la disposición ruby:
ruby-positioncontrola dónde se sitúa la anotación respecto al texto base. Los valores más comunes sonover(encima del texto base — el valor predeterminado para la mayoría de los sistemas de escritura),under(debajo, a veces usado para el bopomofo o para mantener la altura de línea ordenada) yalternate.ruby-aligncontrola cómo se distribuyen la anotación y el texto base cuando difieren en longitud, por ejemplostart,centerospace-between.
ruby {
ruby-position: under;
ruby-align: center;
}Compatibilidad con navegadores: Los elementos
<ruby>,<rt>y<rp>están bien soportados en todos los navegadores modernos. La propiedadruby-positiontambién cuenta con amplio soporte, mientras queruby-aligntiene un soporte más limitado — pruébala antes de depender de ella, y mantén el recurso alternativo<rp>para que el significado se conserve incluso donde el estilo ruby sea incompleto.