हमें लेआउट के तरीकों से जुड़ी समस्या के संभावित समाधान के बारे में आपकी राय चाहिए. इस समस्या में, आइटम को ऐसे क्रम में व्यवस्थित किया जाता है जो दस्तावेज़ के सोर्स से जुड़ा नहीं होता.
सीएसएस वर्किंग ग्रुप, ऐसी स्थिति के लिए समाधान पर काम कर रहा है जहां लेआउट का कोई तरीका, आइटम को ऐसे क्रम में व्यवस्थित कर सकता है जो सोर्स से जुड़ा नहीं है. इसलिए, यह दस्तावेज़ के पढ़ने और फ़ोकस करने के क्रम से भी जुड़ा नहीं है. इस लेख में, समस्या और उसके समाधान के बारे में बताया गया है. हमें आपके सुझाव, राय या शिकायत का इंतज़ार रहेगा.
समस्या
किसी एचटीएमएल दस्तावेज़ को पढ़ने का क्रम, सोर्स ऑर्डर के हिसाब से होता है. इसका मतलब है कि स्क्रीन रीडर, दस्तावेज़ को उसी क्रम में पढ़ेगा जिस क्रम में वह सोर्स में मौजूद है. साथ ही, कीबोर्ड का इस्तेमाल करके दस्तावेज़ में टैब करने वाला व्यक्ति भी सोर्स के क्रम का पालन करेगा. आम तौर पर, यह सही होता है. साथ ही, दस्तावेज़ के लिए सोर्स का सही क्रम होना ज़रूरी है. इससे कॉन्टेंट को रीडिंग मोड में दिखाने, स्क्रीन रीडर, और सीमित सीएसएस वाले किसी भी डिवाइस पर कॉन्टेंट को सही तरीके से दिखाया जा सकता है. हालांकि, सीएसएस और खास तौर पर फ़्लेक्सबॉक्स और ग्रिड की मदद से ऐसे लेआउट बनाए जा सकते हैं जिनमें लेआउट, सोर्स से अलग विज़ुअल रीडिंग ऑर्डर तय करता है.
उदाहरण के लिए, फ़्लेक्स आइटम पर order प्रॉपर्टी का इस्तेमाल करने से, लेआउट का क्रम बदल जाता है, लेकिन सोर्स का क्रम नहीं बदलता.
ग्रिड लेआउट का इस्तेमाल करने पर, चुने गए लेआउट के तरीके से टैब का क्रम गड़बड़ा सकता है. उदाहरण के लिए, grid-auto-flow: dense का इस्तेमाल करने पर, आइटम के लेआउट का क्रम गड़बड़ा जाता है.
डेवलपर भी इस समस्या की वजह बन सकता है. ऐसा तब होता है, जब वह सोर्स में दिए गए क्रम से अलग क्रम में आइटम को ग्रिड पर रखता है.
सुझाया गया समाधान
सीएसएस वर्किंग ग्रुप, इस समस्या को हल करने के लिए एक सुझाव दे रहा है. साथ ही, वह इस तरीके के बारे में डेवलपर और ऐक्सेसिबिलिटी कम्यूनिटी से सुझाव/राय/शिकायत पाना चाहता है.
reading-order: auto के साथ रैंडमाइज़ किए गए लेआउट का पालन करना
कुछ स्थितियों में लेआउट का क्रम रैंडम होता है. जैसे, ग्रिड लेआउट में डेंस पैकिंग का इस्तेमाल करते समय. ऐसे में, आपको शायद यह चाहिए कि ब्राउज़र, सोर्स के क्रम के बजाय लेआउट को फ़ॉलो करे. इसके लिए, फ़्लेक्स या ग्रिड आइटम में reading-order प्रॉपर्टी होनी चाहिए. इसकी वैल्यू auto होनी चाहिए.
नीचे दी गई सीएसएस की वजह से, पढ़ने का क्रम उन आइटम के प्लेसमेंट के हिसाब से होगा जिन्हें 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;
}
क्या इसका मतलब यह है कि सोर्स के क्रम से कोई फ़र्क़ नहीं पड़ता?
नहीं, सोर्स के क्रम से अब भी फ़र्क़ पड़ता है. इस सुविधा का इस्तेमाल सिर्फ़ उन खास स्थितियों में किया जाना चाहिए जहां पढ़ने का क्रम, सोर्स से अलग हो सकता है. उदाहरण के लिए, लेआउट के ऐसे तरीकों का इस्तेमाल करते समय जिनसे यह समस्या हो सकती है. जैसे, डेंस ग्रिड पैकिंग या जब किसी ब्रेकपॉइंट पर लेआउट का अलग क्रम सही हो.
इन प्रॉपर्टी का इस्तेमाल करते समय, ऐसा सोर्स दस्तावेज़ बनाएं जिसमें सीएसएस के बिना पेज रेंडर होने पर, सही क्रम में जानकारी दिखे. इन प्रॉपर्टी को सिर्फ़ उन जगहों और ब्रेकपॉइंट पर जोड़ें जहां इनकी ज़रूरत है.
क्या कॉन्टेंट बनाने वाले टूल को इन प्रॉपर्टी को लागू करना चाहिए?
ऑथरिंग टूल ऐसे होने चाहिए जो लोगों को एलिमेंट को खींचकर छोड़ने की सुविधा दें, ताकि वे ग्रिड लेआउट बना सकें. साथ ही, उन्हें सोर्स दस्तावेज़ बनाने के लिए भी बढ़ावा देना चाहिए. इसलिए, ज़्यादातर मामलों में लेआउट के क्रम के आधार पर सोर्स को फिर से क्रम में लगाना ज़्यादा सही होगा. इसके बजाय, इन प्रॉपर्टी का इस्तेमाल डिसकनेक्ट की समस्या को हल करने के लिए नहीं करना चाहिए.
कृपया इस प्रस्ताव के बारे में अपने सुझाव/राय दें या शिकायत करें
हमें इस बारे में आपके सुझाव/राय या शिकायत का इंतज़ार रहेगा. खास तौर पर, अगर आपको लगता है कि यह तरीका आपके इस्तेमाल के उदाहरण के लिए सही नहीं है या आपको इस तरीके से ऐक्सेसिबिलिटी से जुड़ी कोई समस्या है, तो कृपया CSS वर्किंग ग्रुप को बताएं.
इस बारे में एक थ्रेड चल रही है. इसमें इस सुविधा के इस्तेमाल के कई उदाहरण दिए गए हैं. साथ ही, इसे इस्तेमाल करने के तरीके के बारे में भी बताया गया है. उस थ्रेड में टिप्पणियां जोड़ी जा सकती हैं. साथ ही, इस प्रस्ताव से जुड़ी संभावित समस्याओं को हाइलाइट किया जा सकता है. ध्यान दें कि मौजूदा प्रस्ताव, मेरे शुरुआती प्रस्ताव से काफ़ी अलग है. दिलचस्पी रखने वाले लोग, इस पूरी बातचीत का आनंद ले सकते हैं. इससे उन्हें यह समझने में मदद मिलेगी कि सीएसएस वर्किंग ग्रुप में, ब्राउज़र में लागू किए जा सकने वाले प्रस्तावों पर कैसे काम किया जाता है.
थंबनेल इमेज, पैट्रिक टोमासो ने बनाई है. सुझाव देने और समीक्षा करने के लिए, क्रिस हैरेलसन, टैब एटकिंस, और इयान किलपैट्रिक का धन्यवाद.