Caracteres ruby

Los caracteres ruby son pequeñas anotaciones colocadas encima o al lado de un carácter cuando se escriben lenguajes ideogramáticos como el japonés o el chino. Su uso más común es servir como guía de pronunciación para ideogramas poco conocidos.

Ejemplos:

La mejor forma de ver su uso es con ejemplos

Ruby simple:

Aquí veremos como poner una anotación sobre un acrónimo:

En caracteres ruby: WWWWorld Wide Web Y en imagen:

Este es el código introducido:

<ruby><rb>WWW</rb><rt>World Wide Web</rt></ruby>

En el caso más simple, las marcas ruby definen un elemento ruby qeu contiene un elemento rb para el texto base y un elemento rt para el texto ruby.

Ruby simple con paréntesis:

En el siguiente ejemplo vemos como se mostrar caracteres ruby japoneses (llamados furigana) sobre el kanji de la palabra Tengu con ruby simple:

En caracteres ruby: 天てん狗ぐ Y en imagen:

Este es el código introducido:

<ruby><rb>天</rb><rp>(</rp><rt>てん</rt><rp>)</rp></ruby>
<ruby><rb>狗</rb><rp>(</rp><rt>ぐ</rt><rp>)</rp></ruby>

El elmento rp significa ruby paréntesis. El elemento rp y los paréntesis (u otros caracteres) dentro de ellos se utiliza para mostrar el texto anterior de esta forma en un navegador no preparado para ver ruby: 天(てん)狗(ぐ).

Ruby complejo:

Un ejemplo de una fecha adornada con ruby complejo:

En caracteres ruby: 05Abril1955DíaMesAñoAkira Toriyama Y en imagen:

Este es el código introducido

<ruby>
  <rbc>
    <rb>05</rb>
    <rb>Abril</rb>
    <rb>1955</rb>
  </rbc>
  <rtc>
    <rt>Día</rt>
    <rt>Mes</rt>
    <rt>Año</rt>
  </rtc>
  <rtc>
    <rt rbspan="3">Akira Toriyama</rt>
  </rtc>
</ruby>

Esta especificación define contenedores de elementos. El contenedor rbc será el de elementos rb. Puede haber uno o dos contenedores de texto ruby, rtc, que contienen elementos rt. Esto permite asociar dos contenedores de texto ruby con el mismo texto base. Con el ruby complejo también es posible asociar partes del texto base con partes del texto ruby usando varios elementos rb que se correspondan con varios elementos rt. Además, el elemento rt puede usar el atributo rbspan para indicar que se asocia a varios elementos rb. Es similar al atributo colspan y los elementos tr y td en las tablas.

Compatibilidad con navegadores

Actualmente el uso de estas etiquetas pertencientes a la especificación de XHTML 1.1 no está muy extendida, pero navegadores como Firefox con la extensión XHTML Ruby Support podemos obtener el beneficio que estas etiquetas aportan.

Compatibilidad mediante CSS

Otra forma de proporcionar a nuestros lectores el beneficio de estas etiquetas antes de que los navegadores estén preparados de forma nativa es el uso de CSS en nuestras páginas web. Añadiendo las siguientes líneas al CSS de nuestras webs podremos conseguir un efecto similar y más compatible.

 
/* ruby support */
ruby
{
  display: inline-table;
  text-align: center;
  white-space: nowrap;
  text-indent: 0;
  margin: 0;
  vertical-align: -20%;
}
 
/* ルビベース */
ruby > rb, ruby > rbc
{
  display: table-row-group;
  line-height: 90%;
}
 
/* 前側ルビテキスト */
ruby > rt, ruby > rbc + rtc
{
  display: table-header-group;
  font-size: 60%;
  line-height: 40%;
  letter-spacing: 0;
}
 
/* 後側ルビテキスト */
ruby > rbc + rtc + rtc
{
  display: table-footer-group;
  font-size: 60%;
  line-height: 40%;
  letter-spacing: 0;
}
 
/* 複雑ルビテキスト */
rbc > rb, rtc > rt
{
  display: table-cell;
  letter-spacing: 0;
}
 
/* rt[rbspan] should be transformed into td[colspan] but that requires xslt */
rtc > rt[rbspan] { display: table-caption; }
 
/* ルビ括弧 */
rp { display: none; }