आइटम को ऐसे क्रम में लगाने के लिए, लेआउट के तरीकों से जुड़ी समस्या को हल करने के लिए आपका सुझाव चाहिए जो दस्तावेज़ के सोर्स से डिसकनेक्ट हो.
सीएसएस वर्किंग ग्रुप, इस समस्या को हल करने के लिए काम कर रहा है. इसमें लेआउट का तरीका, आइटम को ऐसे क्रम में लगा सकता है जो सोर्स से अलग हो और दस्तावेज़ के पढ़ने और फ़ोकस किए जाने के क्रम से हो. इस लेख में, समस्या के बारे में बताया गया है. साथ ही, समाधान के बारे में बताया गया है. कृपया अपने सुझाव, शिकायत या राय दें.
समस्या
एचटीएमएल दस्तावेज़ का पढ़ने का क्रम, सोर्स क्रम के मुताबिक होता है. इसका मतलब है कि स्क्रीन रीडर, दस्तावेज़ को उसी तरह पढ़ेगा जैसे उसे सोर्स में रखा गया है. साथ ही, दस्तावेज़ के आस-पास टैब करने के लिए, कीबोर्ड का इस्तेमाल करने वाला व्यक्ति भी सोर्स के क्रम का पालन करेगा. आम तौर पर ऐसा करना सही होता है. कॉन्टेंट, स्क्रीन रीडर, और सीएसएस वाले किसी भी डिवाइस के रीडिंग मोड प्रज़ेंटेशन के लिए, दस्तावेज़ का सही सोर्स क्रम ज़रूरी होता है. हालांकि, सीएसएस, फ़्लेक्सबॉक्स और ग्रिड खास तौर पर ऐसे लेआउट बना सकते हैं जिनमें लेआउट, एक विज़ुअल रीडिंग ऑर्डर तय करता है और यह दिए गए सोर्स से अलग होता है.
उदाहरण के लिए, फ़्लेक्सिबल आइटम पर order प्रॉपर्टी का इस्तेमाल करने से, लेआउट का ऑर्डर बदलता है, लेकिन सोर्स में उसका ऑर्डर नहीं बदलता.
ग्रिड लेआउट का इस्तेमाल करने से, चुने गए लेआउट के तरीके के लिए टैब का क्रम बिगड़ जाना संभव है. उदाहरण के लिए, grid-auto-flow: dense का इस्तेमाल करते समय, जो आइटम का बिना किसी क्रम के लेआउट का ऑर्डर बनाता है.
कोई डेवलपर, ग्रिड पर आइटम को सोर्स में बताए गए क्रम के मुताबिक अलग क्रम में रखकर भी इस डिसकनेक्ट की वजह बन सकता है.
प्रस्तावित समाधान
सीएसएस वर्किंग ग्रुप इस समस्या को हल करने के लिए प्रस्ताव पेश कर रहा है. इस तरीके के बारे में डेवलपर और सुलभता समुदाय के सुझाव, शिकायत या राय हमारे लिए मायने रखते हैं.
reading-order: auto का इस्तेमाल करके, किसी भी क्रम में लगाए गए लेआउट को फ़ॉलो किया जा रहा है
जब लेआउट को किसी भी क्रम में लगाया जाता है, जैसे कि ग्रिड लेआउट में सघन पैकिंग का इस्तेमाल करते समय, तो हो सकता है कि आप चाहते हों कि ब्राउज़र, सोर्स क्रम के बजाय लेआउट को फ़ॉलो करे. ऐसा करने के लिए, फ़्लेक्स या ग्रिड आइटम में auto की वैल्यू वाली reading-order प्रॉपर्टी होनी चाहिए.
इस सीएसएस की वजह से, पढ़ने का क्रम उन आइटम के प्लेसमेंट को फ़ॉलो करेगा जिन्हें grid-auto-flow: dense की वजह से बहुत ज़्यादा पैक किया गया है.
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
reading-order-items का इस्तेमाल करके, बिना किसी क्रम के लेआउट का इस्तेमाल करना
कुछ ग्रिड और फ़्लेक्स लेआउट में, लेआउट का क्रम आसानी से समझा जा सकता है. उदाहरण के लिए, किसी ऐसे फ़्लेक्सिबल लेआउट में, जो आइटम का क्रम बदलने के लिए order प्रॉपर्टी का इस्तेमाल करता है, उसमें लेआउट का क्रम order प्रॉपर्टी से तय होता है. दूसरे लेआउट में, यह कम समझ में आता है कि सबसे सही लेआउट का क्रम क्या है. इसलिए, एक से ज़्यादा विकल्प हो सकते हैं. इसलिए, बिना किसी क्रम के लेआउट का इस्तेमाल करते समय, आपको कंटेनर में grid-order-items प्रॉपर्टी जोड़नी होगी. इस प्रॉपर्टी में कीवर्ड वैल्यू का इस्तेमाल करना होगा, ताकि यह पता चल सके कि लेआउट ऑर्डर का इस्तेमाल किस मकसद से किया गया है.
इस उदाहरण में, row-reverse का इस्तेमाल करके एक फ़्लेक्सिबल लेआउट दिखाया गया है. फ़्लेक्सिबल आइटम में reading-order: auto और फ़्लेक्स कंटेनर reading-order-items: flex flow से यह पता चलता है कि हम चाहते हैं कि रीडिंग ऑर्डर भी flex-flow दिशा के मुताबिक हो, न कि विज़ुअल ऑर्डर का पालन करने के लिए (जिसे हम flex visual के साथ दिखा सकते हैं).
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
इस अगले उदाहरण में, grid-template-areas का इस्तेमाल करके एक ग्रिड लेआउट बनाया गया है. साथ ही, आइटम को सोर्स क्रम में एक अलग लेआउट के क्रम में रखा गया है. reading-order-items प्रॉपर्टी का इस्तेमाल यह बताने के लिए किया जाता है कि हमें लेआउट के क्रम का पालन करना चाहिए और अगली लाइन पर जाने से पहले हर लाइन को घुमाना चाहिए. (grid column उल्टी दिशा को दिखाता है).
.wrapper {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-areas:
"a a b b b b"
"c c d d e e"
"f f g g h h";
reading-order-items: grid rows;
}
.a {
grid-area: a;
reading-order: auto;
}
क्या इसका मतलब यह है कि सोर्स ऑर्डर से कोई फ़र्क़ नहीं पड़ता?
नहीं, सोर्स ऑर्डर अब भी मायने रखता है. इस सुविधा का इस्तेमाल सिर्फ़ उन खास स्थितियों में किया जाना चाहिए जहां पढ़ने का क्रम, सोर्स से अलग हो सकता है. उदाहरण के लिए, ऐसे लेआउट के तरीकों का इस्तेमाल करते समय जिनकी वजह से यह डिसकनेक्ट हो सकता है. जैसे, घनी ग्रिड पैकिंग या जब किसी खास ब्रेकपॉइंट पर कोई अलग लेआउट ऑर्डर सही लगे.
इन प्रॉपर्टी का इस्तेमाल करते समय, किसी क्रम का इस्तेमाल करके सोर्स दस्तावेज़ बनाएं. इससे यह पता चलेगा कि पेज को बिना सीएसएस के रेंडर किया गया था या नहीं. इन प्रॉपर्टी को सिर्फ़ उन जगहों और ब्रेकपॉइंट में जोड़ें जहां ये ज़रूरी हैं.
क्या ऑथरिंग टूल को इन प्रॉपर्टी को लागू करना चाहिए?
ऑथरिंग टूल, लोगों को एलिमेंट को खींचकर और छोड़कर ग्रिड लेआउट बनाने की सुविधा देते हैं. इससे लोगों को बेहतर सोर्स दस्तावेज़ बनाने के लिए बढ़ावा मिलता है. इसलिए, ज़्यादातर मामलों में इन प्रॉपर्टी को डिसकनेक्ट से निपटने के लेज़ी तरीके के तौर पर इस्तेमाल करने के बजाय, लेआउट के क्रम के आधार पर सोर्स को फिर से क्रम में लगाना ज़्यादा सही होगा.
कृपया इस प्रस्ताव के बारे में अपना सुझाव/राय दें या शिकायत करें
हम इस बारे में सुझाव या राय इकट्ठा करने के लिए उत्सुक हैं. खास तौर पर, अगर आपके पास इस्तेमाल का कोई ऐसा उदाहरण है जिसे हल नहीं किया जा सकता या आपको इस तरीके को लेकर सुलभता की चिंता है, तो कृपया सीएसएस वर्किंग ग्रुप को इसके बारे में बताएं.
एक थ्रेड पहले से चल रही है. इसमें, इस प्रोग्राम को इस्तेमाल करने के कई उदाहरण और विचार शामिल हैं. यह थ्रेड, टिप्पणी करने और इस प्रस्ताव में शामिल संभावित समस्याओं को हाइलाइट करने का बेहतरीन प्लैटफ़ॉर्म है. ध्यान दें कि मौजूदा प्रपोज़ल, थ्रेड शुरू करने वाले मेरे शुरुआती प्रस्ताव से बहुत अलग है. इसमें दिलचस्पी रखने वाले लोग ऐसी सभी बातचीत का आनंद ले सकते हैं जिससे हम आज यहां हैं. यह इस बात का अच्छा उदाहरण है कि सीएसएस वर्किंग ग्रुप में प्रस्तावों पर किस तरह काम किया जाता है, ताकि इसे ब्राउज़र में लागू किया जा सके.
थंबनेल की इमेज पैट्रिक टोमासो की है. सुझाव और समीक्षा के लिए क्रिस हैरलसन, टैब एटकिन्स, और इयान किलपैट्रिक को धन्यवाद.