عناصر Ruby مصممة لعرض النطق (التشكيل الصوتي) فوق الحروف الآسيوية (يابانية، صينية، كورية)، لكنها قد تُستخدم لأغراض أخرى:
• <ruby>: الحاوية الرئيسية لنص Ruby • <rt> (Ruby Text): النص الصغير فوق/تحت الحروف الرئيسية يوضح النطق • <rp> (Ruby Parenthesis): نص بديل للمتصفحات التي لا تدعم Ruby، يُعرض داخل أقواس
الاستخدام العملي: - تعليم اللغة اليابانية والصينية - توضيح نطق كلمات صعبة - إمكانية توظيفها لتشكيل الكلمات العربية
| 1 | <!-- مثال ياباني: الكانجي مع الكانا فوقه --> |
| 2 | <ruby> |
| 3 | 漢 <rt>かん</rt> |
| 4 | 字 <rt>じ</rt> |
| 5 | </ruby> |
| 6 | |
| 7 | <!-- مع rp للمتصفحات القديمة --> |
| 8 | <ruby> |
| 9 | 明日 <rp>(</rp><rt>あした</rt><rp>)</rp> |
| 10 | </ruby> |
| 11 | |
| 12 | <!-- مثال صيني --> |
| 13 | <ruby> |
| 14 | 中文 <rp>(</rp><rt>zhōngwén</rt><rp>)</rp> |
| 15 | </ruby> |
مثال 1: تعليم اليابانية
| 1 | <p>كلمة "مرحباً" باليابانية:</p> |
| 2 | <ruby> |
| 3 | こんにちは |
| 4 | <rp>(</rp> |
| 5 | <rt>Konnichiwa</rt> |
| 6 | <rp>)</rp> |
| 7 | </ruby> |
| 8 | |
| 9 | <p>أرقام يابانية:</p> |
| 10 | <ruby>一<rt>いち</rt></ruby> |
| 11 | <ruby>二<rt>に</rt></ruby> |
| 12 | <ruby>三<rt>さん</rt></ruby> |