HTML + CSS के साथ सामग्री की एक आदर्श तालिका

इस साल की शुरुआत में, मैंने नामक एक ईबुक स्वयं प्रकाशित की थी जावास्क्रिप्ट वादों को समझना (डाउनलोड के लिए मुफ्त) हालांकि मेरा इसे प्रिंट बुक में बदलने का कोई इरादा नहीं था, फिर भी काफी लोग प्रिंट संस्करण के बारे में पूछताछ करने के लिए पहुंचे, जिसे मैंने स्वयं प्रकाशित करने का फैसला किया। मैंने सोचा कि एचटीएमएल और सीएसएस का उपयोग करने के लिए यह एक आसान अभ्यास होगा एक पीडीएफ जेनरेट करें और फिर इसे प्रिंटर पर भेज दें। मुझे इस बात का एहसास नहीं था कि मेरे पास एक प्रिंट बुक के एक महत्वपूर्ण हिस्से का जवाब नहीं था: सामग्री की तालिका।

सामग्री की तालिका का श्रृंगार

इसके मूल में, सामग्री की एक तालिका काफी सरल है। प्रत्येक पंक्ति किसी पुस्तक या वेबपेज के एक भाग का प्रतिनिधित्व करती है और इंगित करती है कि आपको वह सामग्री कहाँ मिल सकती है। आमतौर पर, पंक्तियों में तीन भाग होते हैं:

1. अध्याय या खंड का शीर्षक
2. लीडर (अर्थात वे बिंदु, डैश या रेखाएं) जो शीर्षक को पृष्ठ संख्या से दृष्टिगत रूप से जोड़ते हैं
3. पेज नंबर

Microsoft Word या Google डॉक्स जैसे वर्ड प्रोसेसिंग टूल के अंदर सामग्री की एक तालिका उत्पन्न करना आसान है, लेकिन क्योंकि मेरी सामग्री मार्कडाउन में थी और फिर HTML में बदल गई, यह मेरे लिए एक अच्छा विकल्प नहीं था। मैं कुछ स्वचालित चाहता था जो प्रिंट के लिए उपयुक्त प्रारूप में सामग्री की तालिका उत्पन्न करने के लिए एचटीएमएल के साथ काम करेगा। मैं यह भी चाहता था कि प्रत्येक पंक्ति एक लिंक हो ताकि दस्तावेज़ के चारों ओर नेविगेट करने के लिए वेबपृष्ठों और पीडीएफ में इसका उपयोग किया जा सके। मैं शीर्षक और पृष्ठ संख्या के बीच डॉट लीडर भी चाहता था।

और इसलिए मैंने शोध करना शुरू किया।

एचटीएमएल और सीएसएस के साथ सामग्री की एक तालिका बनाने पर मुझे दो उत्कृष्ट ब्लॉग पोस्ट मिले। पहला था "अपने HTML से सामग्री तालिका बनाएं" जूली ब्लैंक द्वारा। जूली पर काम किया पेजेडजेएस, वेब ब्राउज़र में गुम पृष्ठांकित मीडिया सुविधाओं के लिए एक पॉलीफ़िल जो प्रिंट के लिए दस्तावेज़ों को ठीक से प्रारूपित करती है। मैंने जूली के उदाहरण से शुरुआत की, लेकिन पाया कि यह मेरे लिए काफी काम नहीं आया। इसके बाद, मुझे क्रिस्टोफ़ ग्रैबो मिला "सीएसएस के साथ उत्तरदायी टीओसी लीडर लाइन्स" पोस्ट, जिसने संरेखण को आसान बनाने के लिए सीएसएस ग्रिड (जूली के फ्लोट-आधारित दृष्टिकोण के विपरीत) का उपयोग करने की अवधारणा पेश की। एक बार फिर, हालांकि, उनका दृष्टिकोण मेरे उद्देश्यों के लिए बिल्कुल सही नहीं था।

हालाँकि, इन दो पोस्टों को पढ़ने के बाद, मुझे लगा कि मुझे लेआउट के मुद्दों की अच्छी समझ है जिसे मैं स्वयं शुरू कर सकता हूँ। मैंने दोनों ब्लॉग पोस्ट के टुकड़ों का उपयोग किया और साथ ही साथ कुछ नए HTML और CSS अवधारणाओं को एक परिणाम के साथ आने के लिए जोड़ा जिससे मैं खुश हूं।

