Tag HTML <rt>
Il tag <rt> aggiunge annotazioni sopra e sotto il testo inserito nell'elemento <ruby>.
Il tag <rt> contiene l'annotazione — lettura, pronuncia o traduzione — all'interno di un elemento <ruby>. L'elemento <ruby> abbina una porzione di testo base a una o più annotazioni <rt>, una tecnica usata per mostrare la pronuncia dei caratteri dell'Asia orientale (furigana giapponese, pinyin cinese, coreano) o, più in generale, qualsiasi piccola nota esplicativa stampata accanto al testo.
Per impostazione predefinita, il browser visualizza il contenuto di <rt> in caratteri piccoli sopra il testo base. Il testo base è tutto ciò che si trova all'interno di <ruby> che non è racchiuso in <rt>.
Il tag <rt> è uno degli elementi HTML5.
Come funziona <rt> all'interno di <ruby>
Un'annotazione ruby è composta da due parti: il testo base e l'annotazione. L'annotazione va in <rt>; il testo base viene lasciato senza tag.
<ruby>漢字<rt>かんじ</rt></ruby>Qui 漢字 è il testo base e かんじ è la lettura mostrata sopra di esso. È possibile annotare ogni carattere separatamente in modo che ogni lettura si trovi sopra il proprio carattere:
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>Il pattern moderno con il fallback <rp>
Alcuni browser (e la maggior parte dei contesti in testo semplice, lettori di schermo o operazioni di copia-incolla) non sono in grado di visualizzare le annotazioni ruby. Il tag <rp> ("ruby parenthesis") fornisce parentesi di fallback mostrate solo quando il rendering ruby non è disponibile. I browser che supportano ruby nascondono il contenuto di <rp>.
Questo è il pattern canonico e raccomandato:
<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>- In un browser con supporto ruby, questo visualizza
かんじsopra漢字, e le parentesi sono nascoste. - In un contesto di fallback, degrada elegantemente al testo leggibile
漢字(かんじ).
Racchiudi sempre ogni <rt> in una coppia di elementi <rp> quando desideri un fallback robusto.
Esempio completo
Tag HTML <rt>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<ruby>
漢<rp>(</rp><rt>かん</rt><rp>)</rp>
字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
</body>
</html>Risultato
Sintassi e omissione del tag
Il tag <rt> viene usato in coppie, ma il tag di chiusura può essere omesso quando <rt> è immediatamente seguito da un altro <rt> o da un elemento <rp>, oppure quando non rimane alcun contenuto nell'elemento padre <ruby>.
Nota su <rb> e <rtc>
È possibile trovare tutorial più datati che usano <rb> (ruby base) e <rtc> (ruby text container) per annotazioni complesse a più livelli. Questi elementi sono stati rimossi dallo standard HTML e sono obsoleti. Il loro supporto nei browser è inconsistente e non dovrebbero essere utilizzati nel nuovo codice.
Per il testo base, è sufficiente lasciarlo senza tag all'interno di <ruby> invece di racchiuderlo in <rb>. Attenersi al pattern moderno <ruby> + <rt> (+ <rp>) mostrato sopra.
Posizionamento dell'annotazione con CSS
La proprietà CSS ruby-position controlla dove appare l'annotazione <rt> rispetto al testo base — over (sopra, il valore predefinito per la maggior parte degli script), under (sotto) o inter-character. Ad esempio:
ruby {
ruby-position: under;
}Questo sposta la lettura sotto i caratteri base, che è la convenzione per alcune lingue. ruby-position è supportato da tutti i principali browser moderni.
Supporto browser
Le annotazioni ruby (<ruby>, <rt> e <rp>) sono supportate da tutti i browser moderni, tra cui Chrome, Edge, Firefox e Safari.
Attributi
Il tag <rt> supporta gli Attributi Globali e gli Attributi degli Eventi.