W3docs

Tag HTML <rtc>

L'elemento HTML <rtc> è obsoleto e rimosso dalla specifica. Scopri perché e il markup ruby moderno con <ruby>, <rt> e <rp>.

L'elemento HTML <rtc> (Ruby Text Container) raggruppava uno o più elementi <rt> per aggiungere un secondo livello di annotazioni — come una traduzione o una lettura alternativa — al testo base ruby all'interno di un contenitore <ruby>.

Importante: <rtc> è obsoleto. È stato rimosso dall'HTML Living Standard insieme agli elementi <rbc> e <rb>. I browser moderni non supportano più il modello "complex ruby" di cui faceva parte e potrebbero ignorare il tag o renderizzarlo in modo imprevedibile. Non usare <rtc> nelle nuove pagine. Questa pagina lo documenta a scopo storico e mostra di seguito la sostituzione moderna.

Perché è stato rimosso

<rtc> apparteneva a un modello ruby più vecchio e complesso che si basava anche su <rbc> (ruby base container) e <rb> (ruby base). Quel modello consentiva agli autori di sovrapporre due livelli di annotazioni — ad esempio una lettura fonetica e una traduzione — su una singola base. In pratica era implementato in modo incoerente tra i browser ed era difficile da usare, quindi la specifica è stata semplificata. Oggi gli elementi <ruby>, <rt> e <rp> (insieme a un po' di CSS) coprono i casi rilevanti.

La sostituzione moderna

Per il ruby standard dell'Asia orientale — un carattere base con una guida alla pronuncia sopra — bastano <ruby>, <rt> per l'annotazione e <rp> come fallback per i browser senza rendering ruby.

Esempio: ruby senza <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>

Le parentesi <rp> vengono nascoste dai browser che renderizzano ruby e mostrate come testo normale da quelli che non lo fanno — così 旧(jiù)金(jīn)山(shān) rimane leggibile ovunque.

Controllare ruby con CSS

Puoi regolare dove appare l'annotazione e come si allinea usando CSS invece di elementi contenitore aggiuntivi:

<!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>

Se hai davvero bisogno di un secondo livello di annotazioni (il caso d'uso per cui era pensato <rtc>), l'approccio più affidabile oggi è usare due elementi <ruby> sovrapposti o lo styling con ruby-position, poiché il modello complex-ruby non è più interoperabile.

Percorso di migrazione

Per aggiornare il markup legacy che usa <rtc>:

  1. Rimuovi il wrapper <rbc> e inserisci i caratteri base direttamente all'interno di <ruby>.
  2. Mantieni ogni <rt> immediatamente dopo la base che annota.
  3. Elimina il raggruppamento <rtc>; se lo usavi per un livello di traduzione, sposta quel testo in un elemento separato o in un secondo <ruby>.
  4. Aggiungi le parentesi di fallback <rp> per i browser senza supporto ruby.

Supporto nei browser

<rtc> è stato rimosso dalla specifica e non fa parte del supporto ruby moderno. Consideralo non supportato per qualsiasi nuovo lavoro. Gli elementi sostitutivi hanno un supporto solido:

ElementoSupporto
<ruby>Tutti i browser moderni
<rt>Tutti i browser moderni
<rp>Tutti i browser moderni
<rtc>Obsoleto — rimosso, non fare affidamento su di esso

Le proprietà CSS ruby-position e ruby-align sono supportate nelle versioni correnti di Chrome, Edge, Firefox e Safari (il comportamento dei vendor per alcune parole chiave di ruby-align varia ancora).

Elementi correlati

  • <ruby> — il contenitore dell'annotazione ruby
  • <rt> — il testo ruby (pronuncia/annotazione)
  • <rp> — parentesi di fallback per i browser senza supporto ruby

<rtc> supportava in precedenza gli Attributi Globali e gli Attributi di Evento.

Esercitazione

Pratica
Qual è lo stato attuale dell'elemento HTML rtc?
Qual è lo stato attuale dell'elemento HTML rtc?
Was this page helpful?