सही मार्कअप चुनना

सामग्री तालिका के लिए सही मार्कअप का निर्णय लेते समय, मैंने मुख्य रूप से सही शब्दार्थ के बारे में सोचा। मूल रूप से, सामग्री की एक तालिका एक शीर्षक (अध्याय या उपखंड) के बारे में एक पृष्ठ संख्या से जुड़ी होती है, लगभग एक कुंजी-मूल्य जोड़ी की तरह। इससे मुझे दो विकल्प मिले:

• एक विकल्प तालिका का उपयोग करना है (<table>) शीर्षक के लिए एक कॉलम और पेज के लिए एक कॉलम के साथ।
• फिर अक्सर अप्रयुक्त और भूली हुई परिभाषा सूची होती है (<dl>) तत्व। यह कुंजी-मूल्य मानचित्र के रूप में भी कार्य करता है। तो, एक बार फिर, शीर्षक और पृष्ठ संख्या के बीच संबंध स्पष्ट होगा।

इनमें से कोई भी अच्छे विकल्प की तरह लग रहा था जब तक कि मुझे एहसास नहीं हुआ कि वे वास्तव में केवल सामग्री की एकल-स्तरीय तालिकाओं के लिए काम करते हैं, अर्थात्, केवल अगर मैं केवल अध्याय नामों के साथ सामग्री की एक तालिका रखना चाहता हूं। अगर मैं सामग्री की तालिका में उपखंड दिखाना चाहता था, हालांकि, मेरे पास कोई अच्छा विकल्प नहीं था। पदानुक्रमित डेटा के लिए तालिका तत्व महान नहीं हैं, और जबकि परिभाषा सूचियों को तकनीकी रूप से नेस्ट किया जा सकता है, शब्दार्थ सही नहीं लग रहा था। इसलिए, मैं वापस ड्राइंग बोर्ड पर गया।

मैंने जूली के दृष्टिकोण का निर्माण करने और एक सूची का उपयोग करने का निर्णय लिया; हालाँकि, मैंने एक आदेशित सूची का विकल्प चुना (<ol>) एक अनियंत्रित सूची के बजाय (<ul>) मुझे लगता है कि इस मामले में एक आदेशित सूची अधिक उपयुक्त है। सामग्री की एक तालिका अध्यायों और उपशीर्षकों की एक सूची का प्रतिनिधित्व करती है जिस क्रम में वे सामग्री में दिखाई देते हैं। आदेश मायने रखता है और मार्कअप में खो नहीं जाना चाहिए।

दुर्भाग्य से, एक आदेशित सूची का उपयोग करने का अर्थ है शीर्षक और पृष्ठ संख्या के बीच अर्थ संबंधी संबंध खोना, इसलिए मेरा अगला कदम प्रत्येक सूची आइटम के भीतर उस संबंध को फिर से स्थापित करना था। इसे हल करने का सबसे आसान तरीका है कि पेज नंबर से पहले "पेज" शब्द डालें। इस तरह, पाठ के सापेक्ष संख्या का संबंध स्पष्ट है, यहां तक ​​कि बिना किसी अन्य दृश्य भेद के भी।

यहाँ एक साधारण HTML कंकाल है जो मेरे मार्कअप का आधार बना:

<ol class="toc-list"> <li> <a href="#link_to_heading"> <span class="title">Chapter or subsection title</span> <span class="page">Page 1</span> </a> <ol> <!-- subsection items --> </ol> </li>
</ol>

सामग्री की तालिका में शैलियों को लागू करना

एक बार जब मैंने मार्कअप स्थापित कर लिया था जिसका मैंने उपयोग करने की योजना बनाई थी, तो अगला कदम कुछ शैलियों को लागू करना था।

सबसे पहले, मैंने स्वत: उत्पन्न संख्याएं हटा दीं। आप चाहें तो अपने प्रोजेक्ट में ऑटोजेनरेटेड नंबर रखना चुन सकते हैं, लेकिन किताबों में अध्यायों की सूची में बिना नंबर वाले फोरवर्ड और आफ्टरवर्ड्स शामिल होना आम बात है, जिससे ऑटोजेनरेटेड नंबर गलत हो जाते हैं।

