Tutorial HTML <ruby>
Element html ruby mendefinisikan anotasi ruby atau aksara ruby atau karakter ruby, Apa itu anotasi ruby.
Karakter rubi (ルビ?) adalah huruf kecil, pemberi keterangan yang diletakkan di atas atau dikanan dari huruf Tionghoa ketika menulis bahasa dengan aksara morfemis seperti Bahasa Tionghoa dan Jepang yang digunakan untuk menunjukkan pengucapan. Biasanya disebut ruby atau rubi, yang digunakan sebagai panduan pengucapan untuk karakter yang tidak familiar bagi pembaca.
Dalam penulisannya element
<ruby> dapat diikutsertakan element <rb>, <rt>, <rtc> dan <rp> sebagai element pendukungElement
<ruby> sering digunakan dalam tipografi Asia Timur (china, korea, jepang) sebagai acuan untuk bantuan pengucapan atau untuk keterangan karakter lainnya.Contoh HTML <ruby>
Contoh berikut menggunakan aksara sederhana bahasa china.
<p> <ruby>地板脏了<rt>Dìbǎn zàngle</rt></ruby> </p>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body style="font-size:2.5em;"> <p> <ruby>地板脏了<rt>Dìbǎn zàngle</rt></ruby> </p> </body> </html>
Contoh HTML <ruby>
<p> <ruby> 法 <rb>華</rb> <rb>経</rb> <rt>ほ</rt> <rt>け</rt> <rt>き ょ う</rt> </ruby> </p> <p> <ruby> 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby> </p> <p> <ruby> イン <rt>in</rt> ド <rt>do</rt> ネ <rt>ne</rt> シア <rt>shia</rt> </ruby> </p>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body style="font-size:2em;"> <p> <ruby> 法 <rb>華</rb> <rb>経</rb> <rt>ほ</rt> <rt>け</rt> <rt>き ょ う</rt> </ruby> </p> <p> <ruby> 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby> </p> <p> <ruby> イン <rt>in</rt> ド <rt>do</rt> ネ <rt>ne</rt> シア <rt>shia</rt> </ruby> </p> </body> </html>
Global Attributes:
Element <ruby> mencakup Global Attributes HTML.
Event Attributes:
Element <ruby> mencakup Event Attributes HTML.
Browser Support HTML <ruby>
Desktop
| Element | Chrome | Safari | Firefox | Opera | IE | Edge |
<ruby> | 5 | 5 | 5 | 15 | 5 | Ya |
Mobile
| Element | Android webview | Chrome Android | Edge mobile | Firefox Android | IE mobile | Opera Android | iOS Safari |
<ruby> | Ya | Ya | Ya | 38 | - | 15 | Ya |
Default CSS :
Browser yang support dengan element
<ruby>, mempunyai nilai default :/* belum diketahui apakah memiliki nilai default apa tidak */
Berikut output yang dihasilkan dari beberapa browser :
Chrome
ruby {
text-indent: 0px;
}Firefox
ruby {
display: ruby;
}