tRikSonic
Tema

HTML ruby Tag

Terakhir diperbarui : 22 Mei 2018 - 07.16

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
html ruby
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>
<!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
ElementChromeSafariFirefoxOperaIEEdge
<ruby>555155Ya
Mobile
ElementAndroid webviewChrome AndroidEdge mobileFirefox AndroidIE mobileOpera AndroidiOS Safari
<ruby>YaYaYa38-15Ya

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;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.