L'elemento HTML <ruby> è un potente strumento per migliorare la presentazione del testo, in particolare per le lingue dell'Asia orientale. Questo elemento ti consente di visualizzare annotazioni fonetiche o altre informazioni supplementari sopra o accanto al testo di base. A partire da Chrome 128, l'annotazione rubino potrà essere interrotta da interruzioni di riga e potrai applicare uno stile al testo in rosso con la proprietà CSS ruby-align.
Un elemento <ruby> è composto da due parti principali: ruby base, che è il testo principale, e ruby text, che è il testo dell'annotazione, sottoposto a markup con l'elemento <rt>. Il testo di Ruby può essere visualizzato sopra o sotto la base rubino, come mostrato negli esempi seguenti.
<ruby>
絵文字
<rt>emoji</rt>
</ruby>
<ruby style="ruby-position: under;">
강남대로
<rt>江南大路</rt>
</ruby>
Perché si chiama rubino?
Quando i libri venivano digitati utilizzando tipi mobili, le dimensioni di questi tipi di elementi mobili venivano definite nei nomi in punti come Perl e Diamante. Il rubino è stato usato nel sistema britannico per fare riferimento alla dimensione di 5,5 punti. Le stampanti giapponesi usavano una dimensione simile a Ruby (5,5 punti) per il testo delle annotazioni e quindi nelle stampe hanno iniziato a fare riferimento al testo dell'annotazione stessa come Ruby (o Rubi foneticamente). Quando il testo dell'annotazione è stato incluso nel codice HTML, l'elemento è stato definito come <ruby>. Pica (pc) è un altro nome storico di dimensioni in punti utilizzato in CSS come unità di dimensione del carattere.
Rubino infrangebile
In precedenza, se una base di rubino o un testo di rubino era più lungo di una linea intera, questi venivano avvolti individualmente creando sfide di layout. Per ovviare a questo problema, gli sviluppatori web spesso eseguono il markup di una parte di testo utilizzando più tag Ruby. Grazie al rubino con interruzioni di riga, puoi saltare la creazione di questo markup.
Nell'esempio seguente, il pinyin (romanizzazione del cinese) viene aggiunto come insieme di annotazioni in rubino sulla poesia classica cinese. Gli attuali risultati del rendering vengono visualizzati all'interno dell'area di testo dell'annotazione in rosso.
Rendering da Chrome 128 con il rubino infrangebile che posiziona il testo dell'annotazione in rubino con il testo a capo sul testo di base a capo per ottenere un rendering ideale del testo.
In un altro esempio tratto dalla letteratura giapponese, l'interruzione di riga avviene prima dell'elemento lungo rubino, creando uno spazio vuoto nella prima riga.
Nel caso del rubino infrangibile, l'interruzione di riga viene inserita nel mezzo di un lungo elemento rubino per ottenere un layout ideale.
Questa funzionalità non interrompe il testo breve in rubino con meno di quattro caratteri di base e meno di otto caratteri di annotazione.
Quando un elemento <ruby> è nidificato all'interno di un altro elemento <ruby>, l'elemento <ruby> interno non si interrompe di riga.
Poiché questo modifica il comportamento delle pagine web correnti utilizzando testo rubino lungo, se devi disattivare questo comportamento di interruzione di riga, l'applicazione di white-space:nowrap disattiva l'interruzione di riga all'interno dell'elemento target come di consueto.
La proprietà CSS ruby-align
La nuova proprietà CSS ruby-align è disponibile anche da Chrome 128. La proprietà accetta uno dei valori della parola chiave space-around, space-between, start e center e controlla l'allineamento del testo di base rosso e del testo dell'annotazione in rosso.
