Ruby markup

I ruby markup (o annotazioni ruby o semplicemente ruby (ルビ^?, rubi)) sono brevi sequenze di testo affiancate al testo base, tipicamente utilizzate nei documenti dell'Asia orientale per indicare la trascrizione fonetica di parole cinesi (pinyin) o giapponesi (furigana) o per fornire brevi annotazioni. Il nome deriva dall'omonima unità di misura tipografica corrispondente a 5 punti^[1][2].

Esempio	HTML	Effetto	Senza il tag <ruby>
Tokyo	<ruby><rb>東京</rb><rp>(</rp><rt>とうきょう</rt><rp>)</rp></ruby>	東京(とうきょう)	東京(とうきょう)

Formattazione

Box model CSS del markup ruby

Valori

I seguenti valori di visualizzazione assegnano ruoli di layout ruby a un elemento arbitrario^[3]:

ruby

Specifica che un elemento genera un contenitore ruby. (Corrisponde agli elementi<ruby> HTML/XHTML.)

ruby-base

Specifica che un elemento genera un contenitore ruby di base. (Corrisponde agli elementi <rb>HTML/XHTML.)

ruby-text

Specifica che un elemento genera una casella di annotazione ruby. (Corrisponde agli elementi<rt> HTML/XHTML.)

ruby-base-container

Specifica che un elemento genera un contenitore ruby di base. (Corrisponde agli elementi<rbc>XHTML; generato come una casella anonima in HTML.)

ruby-text-container

Specifica che un elemento genera una casella contenitore di annotazioni ruby. (Corrisponde agli elementi<rtc> HTML/XHTML.)

alternate

Diversi livelli di annotazioni si alternano tra sopra e sotto.

over

L'annotazione in ruby appare al di sopra della base.

under

L'annotazione ruby appare in linea sotto la base. Questa è un'impostazione relativamente rara utilizzata nei sistemi di scrittura ideografici dell'Asia orientale, più facilmente riscontrabile nel testo educativo.

inter-character

Simile adover

separate

Ogni casella di annotazione ruby è resa all'interno della stessa colonna come la sua casella di base corrispondente, cioè senza basi adiacenti sovrapposte su entrambi i lati.

merge

Tutte le caselle di annotazione ruby all'interno dello stesso segmento e sulla stessa linea sono concatenate come caselle "inline" all'interno del loro contenitore di annotazioni e disposte in una singola casella di annotazione ruby anonima che copre tutte le caselle di base ruby associate.

auto

L'interprete può utilizzare qualsiasi algoritmo per determinare come ogni casella di annotazione ruby viene resa nella casella di base corrispondente, con la conseguenza che se tutte le annotazioni si adattano alle rispettive basi, il risultato è identico a separate, ma se alcune annotazioni sono più larghe della loro basi lo spazio è condiviso per evitare di imporre spazio tra le basi.

Proprietà

Nome	Valore	Iniziale	Si applica a	Ereditato	Valore di animazione	Ordine canonico	Valore calcolato
ruby-align	start | center | space-between | space-around	space-around	basi ruby, annotazioni di ruby, contenitori di base di ruby, contenitori di annotazioni di ruby	si	dipende dal valore immesso	dipende dalla grammatica	keyword specificata
ruby-merge	separate | merge | auto	separate	contenitori di annotazione ruby interlineare	si	dipende dal valore immesso	dipende dalla grammatica	keyword specificata
ruby-overhang	auto | none	auto	contenitori per annotazioni ruby	si	dipende dal valore immesso	dipende dalla grammatica	keyword specificata
ruby-position	[ alternate || [ over | under ] ] | inter-character	alternate	contenitori per annotazioni ruby	si	discrete	dipende dalla grammatica	keyword specificata

Attributi

Globali	Gestore eventi
accesskey	onabort	onended	onplaying
autocapitalize	onauxclick	onerror	onprogress
class	onblur	onfocus	onratechange
contenteditable	oncancel	onformdata	onreset
data	oncanplay	oninput	onresize
dir	oncanplaythrough	oninvalid	onscroll
draggable	onchange	onkeydown	onsecuritypolicyviolation
hidden	onclick	onkeypress	onseeked
id	onclose	onkeyup	onseeking
inputmode	oncontextmenu	onlanguagechange	onselect
is	oncopy	onload	onslotchange
itemid	oncuechange	onloadeddata	onstalled
itemprop	oncut	onloadedmetadata	onsubmit
itemref	ondblclick	onloadstart	onsuspend
itemscope	ondrag	onmousedown	ontimeupdate
itemtype	ondragend	onmouseenter	ontoggle
lang	ondragenter	onmouseleave	onvolumechange
part	ondragexit	onmousemove	onwaiting
slot	ondragleave	onmouseout	onwheel
spellcheck	ondragover	onmouseover
style	ondragstart	onmouseup
tabindex	ondrop	onpaste
title	ondurationchange	onpause
translate	onemptied	onplay