मेरे उद्देश्य के लिए, मैं मैन्युअल रूप से अध्याय संख्याओं को भरूंगा और फिर लेआउट को समायोजित करूंगा ताकि शीर्ष-स्तरीय सूची में कोई पैडिंग न हो (इस प्रकार इसे पैराग्राफ के साथ संरेखित करना) और प्रत्येक एम्बेडेड सूची दो रिक्त स्थान से इंडेंट हो। मैंने a . का उपयोग करना चुना 2ch पैडिंग वैल्यू क्योंकि मुझे अभी भी पूरा यकीन नहीं था कि मैं किस फॉन्ट का इस्तेमाल करूंगा। ch लम्बाई इकाई पैडिंग को एक चरित्र की चौड़ाई के सापेक्ष होने की अनुमति देती है - कोई फर्क नहीं पड़ता कि किस फ़ॉन्ट का उपयोग किया जाता है - एक पूर्ण पिक्सेल आकार के बजाय जो असंगत दिखने को हवा दे सकता है।

यहां वह सीएसएस है जिसके साथ मैं समाप्त हुआ:

.toc-list, .toc-list ol { list-style-type: none;
} .toc-list { padding: 0;
} .toc-list ol { padding-inline-start: 2ch;
}

सारा सूईदान मुझे बताया कि वेबकिट ब्राउज़र सूची शब्दार्थ को हटाते हैं जब list-style-type is none, तो मुझे जोड़ने की जरूरत है role="list" इसे संरक्षित करने के लिए HTML में:

<ol class="toc-list" role="list"> <li> <a href="#link_to_heading"> <span class="title">Chapter or subsection title</span> <span class="page">Page 1</span> </a> <ol role="list"> <!-- subsection items --> </ol> </li>
</ol>

शीर्षक और पृष्ठ संख्या को स्टाइल करना

मेरी पसंद के अनुसार स्टाइल की गई सूची के साथ, यह एक व्यक्तिगत सूची आइटम को स्टाइल करने के लिए आगे बढ़ने का समय था। विषय-सूची में प्रत्येक आइटम के लिए, शीर्षक और पृष्ठ संख्या एक ही पंक्ति में होनी चाहिए, शीर्षक बाईं ओर और पृष्ठ संख्या दाईं ओर संरेखित होनी चाहिए।

आप सोच रहे होंगे, "कोई बात नहीं, फ्लेक्सबॉक्स यही है!" तुम गलत नहीं हो! फ्लेक्सबॉक्स वास्तव में सही शीर्षक-पृष्ठ संरेखण प्राप्त कर सकता है। लेकिन जब नेताओं को जोड़ा जाता है तो कुछ मुश्किल संरेखण मुद्दे होते हैं, इसलिए मैंने ग्रिड का उपयोग करके क्रिस्टोफ के दृष्टिकोण के साथ जाने का विकल्प चुना, जो एक बोनस के रूप में यह मल्टीलाइन खिताब के साथ भी मदद करता है। यहाँ एक व्यक्तिगत आइटम के लिए CSS है:

.toc-list li > a { text-decoration: none; display: grid; grid-template-columns: auto max-content; align-items: end;
} .toc-list li > a > .page { text-align: right;
}

ग्रिड में दो कॉलम होते हैं, जिनमें से पहला है auto-कंटेनर की पूरी चौड़ाई को भरने के लिए आकार दिया गया है, दूसरे कॉलम को घटा दिया गया है, जिसका आकार max-content. पृष्ठ संख्या दाईं ओर संरेखित है, जैसा कि सामग्री की तालिका में पारंपरिक है।

इस बिंदु पर मैंने जो एकमात्र अन्य परिवर्तन किया, वह था "पेज" टेक्स्ट को छिपाना। यह स्क्रीन रीडर्स के लिए मददगार है लेकिन नेत्रहीन अनावश्यक है, इसलिए मैंने a . का उपयोग किया परंपरागत visually-hidden कक्षा इसे देखने से छिपाने के लिए:

.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(100%); height: 1px; overflow: hidden; position: absolute; width: 1px; white-space: nowrap;
}

और, ज़ाहिर है, उस वर्ग का उपयोग करने के लिए HTML को अद्यतन करने की आवश्यकता है:

<ol class="toc-list" role="list"> <li> <a href="#link_to_heading"> <span class="title">Chapter or subsection title</span> <span class="page"><span class="visually-hidden">Page</span> 1</span> </a> <ol role="list"> <!-- subsection items --> </ol> </li>
</ol>

