फ़ॉर्म कंट्रोल एलिमेंट के लिए, सीएसएस वर्टिकल राइटिंग मोड

Di Zhang
Di Zhang

Chrome 119 से 123 पर रोल आउट की जा रही यह सीएसएस की नई सुविधा, सीएसएस लिखने के मोड के लेवल 4 से जुड़ी है. फ़ॉर्म कंट्रोल एलिमेंट के लिए वर्टिकल लिखने का मोड का मतलब है कि इन एलिमेंट को वर्टिकल लिखने के मोड में दिखाया जा सकता है. Chrome 123 में यह सुविधा सभी उपयोगकर्ताओं के लिए चालू हो जाएगी. इस पोस्ट में इस सुविधा के बारे में बताया गया है.

टेक्स्ट पर आधारित फ़ॉर्म कंट्रोल एलिमेंट के लिए, वर्टिकल राइटिंग मोड

इस सुविधा के पूरी तरह चालू होने के बाद, बटन, चुनी गई सूचियां, और प्रोग्रेस एलिमेंट जैसे फ़ॉर्म कंट्रोल एलिमेंट के लिए, वर्टिकल राइटिंग मोड का इस्तेमाल किया जा सकेगा. इसका इस्तेमाल करने के लिए, सीएसएस प्रॉपर्टी के writing-mode को बाएं से दाएं ब्लॉक फ़्लो की दिशा के लिए 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 पर समस्या दर्ज करें.