लाइन ब्रेक करने लायक <रूबी> और सीएसएस रूबी-अलाइन प्रॉपर्टी

टेक्स्ट प्रज़ेंटेशन को बेहतर बनाने के लिए, एचटीएमएल <ruby> एलिमेंट एक बेहतरीन टूल है. खास तौर पर, पूर्वी एशिया की भाषाओं के लिए यह एक बेहतरीन टूल है. इस एलिमेंट की मदद से, फ़ोनेटिक एनोटेशन या अन्य अतिरिक्त जानकारी को बेस टेक्स्ट के ऊपर या बगल में दिखाया जा सकता है. Chrome 128 में, रूबी एनोटेशन को लाइन ब्रेक किया जा सकेगा. साथ ही, ruby-align सीएसएस प्रॉपर्टी की मदद से रूबी टेक्स्ट को स्टाइल किया जा सकता है.

<ruby> एलिमेंट के दो मुख्य हिस्से होते हैं, ruby base जो मुख्य टेक्स्ट है और ruby टेक्स्ट जो जानकारी देने वाला टेक्स्ट है, जिसे <rt> एलिमेंट के साथ मार्क किया गया है. रूबी टेक्स्ट को रूबी बेस के ऊपर या उसके नीचे दिखाया जा सकता है, जैसा कि इन उदाहरणों में दिखाया गया है.

<ruby>
  絵文字
  <rt>emoji</rt>
</ruby>

<ruby style="ruby-position: under;">
  강남대로
  <rt>江南大路</rt>
</ruby>

इसे रूबी क्यों कहा जाता है?

जब किताबों को एक जगह से दूसरी जगह ले जाया जा सकता था, तब उनके साइज़ को पॉइंट-साइज़ के नामों में बताया जाता था. जैसे, Perl और डायमंड. ब्रिटिश सिस्टम में रूबी का इस्तेमाल 5.5 पॉइंट साइज़ के लिए किया जाता था. जैपनीज़ प्रिंटर ने एनोटेशन टेक्स्ट के लिए, रूबी (5.5 पॉइंट) से मिलते-जुलते साइज़ का इस्तेमाल किया. इसलिए, प्रिंट किए जाने वाले टेक्स्ट में, एनोटेशन टेक्स्ट को रूबी (या फ़ोनेटिक रूप से) कहा जाने लगा. एचटीएमएल में एनोटेशन टेक्स्ट शामिल करते समय, एलिमेंट को <ruby> के तौर पर बताया गया था. Pica (pc) एक और ऐतिहासिक पॉइंट-साइज़ नाम है, जिसका इस्तेमाल सीएसएस में फ़ॉन्ट साइज़ यूनिट के तौर पर किया जाता है.

लाइन ब्रेकेबल रूबी

पहले अगर रूबी-बेस या रूबी-टेक्स्ट पूरी लाइन से लंबा होता था, तो उन्हें अलग-अलग लेआउट चैलेंज के रूप में रैप किया जाता था. इस समस्या से निपटने के लिए, वेब डेवलपर अक्सर कई रूबी टैग का इस्तेमाल करके टेक्स्ट को मार्क अप करते हैं. लाइन ब्रेकेबल रूबी की मदद से, आप इस तरह का मार्कअप बनाना छोड़ सकते हैं.

इस उदाहरण में, चाइनीज़ कविताओं पर रूबी एनोटेशन के एक सेट के तौर पर, पिनयिन (चाइनीज़ का रोमनीकरण) को जोड़ा गया है. रेंडर करने के मौजूदा नतीजों को रूबी टेक्स्ट एरिया में रैप किया जाता है.

Chrome 128 से रेंडर होने के लिए, लाइन ब्रेक करने लायक रूबी जगहों की मदद से रैप किया गया रूबी एनोटेशन टेक्स्ट. इसके बाद, रैप किए गए बेस टेक्स्ट के ऊपर टेक्स्ट रेंडर होने की बेहतर सुविधा.

जापानी साहित्य के एक अन्य उदाहरण में, लाइन ब्रेक लंबे रूबी एलिमेंट से पहले होता है. इससे पहली लाइन में एक खाली जगह बन जाती है.

लाइन ब्रेकेबल रूबी की मदद से, लाइन ब्रेक को लंबे रूबी एलिमेंट के बीच में रखा जाता है. इस एलिमेंट का लेआउट बेहतर होता है.

यह सुविधा, ऐसे छोटे रूबी टेक्स्ट को नहीं तोड़ेगी जिसमें चार बेस वर्णों से कम या उसके बराबर और आठ से कम या उसके बराबर जानकारी देने वाले वर्ण हों.

जब <ruby> एलिमेंट को किसी दूसरे <ruby> एलिमेंट के अंदर नेस्ट किया जाता है, तो अंदरूनी <ruby> एलिमेंट लाइन ब्रेक नहीं करेगा.

इससे लंबे रूबी टेक्स्ट का इस्तेमाल करने वाले मौजूदा वेब पेजों के काम करने का तरीका बदल जाता है. इसलिए, अगर आपको लाइन ब्रेक की इस सुविधा को बंद करना है, तो white-space:nowrap लागू करने से, टारगेट एलिमेंट में लाइन ब्रेक करने की सुविधा हमेशा की तरह बंद हो जाती है.

ruby-align सीएसएस प्रॉपर्टी

Chrome 128 में नई सीएसएस प्रॉपर्टी ruby-align भी उपलब्ध है. प्रॉपर्टी इनमें से किसी एक कीवर्ड वैल्यू space-around, space-between, start, और center को स्वीकार करती है. साथ ही, यह रूबी बेस टेक्स्ट और रूबी एनोटेशन के टेक्स्ट के अलाइनमेंट को कंट्रोल करती है.