Chrome 119 से 123 के बीच रोल आउट, सीएसएस राइटिंग मोड लेवल 4 की एक नई अंतरराष्ट्रीय सीएसएस सुविधा है. फ़ॉर्म कंट्रोल एलिमेंट के लिए वर्टिकल राइटिंग मोड का मतलब है कि इन एलिमेंट को वर्टिकल राइटिंग मोड में दिखाया जा सकता है. Chrome 123 तक यह सुविधा सभी उपयोगकर्ताओं के लिए चालू हो जाएगी. इस पोस्ट में इस सुविधा के बारे में बताया गया है.
टेक्स्ट पर आधारित फ़ॉर्म कंट्रोल एलिमेंट के लिए, वर्टिकल राइटिंग मोड
इस सुविधा के पूरी तरह से चालू होने के बाद, फ़ॉर्म कंट्रोल एलिमेंट के लिए वर्टिकल राइटिंग मोड इस्तेमाल किए जा सकेंगे. जैसे, बटन, चुनी गई सूचियां, और प्रोग्रेस एलिमेंट. इसका इस्तेमाल करने के लिए, सीएसएस प्रॉपर्टी में लिखने का मोड vertical-lr पर सेट करें, ताकि बाएं से दाएं ब्लॉक फ़्लो की दिशा के लिए, vertical-rl और दाएं से बाएं ब्लॉक फ़्लो की दिशा के लिए vertical-rl सेट किया जा सके.
यह ऐसी कई पूर्वी एशियन भाषाओं के लिए फ़ायदेमंद है जो लिखने के लिए, आम तौर पर वर्टिकल स्क्रिप्ट का इस्तेमाल करती हैं. उदाहरण के लिए, पारंपरिक जापानी को अक्सर वर्टिकल तौर पर दाएं से बाएं लिखा जाता है.
दुनिया भर के हिसाब से, वर्टिकल फ़ॉर्म कंट्रोल के कुछ उदाहरण यहां दिए गए हैं.
बटन
<html lang="zh">
<button>请点击</button>
button {
writing-mode: vertical-rl;
}
<select> तत्व
आपके पास यह तय करने का विकल्प होता है कि <select> एलिमेंट, सभी टेक्स्ट को वर्टिकल तौर पर दिखाए.
select {
writing-mode: vertical-lr;
}
<select multiple>
<option>日本語
<option>中文
<option>English
<option>français
<option>فارسی
</select>
<select>
<option>日本語
<option>中文
<option>English
<option>français
<option>فارسی
</select>
ध्यान दें कि मौजूदा तरीके में अब भी पॉप-अप विंडो के विकल्प हॉरिज़ॉन्टल तौर पर दिखाए गए हैं.
टेक्स्ट पर आधारित इनपुट
अब कई टेक्स्ट इनपुट आधारित फ़ॉर्म कंट्रोल के लिए, टेक्स्ट डालते समय वर्टिकल राइटिंग मोड का इस्तेमाल किया जा सकता है.
textarea {
writing-mode: vertical-rl;
width: 5em;
height: 20em;
}
<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>
स्लाइडर
किसी फ़ॉर्म एलिमेंट की वैल्यू को विज़ुअल तौर पर दिखाना भी फ़ायदेमंद हो सकता है. <meter>, <progress>, और <input type=range> जैसे स्लाइडर यही काम करते हैं.
पहले, सिर्फ़ <range> को गैर-मानक सीएसएस दिखाई देने की वैल्यू slider-vertical का इस्तेमाल करके वर्टिकल तौर पर रेंडर किया जा सकता था. अब सीएसएस writing-mode प्रॉपर्टी का इस्तेमाल करके, तीनों को वर्टिकल तौर पर दिखाया जा सकता है.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
}
डिफ़ॉल्ट रूप से, सीएसएस की दिशा ltr पर सेट होती है. इसका मतलब है कि वैल्यू, ऊपर से नीचे
रेंडर की जाएंगी. आप दिशा को rtl के रूप में सेट करके यह तय कर सकते हैं कि मान सबसे नीचे क्या होना चाहिए.
input[type="range"], meter, progress {
writing-mode: vertical-lr;
direction: rtl;
}
Chrome 122 में वैल्यू की दिशा बदलने के लिए एक एक्सपेरिमेंट किया जा रहा है. अगर आपको कोई सुझाव/राय देनी है या शिकायत करनी है, तो हमें बताएं.
दिलचस्पी दिखाएं और सुझाव/राय दें या शिकायत करें
इन सुविधाओं के बारे में सुझाव/राय देने या शिकायत करने के लिए, crbug.com पर समस्या दर्ज करें.