इस नींव के साथ, मैं शीर्षक और पृष्ठ के बीच के नेताओं को संबोधित करने के लिए आगे बढ़ा।

डॉट लीडर बनाना

प्रिंट मीडिया में नेता इतने आम हैं कि आप सोच रहे होंगे कि CSS पहले से ही इसका समर्थन क्यों नहीं करता है? उत्तर है: ऐसा होता है। एक प्रकार का।

वास्तव में एक है leader() में परिभाषित समारोह पेजेड मीडिया विनिर्देश के लिए सीएसएस जेनरेट की गई सामग्री. हालांकि, पेजेड मीडिया विनिर्देशों में से अधिकांश के साथ, यह फ़ंक्शन किसी भी ब्राउज़र में लागू नहीं किया गया है, इसलिए इसे एक विकल्प के रूप में छोड़कर (कम से कम उस समय जब मैं इसे लिख रहा हूं)। यह सूचीबद्ध भी नहीं है caniuse.com, शायद इसलिए कि किसी ने इसे लागू नहीं किया है और ऐसी कोई योजना या संकेत नहीं हैं जो वे करेंगे।

सौभाग्य से, जूली और क्रिस्टोफ दोनों ने पहले ही इस समस्या को अपने-अपने पदों में संबोधित कर लिया है। डॉट लीडर डालने के लिए, वे दोनों इस्तेमाल करते थे a ::after इसके साथ छद्म तत्व content संपत्ति बिंदुओं की एक बहुत लंबी स्ट्रिंग पर सेट है, जैसे:

.toc-list li > a > .title { position: relative; overflow: hidden;
} .toc-list li > a .title::after { position: absolute; padding-left: .25ch; content: " . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . "; text-align: right;
}

RSI ::after छद्म तत्व को पृष्ठ के प्रवाह से बाहर निकालने और अन्य पंक्तियों में लपेटने से बचने के लिए एक पूर्ण स्थिति पर सेट किया गया है। पाठ को दाईं ओर संरेखित किया गया है क्योंकि हम चाहते हैं कि प्रत्येक पंक्ति के अंतिम बिंदु पंक्ति के अंत में संख्या पर फ्लश करें। (इसकी जटिलताओं के बारे में बाद में।) .title तत्व को एक सापेक्ष स्थिति के लिए सेट किया गया है, इसलिए ::after छद्म तत्व अपने बॉक्स से बाहर नहीं निकलता है। इस बीच, overflow छिपा हुआ है इसलिए वे सभी अतिरिक्त बिंदु अदृश्य हैं। परिणाम डॉट नेताओं के साथ सामग्री की एक सुंदर तालिका है।

हालाँकि, कुछ और है जिस पर विचार करने की आवश्यकता है।

सारा ने मुझे यह भी बताया कि उन सभी बिंदुओं को स्क्रीन पाठकों के लिए टेक्स्ट के रूप में गिना जाता है। तो आप क्या सुनते हैं? "परिचय डॉट डॉट डॉट डॉट ..." जब तक सभी बिंदुओं की घोषणा नहीं हो जाती। स्क्रीन रीडर उपयोगकर्ताओं के लिए यह एक भयानक अनुभव है।

समाधान के साथ एक अतिरिक्त तत्व सम्मिलित करना है aria-hidden करने के लिए सेट true और फिर उस तत्व का उपयोग डॉट्स डालने के लिए करें। तो एचटीएमएल बन जाता है:

<ol class="toc-list" role="list"> <li> <a href="#link_to_heading"> <span class="title">Chapter or subsection title<span class="leaders" aria-hidden="true"></span></span> <span class="page"><span class="visually-hidden">Page</span> 1</span> </a> <ol role="list"> <!-- subsection items --> </ol> </li>
</ol>

और सीएसएस बन जाता है:

.toc-list li > a > .title { position: relative; overflow: hidden;
} .toc-list li > a .leaders::after { position: absolute; padding-left: .25ch; content: " . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . "; text-align: right;
}

अब स्क्रीन रीडर डॉट्स को नजरअंदाज कर देंगे और यूजर्स को घोषित किए जा रहे मल्टीपल डॉट्स को सुनने की निराशा से निजात दिलाएंगे।

अंतिम समापन कार्य

