Chrome 119 से वर्शन 123 के बीच रोल आउट किया जा रहा है. यह सीएसएस की ओर से दी जाने वाली, अंतरराष्ट्रीय सीएसएस की एक नई सुविधा है राइटिंग मोड लेवल 4. ऊर्ध्व फ़ॉर्म नियंत्रण तत्वों के लिए लेखन मोड का अर्थ है कि ये तत्व जो वर्टिकल राइटिंग मोड में दिखाए जाते हैं. Chrome 123 तक यह सुविधा चालू हो जाएगी के लिए, इस पोस्ट में सुविधा के बारे में बताया गया है.
टेक्स्ट आधारित फ़ॉर्म कंट्रोल एलिमेंट के लिए वर्टिकल राइटिंग मोड
इस सुविधा के पूरी तरह चालू होने के बाद, वर्टिकल राइटिंग का इस्तेमाल किया जा सकेगा
फ़ॉर्म कंट्रोल एलिमेंट के मोड, जैसे कि बटन, चुनिंदा सूचियां, और प्रोग्रेस
एलिमेंट. इसका इस्तेमाल करने के लिए, सीएसएस प्रॉपर्टी के राइटिंग मोड को vertical-lr पर सेट करें
बाएं से दाएं ब्लॉक फ़्लो की दिशा और दाएं से बाएं ब्लॉक के लिए 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.