Tag HTML <ruby>
Il tag <ruby> definisce note fonetiche per le lingue giapponesi e dell'Asia orientale. Descrizione, attributi ed esempi.
Il tag HTML <ruby> definisce un'annotazione ruby — un breve testo visualizzato accanto (di solito sopra) al testo base per mostrarne la pronuncia o il significato. Le annotazioni ruby sono molto comuni nella tipografia dell'Asia orientale: ad esempio, mostrano la lettura fonetica di un carattere cinese o giapponese, così un lettore che non conosce il carattere può comunque pronunciarlo.
Il tag <ruby> è uno degli elementi HTML5.
Come funzionano insieme <ruby>, <rt> e <rp>
Un'annotazione ruby è costruita da un piccolo gruppo di elementi che agiscono come un'unità singola:
<ruby>è il contenitore. Il testo base (i caratteri annotati) va direttamente al suo interno.<rt>(ruby text) contiene l'annotazione — la lettura o la nota mostrata sopra il testo base.<rp>(ruby parenthesis) è un fallback opzionale. I browser moderni nascondono il suo contenuto, ma i browser che non supportano ruby lo mostrano al suo posto, racchiudendo l'annotazione tra parentesi in modo che la pagina risulti comunque leggibile.
Una annotazione completa ha quindi questo aspetto:
<ruby>base<rp>(</rp><rt>reading</rt><rp>)</rp></ruby>Un browser con supporto ruby visualizza reading sovrapposto a base. Un browser senza supporto ricade nella forma inline base(reading), motivo per cui le parentesi <rp> sono importanti — senza di esse l'annotazione si attaccherebbe direttamente al testo base come basereading.
Nota: Potresti trovare esempi più vecchi che racchiudono il testo base in un elemento
<rb>(ruby base).<rb>è obsoleto — l'HTML moderno inserisce il testo base direttamente all'interno di<ruby>senza alcun wrapper. Non aggiungerlo al nuovo markup.
Sintassi
Il tag <ruby> si usa in coppie. Il testo base e le relative annotazioni <rt>/<rp> si scrivono tra il tag di apertura (<ruby>) e quello di chiusura (</ruby>).
Esempio: furigana giapponese
In giapponese, i furigana sono piccoli caratteri hiragana stampati sopra i kanji per indicare come vengono letti. L'elemento <ruby> è il metodo standard per contrassegnare i furigana sul web. Qui il kanji 明日 (che significa "domani") è annotato con la sua lettura Ashita:
Tag HTML <ruby>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ruby>
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>
</body>
</html>Risultato
Annotare ogni carattere separatamente
È possibile inserire più coppie carattere-base/<rt> all'interno di un unico elemento <ruby>. Ogni carattere base viene così annotato con la propria lettura, e le letture si allineano sopra i caratteri corretti:
<ruby>
漢 <rt>kan</rt>
字 <rt>ji</rt>
</ruby>Questo è utile quando una parola con più caratteri si legge in modo diverso per ciascun carattere. La stessa struttura funziona per il pinyin cinese (pronuncia con lettere latine, ad es. 北京 con Běi / jīng) e per il bopomofo / zhuyin, dove i simboli fonetici vengono posizionati accanto ai caratteri base.
Stile ruby con CSS
Il tag <ruby> supporta gli Attributi globali e gli Attributi di evento. Non ha attributi specifici dell'elemento — l'aspetto è controllato tramite CSS.
È possibile colorare il testo base e quello dell'annotazione in modo indipendente, usando i selettori ruby e rt:
ruby {
color: blue;
}
rt {
color: red;
}Due proprietà CSS sono specifiche del layout ruby:
ruby-positioncontrolla dove si trova l'annotazione rispetto al testo base. I valori comuni sonoover(sopra il testo base — l'impostazione predefinita per la maggior parte degli script),under(sotto, talvolta usato per il bopomofo o per mantenere uniforme l'altezza della riga), ealternate.ruby-aligncontrolla come l'annotazione e il testo base vengono distribuiti quando differiscono in lunghezza, ad esempiostart,centerospace-between.
ruby {
ruby-position: under;
ruby-align: center;
}Supporto browser: Gli elementi
<ruby>,<rt>e<rp>sono ben supportati da tutti i browser moderni. La proprietàruby-positionè anch'essa ampiamente supportata, mentreruby-alignha un supporto più limitato — verificane la compatibilità prima di utilizzarla, e mantieni il fallback<rp>affinché il significato rimanga comprensibile anche dove lo stile ruby è incompleto.