W3docs

Etiqueta HTML <rtc>

El elemento HTML <rtc> es obsoleto y fue eliminado de la especificación. Aprende por qué y el marcado ruby moderno con <ruby>, <rt> y <rp>.

El elemento HTML <rtc> (Ruby Text Container) agrupaba uno o más elementos <rt> para adjuntar una segunda capa de anotaciones — como una traducción o una lectura alternativa — al texto base ruby dentro de un contenedor <ruby>.

Importante: <rtc> es obsoleto. Fue eliminado del Estándar de Vida de HTML junto con los elementos <rbc> y <rb>. Los navegadores modernos ya no admiten el modelo de "ruby complejo" del que formaba parte y pueden ignorar la etiqueta o renderizarla de forma impredecible. No uses <rtc> en páginas nuevas. Esta página lo documenta como referencia histórica y muestra el reemplazo moderno a continuación.

Por qué fue eliminado

<rtc> pertenecía a un modelo de ruby más antiguo y complejo que también dependía de <rbc> (ruby base container) y <rb> (ruby base). Ese modelo permitía a los autores apilar dos capas de anotaciones — por ejemplo, una lectura fonética y una traducción — sobre una única base. En la práctica, su implementación era inconsistente entre navegadores y resultaba difícil de usar, por lo que la especificación fue simplificada. Hoy los elementos <ruby>, <rt> y <rp> (junto con algo de CSS) cubren los casos relevantes.

El reemplazo moderno

Para el ruby estándar de Asia Oriental — un carácter base con una guía de pronunciación encima — solo necesitas <ruby>, <rt> para la anotación y <rp> como alternativa para navegadores sin soporte de ruby.

Ejemplo: ruby sin <rtc>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <ruby>
      旧<rp>(</rp><rt>jiù</rt><rp>)</rp>
      金<rp>(</rp><rt>jīn</rt><rp>)</rp>
      山<rp>(</rp><rt>shān</rt><rp>)</rp>
    </ruby>
  </body>
</html>

Los paréntesis de <rp> están ocultos en los navegadores que renderizan ruby y se muestran como texto plano en los que no lo hacen — así 旧(jiù)金(jīn)山(shān) se mantiene legible en todos los entornos.

Controlar ruby con CSS

Puedes ajustar dónde aparece la anotación y cómo se alinea usando CSS en lugar de elementos contenedores adicionales:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ruby {
        ruby-position: over;   /* place reading above the base (under, inter-character, alternate also valid) */
        ruby-align: center;    /* distribute the annotation: start, center, space-between, space-around */
      }
    </style>
  </head>
  <body>
    <ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby>
  </body>
</html>

Si realmente necesitas una segunda capa de anotaciones (el caso de uso para el que estaba pensado <rtc>), el enfoque más fiable hoy en día es usar dos elementos <ruby> apilados o dar estilo con ruby-position, ya que el modelo de ruby complejo ya no es interoperable.

Ruta de migración

Para actualizar el marcado heredado que usa <rtc>:

  1. Elimina el contenedor <rbc> y coloca los caracteres base directamente dentro de <ruby>.
  2. Mantén cada <rt> inmediatamente después de la base que anota.
  3. Elimina la agrupación <rtc>; si la usabas para una capa de traducción, mueve ese texto a un elemento separado o a un segundo <ruby>.
  4. Añade paréntesis de respaldo <rp> para los navegadores sin ruby.

Soporte de navegadores

<rtc> ha sido eliminado de la especificación y no forma parte del soporte moderno de ruby. Trátalo como no compatible en trabajos nuevos. Los elementos de reemplazo tienen un soporte sólido:

ElementoSoporte
<ruby>Todos los navegadores modernos
<rt>Todos los navegadores modernos
<rp>Todos los navegadores modernos
<rtc>Obsoleto — eliminado, no depender de él

Las propiedades CSS ruby-position y ruby-align son compatibles con las versiones actuales de Chrome, Edge, Firefox y Safari (el comportamiento de algunas palabras clave de ruby-align aún varía entre proveedores).

Elementos relacionados

  • <ruby> — el contenedor de anotaciones ruby
  • <rt> — el texto ruby (pronunciación/anotación)
  • <rp> — paréntesis de respaldo para navegadores sin ruby

<rtc> anteriormente admitía los Atributos Globales y los Atributos de Evento.

Práctica

Práctica
¿Cuál es el estado correcto del elemento HTML rtc hoy en día?
¿Cuál es el estado correcto del elemento HTML rtc hoy en día?
Was this page helpful?