CSS मल्टी-कॉलम जनरेटर

CSS मल्टी-कॉलम लेआउट क्या है

CSS मल्टी-कॉलम लेआउट (W3C «CSS Multi-column Layout Module Level 1» विनिर्देश) एक ही एलिमेंट के कंटेंट को दो या अधिक कॉलमों में स्वतः पुनः वितरित करता है, ठीक उसी तरह जैसे अख़बारों और पत्रिकाओं की छपाई सदियों से लंबे टेक्स्ट को संभालती है। आप घोषित करते हैं कि कितने कॉलम चाहिए (या प्रत्येक कॉलम कितना चौड़ा हो), और ब्राउज़र कंटेंट को ऊपर से नीचे, बाएँ से दाएँ वितरित करता है, पंक्तियों की गिनती संतुलित करते हुए ताकि हर कॉलम लगभग एक ही ऊँचाई पर समाप्त हो। मॉड्यूल अप्रैल 2011 में W3C Candidate Recommendation बना और Firefox 3.5 (जून 2009) से IE 10 (अक्टूबर 2012) के बीच ब्राउज़रों में उपयोगी रूप में आ गया। यह एक दशक से अधिक समय से वेब प्लैटफ़ॉर्म की आधारभूत विशेषता है। Flexbox या Grid के विपरीत (जो अलग-अलग चाइल्ड एलिमेंट्स को ज्ञात स्थानों पर संरेखित करते हैं) मल्टी-कॉलम कंटेंट को एक एकल सतत प्रवाह की तरह मानता है जिसे ब्राउज़र उपलब्ध ऊँचाई के आधार पर कॉलमों में काटता है।

CSS कॉलम कब सही उपकरण हैं

• चौड़ी स्क्रीन पर लंबा लेख-टेक्स्ट। लगभग 75 अक्षर से अधिक चौड़ाई वाले एकल-कॉलम टेक्स्ट को पढ़ना आँखों को थका देता है, पाठक की दृष्टि को अगली पंक्ति का आरंभ खोजने के लिए बहुत दूर तक जाना पड़ता है। दो-कॉलम लेआउट उसी ऊर्ध्वाधर स्थान का उपयोग करते हुए पंक्ति की लंबाई आधी कर देता है, और चौड़ी स्क्रीनों पर पठनीयता को नाटकीय रूप से बेहतर बना देता है।
• परिभाषा सूचियाँ और शब्दावली। छोटे-छोटे आइटमों की लंबी वर्णमाला सूचियाँ कई कॉलमों में स्वाभाविक रूप से लिपटती हैं, हाथ से संतुलित करने की ज़रूरत के बिना।
• फ़ुटर लिंक सूचियाँ। दर्जनों लिंक वाला क्लासिक «साइट मैप» फ़ुटर (श्रेणियाँ नीचे की ओर, लिंक किनारे) column-count के लिए स्वाभाविक रूप से उपयुक्त है।
• विशेषता सूचियाँ और बुलेटेड गणनाएँ। लंबी सूची जो एक कॉलम में अनंत स्क्रॉल करती रहेगी, दो या तीन कॉलमों में बेहतर पढ़ी जाती है।
• प्रिंट स्टाइलशीट। मल्टी-कॉलम लेआउट उन कुछ CSS विशेषताओं में से एक है जो प्रिंट में सुंदरता से अनुवादित होती हैं, वही प्रारूप जिसे अख़बारों ने अपने आविष्कार के बाद से उपयोग किया है।

column-count बनाम column-width, सबसे महत्वपूर्ण भेद

कॉलम निर्दिष्ट करने के दो तरीक़े, और चुनाव रिस्पॉन्सिव डिज़ाइन के लिए मायने रखता है। column-count: 3 तीन कॉलमों को हार्ड-कोड करता है, किसी भी व्यूपोर्ट चौड़ाई पर ब्राउज़र ठीक तीन कॉलम बनाता है, जो कंटेनर के संकीर्ण होते ही और संकीर्ण होते जाते हैं। फ़ोन पर तीन कॉलम अपठनीय पतली पट्टियाँ बन जाते हैं। column-width: 250px इसके बजाय «कम से कम 250 पिक्सेल चौड़े» कॉलमों की माँग करता है; ब्राउज़र गणना करता है कि कंटेनर में कितने फ़िट होते हैं और व्यूपोर्ट बदलने पर स्वतः पुनर्व्यवस्थित कर देता है। चौड़ी स्क्रीनें कई कॉलम पाती हैं, संकीर्ण कुछ या एक, एक भी मीडिया क्वेरी के बिना। संयुक्त पैटर्न आधुनिक सर्वोत्तम पद्धति है: columns: 250px 4 (column-width प्लस column-count का शॉर्टहैंड) का अर्थ है «250 पिक्सेल चौड़े कॉलम, लेकिन कभी 4 से अधिक नहीं।» ब्राउज़र चौड़े डेस्कटॉप पर 4 कॉलम बनाता है, टैबलेट पर कम, फ़ोन पर एक, स्वतः रिस्पॉन्सिव। अधिकांश प्रोडक्शन CSS इसकी मज़बूती के लिए इसी संयुक्त रूप का उपयोग करता है।

