|
IlI '''ruby markup''' (o '''annotazioni ruby''' o semplicemente {{nihongo|'''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 [[lingua cinese|cinesi]] ([[pinyin]]) o [[lingua giapponese|giapponesi]] ([[furigana]]) o per fornire brevi annotazioni. Il nome deriva dall'omonima [[unità di misura]] [[tipografia|tipografica]] corrispondente a 5 [[punto tipografico|punti]]<ref>{{Cita web|url=https://www.w3.org/TR/css-ruby-1/Overview.html|titolo=CSS Ruby Annotation Layout Module Level 1|accesso=2021-08-23}}</ref><ref>{{Cita web|url=https://www.w3.org/TR/html-ruby-extensions/Overview.html|titolo=W3C HTML Ruby Markup Extensions|accesso=2021-08-23}}</ref>.
{| class="wikitable"
Ad esempio, vengono utilizzati con i sinogrammi per l'apprendimento della pronuncia. L'uso del sinogramma 月 (“luna”) può quindi essere accompagnato da:
! Esempio || HTML || Effetto || Senza il tag <kbd><nowiki><ruby></nowiki></kbd>
|-
|align=center | [[Tokyo]]
|<syntaxhighlight lang="html5"><ruby><rb>東京</rb><rp>(</rp><rt>とうきょう</rt><rp>)</rp></ruby></syntaxhighlight>
|align=center | <ruby style="font-size:3em;"><rb>東京</rb><rp>(</rp><rt>とうきょう</rt><rp>)</rp></ruby>
|align=center | <rb>東京</rb><rp>(</rp><rt>とうきょう</rt><rp>)</rp>
|}
== Formattazione ==
* in [[Lingua cinese|lingue cinesi]], ad esempio, per il mandarino, principalmente nella Cina continentale, Pinyin "yuè", o, principalmente a Taiwan, bopomofo (o zhuyin) "ㄩ ㄝ ˋ", o ancora, per cantonese (yue, langue funzionario di Hong Kong e Macao), la traslitterazione in jyutping “jyut⁶”
[[File:Css3-ruby.png|alt=Box model CSS del markup ruby|miniatura|Box model [[CSS]] del markup ruby]]
* in [[Lingua coreana|coreano]] antico, scritto in sinogramma, il principio è lo stesso del cinese, con hangeul scritto sopra, mentre al contrario, nel coreano moderno, il carattere di base è [[Hangŭl|hangeul]] (scrittura contemporanea, puramente fonetica) , e l'[[hanja]] (sinogramma in coreano) è messo tra parentesi, per la semantica del termine, non per la sua pronuncia
* in [[Lingua giapponese|giapponese]], i caratteri hiragana “つき”, anche di dimensioni ridotte, possono superare il sinogramma per indicare la sua pronuncia ''tsuki''.
=== Valori ===
Generalmente, nel caso in cui sia la fonetica ad accompagnare il sinogramma, se il testo è orizzontale, il rubino è sopra i caratteri, quando il testo è verticale, è alla sua destra. Mentre nel caso del coreano, dove il sinogramma è in rubino, è alla sua destra, tra parentesi nel testo orizzontale o sotto nel testo verticale.
I seguenti valori di visualizzazione assegnano ruoli di layout ruby a un elemento arbitrario<ref>{{Cita web|url=https://www.quackit.com/html_5/tags/html_ruby_tag.cfm|titolo=HTML 5 Tag|accesso=2021-08-23}}</ref>:
; <dfn>ruby</dfn>
Le annotazioni rubino giapponesi sono tradizionalmente indicate come [[furigana]] (o [[Furigana|yomigana]]) e sono comunemente usate in questa lingua (insieme alla trascrizione in [[kana]]) soprattutto per letture insolite di parole o per fornire aiuto alla lettura per bambini o persone. che stanno ancora imparando la lingua. Occasionalmente sono usati per spiegare giochi di parole o giochi sui kanji, ma anche per nomi e cognomi perché la pronuncia dei caratteri nel caso dei nomi è molto spesso irregolare. Nelle altre lingue con i Sinogrammi, sono usati solo a scopo didattico e rimangono piuttosto rari nelle pubblicazioni attuali.
: Specifica che un elemento genera un <dfn>contenitore ruby</dfn>. (Corrisponde agli elementi<code><nowiki><ruby></nowiki></code> HTML/XHTML.)
; <dfn>ruby-base</dfn>
: Specifica che un elemento genera un ''contenitore ruby di base''. (Corrisponde agli elementi <code><nowiki><rb></nowiki></code>HTML/XHTML.)
; <dfn>ruby-text</dfn>
: Specifica che un elemento genera una <dfn>casella di annotazione ruby</dfn>. (Corrisponde agli elementi<code><nowiki><rt></nowiki></code> HTML/XHTML.)
; <dfn>ruby-base-container</dfn>
: Specifica che un elemento genera un <dfn>contenitore ruby di base</dfn>. (Corrisponde agli elementi<code><rbc></code>XHTML; generato come una casella anonima in HTML.)
; <dfn>ruby-text-container</dfn>
: Specifica che un elemento genera una <dfn>casella contenitore di annotazioni ruby</dfn>. (Corrisponde agli elementi<code><nowiki><rtc></nowiki></code> HTML/XHTML.)
; <dfn>alternate</dfn>
{| border="1" cellpadding="5" style="text-align:center;border-collapse: collapse;border:1px dashed #aaa;"
|+ '''Cinese'''
Diversi livelli di annotazioni si alternano tra sopra e sotto.
! bgcolor=#F9F9F9|
! bgcolor=#F9F9F9|''[[bopomofo]]''<br>o ''zhuyin''
'''''over'''''
! bgcolor=#F9F9F9|''[[Hanyu pinyin|pinyin]]''
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 ad<code>over</code>
'''''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 <code>separate</code>, ma se alcune annotazioni sono più larghe della loro basi lo spazio è condiviso per evitare di imporre spazio tra le basi.
=== Proprietà ===
{| class="wikitable"
!Nome
!Valore
!Iniziale
!Si applica a
!Ereditato
!Valore di animazione
!Ordine canonico
!Valore calcolato
|-
! ruby-align
|<nowiki>start | center | space-between | space-around</nowiki>
| style='line-height: 250%; font-size: 250%' |<ruby><rb>北</rb><rt>ㄅㄟˇ</rt></ruby><ruby><rb>京</rb><rt>ㄐㄧㄥ</rt></ruby>
|space-around
| style='line-height: 250%; font-size: 250%' |<ruby><rb>北</rb><rt>běi</rt></ruby><ruby><rb>京</rb><rt>jīng</rt></ruby>
|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
! table
|<nowiki>separate | merge | auto</nowiki>
|
|separate
{| border="0" cellpadding="4" cellspacing="0"
|contenitori di annotazione ruby interlineare
|si
|dipende dal valore immesso
|dipende dalla grammatica
|keyword
specificata
|-
!ruby-overhang
| style="text-align: center; font-size: 120%" lang="zh" xml:lang="zh" | ㄅㄟˇ
|<nowiki>auto | none</nowiki>
| style="text-align: center; font-size: 120%" lang="zh" xml:lang="zh" | ㄐㄧㄥ
|auto
|contenitori per annotazioni ruby
|si
|dipende dal valore immesso
|dipende dalla grammatica
|keyword
specificata
|-
!ruby-position
| style="text-align: center; font-size: 250%" lang="zh" xml:lang="zh" | 北
|<nowiki>[ alternate || [ over | under ] ] | inter-character</nowiki>
| style="text-align: center; font-size: 250%" lang="zh" xml:lang="zh" | 京
|alternate
|contenitori per annotazioni ruby
|si
|discrete
|dipende dalla grammatica
|keyword
specificata
|}
|
=== Attributi ===
{| border="0" cellpadding="4" cellspacing="0"
{| class="wikitable"
|'''Globali'''
| colspan="3" |'''Gestore eventi'''
|-
|accesskey
| style="text-align: center; font-size: 120%" | běi
|onabort
| style="text-align: center; font-size: 120%" | jīng
|onended
|onplaying
|-
|autocapitalize
| style="text-align: center; font-size: 250%" lang="zh" xml:lang="zh" | 北
|onauxclick
| style="text-align: center; font-size: 250%" lang="zh" xml:lang="zh" | 京
|onerror
|}
|onprogress
|}
{| border="1" cellpadding="5" style="text-align:center;border-collapse: collapse;border:1px dashed #aaa;"
|+ '''Giapponese'''
! bgcolor=#F9F9F9|
! bgcolor=#F9F9F9|''[[hiragana]]''
! bgcolor=#F9F9F9|''[[katakana]]''
! bgcolor=#F9F9F9|''[[romaji]]''
|-
|class
! ruby
|onblur
| style='line-height: 250%; font-size: 250%' |<ruby><rb>東</rb><rt>とう</rt></ruby><ruby><rb>京</rb><rt>きょう</rt></ruby>
|onfocus
| style='line-height: 250%; font-size: 250%' |<ruby><rb>東</rb><rt>トウ</rt></ruby><ruby><rb>京</rb><rt>キョウ</rt></ruby>
|onratechange
| style='line-height: 250%; font-size: 250%' |<ruby><rb>東</rb><rt>tō</rt></ruby><ruby><rb>京</rb><rt>kyō</rt></ruby>
|-
|contenteditable
! table
|oncancel
|
|onformdata
{| border="0" cellpadding="4" cellspacing="0"
|onreset
|-
|data
| style="text-align: center; font-size: 120%" lang="ja" xml:lang="ja" | とう
|oncanplay
| style="text-align: center; font-size: 120%" lang="ja" xml:lang="ja" | きょう
|oninput
|onresize
|-
|dir
| style="text-align: center; font-size: 250%; " lang="ja" xml:lang="ja" | 東
|oncanplaythrough
| style="text-align: center; font-size: 250%; " lang="ja" xml:lang="ja" | 京
|oninvalid
|}
|onscroll
|
{| border="0" cellpadding="4" cellspacing="0"
|-
|draggable
| style="text-align: center; font-size: 120%" lang="ja" xml:lang="ja" | トウ
|onchange
| style="text-align: center; font-size: 120%" lang="ja" xml:lang="ja" | キョウ
|onkeydown
|onsecuritypolicyviolation
|-
|hidden
| style="text-align: center; font-size: 250%" lang="ja" xml:lang="ja" | 東
|onclick
| style="text-align: center; font-size: 250%" lang="ja" xml:lang="ja" | 京
|onkeypress
|}
|onseeked
|
{| border="0" cellpadding="4" cellspacing="0"
|-
|id
| style="text-align: center; font-size: 120%" | tō
|onclose
| style="text-align: center; font-size: 120%" | kyō
|onkeyup
|onseeking
|-
|inputmode
| style="text-align: center; font-size: 250%" lang="ja" xml:lang="ja" | 東
|oncontextmenu
| style="text-align: center; font-size: 250%" lang="ja" xml:lang="ja" | 京
|onlanguagechange
|}
|onselect
|}
{| class="wikitable"
|+ '''Coreano'''
! [[Hangeul]]
! [[Romaja]]
|-
|is
|oncopy
{| border="0" cellpadding="2" cellspacing="0"
|onload
|onslotchange
|-
|itemid
| style="text-align: center; font-size: 120%; line-height: 1em;" lang="ja" | {{lang|ko|조}}
|oncuechange
| style="text-align: center; font-size: 120%; line-height: 1em;" lang="ja" | {{lang|ko|선}}
|onloadeddata
|onstalled
|-
|itemprop
| style="text-align: center; font-size: 200%; line-height: 1em;" lang="ja" | {{lang|ko|朝}}
|oncut
| style="text-align: center; font-size: 200%; line-height: 1em;" lang="ja" | {{lang|ko|鮮}}
|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
|
{| border="0" cellpadding="2" cellspacing="0"
|-
|style
|ondragstart
|onmouseup
|
|-
|tabindex
| style="text-align: center; font-size: 120%; line-height: 1em;" | Cho
|ondrop
| style="text-align: center; font-size: 120%; line-height: 1em;" | sŏn
|onpaste
|
|-
|title
| style="text-align: center; font-size: 200%; line-height: 1em;" | {{lang|ko|朝}}
|ondurationchange
| style="text-align: center; font-size: 200%; line-height: 1em;" | {{lang|ko|鮮}}
|onpause
|
|-
|translate
|onemptied
|onplay
|
|}
|}
Un layout con un elemento ''tavolo'' invece impedisce ai caratteri con ruby di essere inseriti in un normale paragrafo di testo, l'inclusione di una tabella in un blocco di testo lo rende se non impossibile, almeno molto difficile L'elemento ''ruby'' può essere utilizzato direttamente in una frase, ad esempio: Il nome [[Pechino]] è una deformazione del cinese <ruby><rb>北</rb><rt>běi</rt></ruby><ruby><rb>京</rb><rt>jīng</rt></ruby> dei missionari gesuiti del XVII secolo.
== Su internet ==
nel 2001, il [[World Wide Web Consortium|W3C]] ha pubblicato un modulo [[XHTML]] che rende possibile annotare queste annotazioni tramite [[computer]]. Nessun [[browser]] lo ha integrato, probabilmente perché il rigoroso standard XHTML è troppo restrittivo. Successivamente, una versione semplificata è stata integrata nello standard [[HTML5]] e si sta scrivendo un modulo di formattazione CSS ruby. All'inizio del 2015, [[Internet Explorer]] supporta una versione molto vecchia del modulo HTML sin dalla sua versione 5, questa versione è molto simile alla sua versione in HTML5. [[Safari (browser)|Safari]] e [[Google Chrome|Chrome]] supportano solo lo standard HTML5. [[Mozilla Firefox|Firefox]], implementa una versione CSS completa.
== Note ==
== Esempio con l'elemento HTML ruby ==
<references />
L'utilizzo dell'elemento HTML "ruby" semplifica enormemente il compito. Quindi il codice <code><ruby><rb>{{lang|ja|東京}}</rb><rt>{{lang|ja|とう きょう}}</rt></ruby> </code>
è facile da usare :
<code><ruby></ruby></code> incornicia il testo da annotare e le sue annotazioni
* all'interno, <code><rb></rb></code> circonda il testo da annotare
* seguito da <code><rt></rt></code> per l'annotazione
* opzionalmente, possiamo racchiudere l'annotazione con <code><rp>[caractère]</rp></code>, che contiene un carattere da visualizzare per i browser che non sanno come rendere ''ruby''. l'esempio sopra diventa quindi <code><ruby><rb>{{lang|ja|東京}}</rb><rp>(</rp><rt>{{lang|ja|とう きょう}}</rt><rp>)</rp></ruby></code>, dove abbiamo usato le parentesi in modo che tali browser visualizzino tutto come {{lang|ja|東京(とう きょう)}}. i browser che supportano questo codice renderanno il testo annotato come desiderato e ignoreranno i caratteri tra <code><rp></rp></code>. con il browser che visualizza questa pagina in questo momento, dà {{lang|ja|<ruby><rb>東京</rb><rp>(</rp><rt>とう きょう</rt><rp>)</rp></ruby>}}.
== Bibliografia ==
* {{cita libro|lingua=en|autore=Ken Lunde|capitolo=Ruby Glyphs|titolo=CJKV Information Processing|anno=1999|url=https://archive.org/details/cjkvinformationp00lund|editore=O'Reilly Media|ISBN=978-0-596-51447-1}}
== Collegamenti esterni ==
| 