HTML ruby Tag

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.

https://id.wikipedia.org/wiki/Aksara_rubi

Dalam penulisannya element <ruby> dapat diikutsertakan element <rb>, <rt>, <rtc> dan <rp> sebagai element pendukung

Element <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>

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>

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;
}