ruby-align está disponible como línea de base

Mariko Kosaka

Fecha de publicación: 21 de febrero de 2025

El elemento <ruby> de HTML te permite mostrar anotaciones fonéticas o cualquier otra información complementaria sobre o junto al texto base. Se usa comúnmente en los idiomas del este de Asia.

Un elemento <ruby> consta de dos partes principales: la base de ruby, que es el texto principal, y el texto de ruby, que es el texto de la anotación, marcado con el elemento <rt>.


<ruby>
  絵文字
  <rt>emoji</rt>
</ruby>

Anotaciones en rubí en inglés &quot;Emoji&quot; sobre un texto en japonés.
Pronunciación en inglés como una anotación sobre el texto base en japonés.

ruby-align

La propiedad CSS ruby-align controla la alineación del texto base de ruby y el texto de la anotación de ruby. La propiedad acepta uno de los valores de palabra clave, space-around, space-between, start y center.

Anotaciones en pinyin sobre un texto chino.
Imagen que muestra el caso de uso de la propiedad ruby-align.