East Asian typography में, छोटे pronunciation guides अक्सर किसी character के ऊपर या बगल में सीधे print किए जाते हैं ताकि उन readers की मदद हो सके जिन्हें शायद यह न पता हो कि उसे कैसे pronounce करना है — kanji के ऊपर Japanese furigana इसका classic example है। HTML में इसके लिए तीन dedicated elements हैं: ruby पूरी annotated unit को wrap करता है, rt pronunciation text रखता है, और rp उन browsers के लिए एक fallback देता है जो ruby annotations को बिल्कुल भी नहीं समझते।
<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 होना चाहिए।
Note:
पूरे sentence को एक ruby block में wrap करने के बजाय, हर ruby element को text की एक छोटी unit (एक ही शब्द या character) पर केंद्रित रखें।
Warning:
अकेले ruby, बिना किसी inner rt element के, annotation के रूप में display करने के लिए कुछ भी नहीं रखता -- ये दोनों elements साथ मिलकर काम करते हैं, अलग-अलग नहीं।
उदाहरण: Wrapping a Base and Annotation with ruby
markup
<ruby>漢<rt>kan</rt></ruby>
rt से Pronunciation जोड़ना
rt (ruby text) element असली annotation content रखता है -- आमतौर पर pronunciation या reading -- और browsers इसे बिना किसी अतिरिक्त CSS के अपने-आप छोटा और उस base text के ऊपर position करके render करते हैं जिसे वह annotate कर रहा है।
Note:
rt content को छोटा रखें; ruby annotations छोटे pronunciation guides के लिए डिज़ाइन किए गए हैं, लंबे explanatory text के लिए नहीं।
Warning:
एक annotation के रूप में सही तरीके से render होने के लिए rt को ruby का direct child होना चाहिए; इसे कहीं और रखने पर कोई special ruby styling effect नहीं मिलता।
उदाहरण: Adding Pronunciation with rt
markup
<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 नहीं करता।
Note:
अपने rt content के चारों ओर हमेशा rp fallback parentheses शामिल करें; modern browsers में यह extra markup कुछ भी खर्च नहीं करता और पुराने browsers में readability की रक्षा करता है।
Warning:
rp के बिना, ruby न समझने वाला browser base text और annotation text को बिना किसी visual separation के आपस में मिला देगा, जिससे पढ़ना मुश्किल हो जाता है।
उदाहरण: Fallback Parentheses with rp
markup
<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 मिलता है।
Note:
ज्यादातर मामलों में ruby-position को उसके default पर ही छोड़ दें -- ऊपर की placement वही है जिसकी उम्मीद annotated languages के readers तुरंत करते और पहचानते हैं।
Warning:
ruby styling पर CSS का control ज्यादातर दूसरे text CSS properties की तुलना में ज्यादा limited है और इसका cross-browser support भी असमान है, इसलिए किसी भी custom ruby styling को ध्यान से test करें।
Ruby annotations खासतौर पर East Asian pronunciation guides के लिए बनाए गए हैं, लेकिन वही mechanism किसी भी base text को एक छोटे gloss के साथ annotate कर सकता है -- जैसे किसी शब्द का अर्थ या किसी मुश्किल नाम का pronunciation किसी भी भाषा में दिखाना -- जब भी आपको एक अलग tooltip या footnote के बजाय किसी खास text से सीधे जुड़ी एक छोटी annotation की जरूरत हो।
Note:
जब भी किसी annotation को किसी खास inline text से visually जुड़ा रहना हो, तब ruby इस्तेमाल करें; लंबे, optional explanations के लिए title attribute या tooltip इस्तेमाल करें।
Warning:
उस text पर ruby annotations का ज्यादा उपयोग करना जो वाकई East Asian pronunciation से संबंधित नहीं है, readers और screen readers को confuse कर सकता है, जो ruby का मतलब "reading guide" समझते हैं।
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}