कंटेंट कहाँ टूटता है यह नियंत्रित करना

डिफ़ॉल्ट रूप से ब्राउज़र कॉलमों को वहीं तोड़ता है जहाँ वह पहुँचता है, जो कभी-कभी शीर्षक को उसके पहले अनुच्छेद से अलग कर देता है, या एक कार्ड को बीच से तोड़ देता है। CSS प्रॉपर्टी break-inside: avoid (CSS Fragmentation Module Level 3) ब्राउज़र को कहती है «इस एलिमेंट को कॉलमों के बीच मत बाँटो», आम तौर पर कार्डों, चित्रों और किसी भी ऐसे कंटेंट पर लागू की जाती है जिसे एक साथ रहना चाहिए। break-before: column एक एलिमेंट से पहले कॉलम ब्रेक मजबूर करती है, «हर अनुभाग नए कॉलम में शुरू करो» के लिए उपयोगी। column-span: all शीर्षक या कॉलआउट को सभी कॉलमों की पूरी चौड़ाई में फैला देती है, कॉलम प्रवाह से बाहर निकलते हुए, मल्टी-कॉलम बॉडी के ऊपर लेख के शीर्षक के लिए सामान्य।

ध्यान देने योग्य गड़बड़ियाँ

मल्टी-कॉलम लेआउट में सूक्ष्म अन्योन्यक्रियाएँ हैं जिन्हें जानना ज़रूरी है। स्क्रीन रीडर पर पढ़ने का क्रम DOM क्रम का अनुसरण करता है, जो आम तौर पर दृश्य ऊपर-से-नीचे कॉलम क्रम के समान होता है, लेकिन सहायक तकनीक जटिल लेआउट पर कभी-कभी भ्रमित हो सकती है। मल्टी-कॉलम के साथ प्रिंट पैजिनेशन पृष्ठ ब्रेक के बीच अजीब कॉलम-संतुलन उत्पन्न कर सकता है; अगर मुद्रित आउटपुट आपके लिए मायने रखता है तो प्रिंट स्टाइलशीट के साथ परीक्षण करें। लंबा कंटेंट नीचे की ओर भरता है: यदि आप मल्टी-कॉलम कंटेनर को कंटेंट की आवश्यकता से कम स्थिर ऊँचाई देते हैं, कंटेंट ओवरफ़्लो हो जाता है; यदि आप ऊँचाई पर बंदिश नहीं लगाते, ब्राउज़र कॉलमों को लगभग समान लंबाई पर संतुलित करता है। एंकर किया हुआ कंटेंट (फ़ॉर्म, ऐसे इंटरैक्टिव एलिमेंट जिन्हें एक जगह रहना चाहिए) कॉलमों में अच्छा काम नहीं करता क्योंकि उपयोगकर्ता को नहीं पता कहाँ देखना है। एक ही स्तर पर Grid या Flexbox के साथ मिलाना अप्रत्याशित परिणाम देता है, प्रति कंटेनर एक ही लेआउट विधि चुनें।

जनरेट किए गए CSS गुण

• column-count: स्पष्ट कॉलम संख्या (निश्चित संख्या, व्यूपोर्ट के अनुसार ढलती नहीं)
• column-width: न्यूनतम कॉलम चौड़ाई (ब्राउज़र गणना करता है कि कितने फ़िट होते हैं, पूर्णतः रिस्पॉन्सिव)
• column-gap: कॉलमों के बीच क्षैतिज स्थान; डिफ़ॉल्ट 1em आम तौर पर ठीक रहता है
• column-rule: कॉलमों के बीच सजावटी ऊर्ध्वाधर रेखा (चौड़ाई, शैली, रंग, बॉर्डर की तरह)
• column-span: all: शीर्षक या कॉलआउट पर लागू, सभी कॉलमों की पूरी चौड़ाई में फैलाने के लिए