इस बिंदु पर, सामग्री घटक की तालिका बहुत अच्छी लगती है, लेकिन यह कुछ मामूली विवरण कार्य का उपयोग कर सकती है। शुरू करने के लिए, अधिकांश पुस्तकें उपखंड शीर्षकों से अध्याय शीर्षकों को दृष्टिगत रूप से ऑफसेट करती हैं, इसलिए मैंने शीर्ष-स्तरीय वस्तुओं को बोल्ड किया और बाद के अध्यायों से उपखंडों को अलग करने के लिए एक मार्जिन पेश किया:

.toc-list > li > a { font-weight: bold; margin-block-start: 1em;
}

इसके बाद, मैं पेज नंबरों के संरेखण को साफ करना चाहता था। जब मैं एक निश्चित-चौड़ाई वाले फ़ॉन्ट का उपयोग कर रहा था, तो सब कुछ ठीक लग रहा था, लेकिन चर-चौड़ाई वाले फोंट के लिए, लीडर डॉट्स एक ज़िगज़ैग पैटर्न बना सकते हैं क्योंकि वे एक पृष्ठ संख्या की चौड़ाई में समायोजित हो जाते हैं। उदाहरण के लिए, 1 वाला कोई भी पेज नंबर दूसरों की तुलना में संकरा होगा, जिसके परिणामस्वरूप लीडर डॉट्स पिछली या निम्नलिखित पंक्तियों पर डॉट्स के साथ गलत तरीके से संरेखित होते हैं।

इस समस्या को ठीक करने के लिए, मैंने सेट किया font-variant-numeric सेवा मेरे tabular-nums इसलिए सभी नंबरों को एक ही चौड़ाई के साथ माना जाता है। न्यूनतम चौड़ाई को पर भी सेट करके 2ch, मैंने सुनिश्चित किया कि एक या दो अंकों वाली सभी संख्याएं पूरी तरह से संरेखित हों। (आप इसे सेट करना चाह सकते हैं 3ch यदि आपके प्रोजेक्ट में 100 से अधिक पृष्ठ हैं।) यहाँ पृष्ठ संख्या के लिए अंतिम सीएसएस है:

.toc-list li > a > .page { min-width: 2ch; font-variant-numeric: tabular-nums; text-align: right;
}

और इसके साथ ही, सामग्री की तालिका पूरी हो गई है!

निष्कर्ष

एचटीएमएल और सीएसएस के अलावा कुछ भी नहीं के साथ सामग्री की एक तालिका बनाना मेरी अपेक्षा से अधिक चुनौती थी, लेकिन मैं परिणाम से बहुत खुश हूं। यह दृष्टिकोण न केवल अध्यायों और उपखंडों को समायोजित करने के लिए पर्याप्त लचीला है, बल्कि यह सीएसएस को अपडेट किए बिना उप-उपखंडों को अच्छी तरह से संभालता है। समग्र दृष्टिकोण वेब पेजों पर काम करता है जहां आप सामग्री के विभिन्न स्थानों से लिंक करना चाहते हैं, साथ ही पीडीएफ जहां आप सामग्री की तालिका को विभिन्न पृष्ठों से लिंक करना चाहते हैं। और निश्चित रूप से, यदि आप इसे किसी ब्रोशर या पुस्तक में उपयोग करने के इच्छुक हैं तो यह प्रिंट में भी बहुत अच्छा लगता है।

मैं जूली ब्लैंक और क्रिस्टोफ़ ग्रैबो को सामग्री की एक तालिका बनाने पर उनके उत्कृष्ट ब्लॉग पोस्ट के लिए धन्यवाद देना चाहता हूं, क्योंकि जब मैं शुरू कर रहा था तब वे दोनों अमूल्य थे। जब मैंने इस प्रोजेक्ट पर काम किया, तो मैं सारा सूइदान को उनकी एक्सेसिबिलिटी फीडबैक के लिए भी धन्यवाद देना चाहता हूं।

---

HTML + CSS के साथ सामग्री की एक आदर्श तालिका मूल रूप से प्रकाशित सीएसएस-ट्रिक्स। तुम्हे करना चाहिए समाचार पत्र प्राप्त करें.

• कॉइनस्मार्ट। यूरोप का सर्वश्रेष्ठ बिटकॉइन और क्रिप्टो एक्सचेंज।
• प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। नि: शुल्क प्रवेश।
• क्रिप्टोहॉक। Altcoin रडार। मुफ्त परीक्षण।
• स्रोत: https://css-tricks.com/a-perfect-table-of-contents-with-html-css/