El elemento HTML <ruby> es una herramienta eficaz para mejorar la presentación de texto, especialmente en el caso de los idiomas de Asia Oriental. Este elemento te permite mostrar anotaciones fonéticas u otra información complementaria encima o al lado del texto base. A partir de Chrome 128, la anotación rubí se podrá romper de líneas, y puedes aplicar diseño al texto rubí con la propiedad ruby-align de CSS.
Un elemento <ruby> consta de dos partes principales: base rubí, que es el texto principal, y texto rubí, que es el texto de la anotación, marcado con el elemento <rt>. El texto de rubí se puede mostrar sobre o debajo de la base de rubí, como se muestra en los siguientes ejemplos.
<ruby>
絵文字
<rt>emoji</rt>
</ruby>
<ruby style="ruby-position: under;">
강남대로
<rt>江南大路</rt>
</ruby>
¿Por qué se llama rubí?
Cuando los libros se creaban con tipos móviles, los tamaños de estos tipos móviles se definían en nombres de punto, como Perl y Diamante. Ruby se utilizó en el sistema británico para referirse al tamaño de 5.5 puntos. Las impresoras japonesas utilizaban un tamaño similar a Ruby (5.5 puntos) para el texto de las anotaciones y, por lo tanto, comenzaron a referirse al texto de la anotación en sí como Ruby (o fonéticamente rubí) en las impresiones. Cuando el texto de la anotación se incluyó en HTML, el elemento se definió como <ruby>. Pica (pc) es otro nombre histórico de tamaño de punto que se usa en CSS como unidad de tamaño de fuente.
rubí que se puede romper líneas
Anteriormente, si una base rubí o un texto rubí era más largo que una línea completa, se unían de forma individual para crear desafíos de diseño. Para solucionar este problema, los desarrolladores web suelen marcar un fragmento de texto con varias etiquetas rubí. Con el rubí que se puede romper líneas, puedes omitir la creación de este tipo de lenguaje de marcado.
En el siguiente ejemplo, se agregó pinyin (romanización del chino) como un conjunto de anotaciones rubí en la poesía china clásica. Los resultados de la renderización actual se ajustan al área de texto de la anotación rubí.
La renderización de Chrome 128 con rubí que se puede romper de líneas coloca el texto de anotación de rubí unido sobre el texto base ajustado, lo que logra una renderización ideal del texto.
En otro ejemplo de la literatura japonesa, el salto de línea se produce antes del elemento largo rubí, lo que crea un espacio en blanco en la primera línea.
Con el rubí que se puede romper líneas, el salto de línea se coloca en medio de un elemento largo de rubí para lograr un diseño ideal.
Esta función no romperá el texto rubí corto que tenga menos de cuatro caracteres base o igual a cuatro caracteres de anotación, así como menos de ocho caracteres de anotación.
Cuando un elemento <ruby> está anidado dentro de otro elemento <ruby>, el elemento <ruby> interno no tendrá saltos de línea.
Dado que esto cambia el comportamiento de las páginas web actuales que usan texto rubí largo, si necesitas inhabilitar este comportamiento de salto de línea, la aplicación de white-space:nowrap inhabilita el salto de línea dentro del elemento de destino como de costumbre.
La propiedad de CSS ruby-align
La nueva propiedad del CSS ruby-align también está disponible a partir de Chrome 128. La propiedad acepta uno de los valores de palabra clave space-around, space-between, start y center, y controla la alineación del texto base color rubí y el texto de la anotación en rubí.
