HTML रूबी एनोटेशन
In this page:
<ruby>
base text <rp>(</rp><rt>annotation</rt><rp>)</rp>
</ruby>
ruby से Base और Annotation को Wrap करना
ruby element किसी base text (जैसे Japanese kanji character) के टुकड़े को उसकी ruby-supporting annotation (जैसे pronunciation) के साथ एक साथ wrap करता है, और browser को बताता है कि ये दोनों टुकड़े एक ही annotated unit हैं जिन्हें एक-दूसरे के पास render होना चाहिए।
उदाहरण: Wrapping a Base and Annotation with ruby
<ruby>漢<rt>kan</rt></ruby>
rt से Pronunciation जोड़ना
rt (ruby text) element असली annotation content रखता है -- आमतौर पर pronunciation या reading -- और browsers इसे बिना किसी अतिरिक्त CSS के अपने-आप छोटा और उस base text के ऊपर position करके render करते हैं जिसे वह annotate कर रहा है।
उदाहरण: Adding Pronunciation with rt
<ruby>
漢 <rt>kan</rt>
字 <rt>ji</rt>
</ruby>
rp से Fallback Parentheses
rp (ruby parenthesis) element fallback content -- आमतौर पर एक opening और closing parenthesis -- provide करता है, जो सिर्फ उन browsers में दिखता है जो ruby support नहीं करते।
जो browsers ruby annotations support करते हैं, वे rp content को अपने-आप छिपा देते हैं, इसलिए यह modern browsers में कभी visual duplication नहीं करता।
उदाहरण: Fallback Parentheses with rp
<ruby>
漢<rp>(</rp><rt>kan</rt><rp>)</rp>
</ruby>
CSS से Ruby Text को Style करना
ruby-position और ruby-align CSS properties हैं जो आपको यह control करने देती हैं कि annotation कहाँ बैठे (ऊपर, नीचे, या base text के बगल में) और वह कैसे align हो, जिससे browser की automatic default placement (base text के ऊपर) से आगे कुछ visual control मिलता है।
उदाहरण: Styling Ruby Text with CSS
<style>
rt {
ruby-position: under;
}
</style>
<ruby>漢<rt>kan</rt></ruby>
Ruby Annotations कब इस्तेमाल करें
Ruby annotations खासतौर पर East Asian pronunciation guides के लिए बनाए गए हैं, लेकिन वही mechanism किसी भी base text को एक छोटे gloss के साथ annotate कर सकता है -- जैसे किसी शब्द का अर्थ या किसी मुश्किल नाम का pronunciation किसी भी भाषा में दिखाना -- जब भी आपको एक अलग tooltip या footnote के बजाय किसी खास text से सीधे जुड़ी एक छोटी annotation की जरूरत हो।
उदाहरण: When to Use Ruby Annotations
<ruby>難<rt>nán</rt></ruby>
- rp fallback parentheses भूल जाना, जिसका मतलब है कि बहुत पुराने या non-ruby-aware browsers base text और pronunciation को बिना किसी visual separation के एक साथ चला देंगे।
- ruby को pronunciation से unrelated visual superscript-style annotations के लिए इस्तेमाल करना, जबकि sup या styled span ज़्यादा उपयुक्त, halka-fulka choice है।
- rt के अंदर block-level elements nest करना, जबकि rt का मतलब सिर्फ छोटा inline pronunciation text रखना है।
- ruby किसी base text unit को उसके annotation के साथ wrap करता है, सबसे ज़्यादा Japanese furigana जैसी East Asian pronunciation guides के लिए इस्तेमाल होता है।
- rt असली annotation text रखता है, जिसे ruby support करने वाले browsers छोटा और base text के ऊपर (या बगल में) render करते हैं।
- rp fallback parentheses देता है जो सिर्फ ruby support न करने वाले browsers में दिखती हैं, ताकि annotation हर जगह readable रहे।
ruby, rt, और rp सभी modern browsers में supported हैं, जिनमें Chrome, Firefox, Safari, और Edge शामिल हैं; support mid-2010s से solid है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: