W3docs

Etiqueta HTML <rb>

Usa la etiqueta HTML <rb> para delimitar el texto base de las anotaciones <ruby> usadas en tipografía de Asia Oriental. Ver ejemplos.

El elemento HTML <rb> se utilizaba para delimitar el componente de texto base de una anotación <ruby> — los caracteres a los que se adjunta una guía de pronunciación.

Advertencia

Obsoleto — no uses <rb> en código nuevo. El elemento <rb> ha sido eliminado del estándar HTML, y la compatibilidad con los navegadores es poco fiable. No es necesario: en HTML moderno el texto base se coloca directamente dentro de <ruby>, sin ningún elemento contenedor. Esta página se conserva únicamente para ayudarte a reconocer y migrar el marcado heredado.

Qué son las anotaciones ruby

Una anotación ruby es una secuencia corta de texto que se presenta junto a un fragmento de texto base, utilizada típicamente en tipografía de Asia Oriental para mostrar la pronunciación (lectura) de los caracteres. La anotación se renderiza con una fuente más pequeña, generalmente encima o al lado de los caracteres base.

Una anotación ruby se construye con tres elementos modernos:

  • <ruby> — el contenedor de toda la anotación.
  • <rt> — el texto ruby: la propia pronunciación o anotación.
  • <rp>paréntesis ruby opcionales que solo muestran los navegadores que no pueden renderizar ruby, de modo que el texto se degrada a algo como 漢字 (kanji).

En el marcado antiguo, <rb> (y el también obsoleto <rtc>) envolvían el texto base. Hoy en día el texto base no necesita ningún contenedor.

El patrón moderno (usa este)

Coloca el texto base directamente dentro de <ruby>, y luego sigue cada segmento base con su <rt> correspondiente. Envuelve el contenido de <rt> en paréntesis <rp> para que la anotación siga siendo legible donde ruby no está soportado.

Ejemplo de una anotación ruby moderna (sin <rb>):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <ruby>
      漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
      字 <rp>(</rp><rt>ji</rt><rp>)</rp>
    </ruby>
  </body>
</html>

Resultado

Ejemplo de anotación ruby en HTML

Un navegador compatible con ruby renderiza kan encima de y ji encima de . Un navegador que no lo soporta muestra 漢 (kan) 字 (ji), gracias a los elementos <rp>.

Marcado heredado con <rb> (reconocer, no usar)

Es posible que encuentres documentos más antiguos que envuelven cada segmento base en <rb>. El ejemplo siguiente se muestra únicamente para que puedas reconocerlo — sustitúyelo por el patrón moderno anterior.

<!-- Legacy markup — DO NOT USE in new code -->
<ruby>
  <rb>漢</rb>
  <rb>字</rb>
  <rp>(</rp><rt>kan</rt><rt>ji</rt><rp>)</rp>
</ruby>

Para migrar, elimina las etiquetas <rb> y deja los caracteres base directamente dentro de <ruby>.

Compatibilidad con navegadores

<rb> no forma parte de la especificación HTML actual. Incluso donde los navegadores lo toleran, el comportamiento es inconsistente, por lo que no deberías depender de él. La combinación moderna <ruby> / <rt> / <rp> cuenta con un buen soporte en los navegadores actuales.

Etiquetas relacionadas

  • <ruby> — el contenedor de la anotación ruby.
  • <rt> — el texto ruby (de anotación).
  • <rp> — paréntesis de reserva para navegadores sin soporte.

Práctica

Práctica
¿Qué afirmaciones sobre la etiqueta obsoleta <rb> y las anotaciones ruby modernas son correctas?
¿Qué afirmaciones sobre la etiqueta obsoleta <rb> y las anotaciones ruby modernas son correctas?
Was this page helpful?