HTML + CSS کے ساتھ مشمولات کا ایک پرفیکٹ ٹیبل

اس سال کے شروع میں، میں نے خود ایک ای بک شائع کی جسے کہا جاتا ہے۔ جاوا اسکرپٹ کے وعدوں کو سمجھنا (ڈاؤن لوڈ کے لیے مفت)۔ اگرچہ میرا اسے پرنٹ بک میں تبدیل کرنے کا کوئی ارادہ نہیں تھا، کافی لوگ پرنٹ ورژن کے بارے میں پوچھ گچھ کرنے کے لیے پہنچ گئے کہ میں نے اسے بھی خود شائع کرنے کا فیصلہ کیا۔ میں نے سوچا کہ HTML اور CSS کا استعمال کرتے ہوئے یہ ایک آسان مشق ہو گی۔ پی ڈی ایف بنائیں اور پھر اسے پرنٹر پر بھیج دیں۔ جس چیز کا مجھے احساس نہیں تھا وہ یہ تھا کہ میرے پاس پرنٹ کتاب کے ایک اہم حصے کا جواب نہیں تھا: مندرجات کا جدول۔

مشمولات کی میز کا میک اپ

اس کے مرکز میں، مندرجات کی ایک میز کافی آسان ہے۔ ہر سطر کتاب یا ویب صفحہ کے ایک حصے کی نمائندگی کرتی ہے اور یہ بتاتی ہے کہ آپ کو وہ مواد کہاں سے مل سکتا ہے۔ عام طور پر، لائنوں میں تین حصے ہوتے ہیں:

1. باب یا حصے کا عنوان
2. لیڈرز (یعنی وہ نقطے، ڈیشز، یا لائنز) جو صفحہ نمبر سے عنوان کو بصری طور پر جوڑ دیتے ہیں۔
3. صفحہ نمبر

مائیکروسافٹ ورڈ یا گوگل ڈاکس جیسے ورڈ پروسیسنگ ٹولز کے اندر مواد کی ایک میز تیار کرنا آسان ہے، لیکن چونکہ میرا مواد مارک ڈاؤن میں تھا اور پھر ایچ ٹی ایم ایل میں تبدیل ہو گیا تھا، یہ میرے لیے اچھا آپشن نہیں تھا۔ میں کچھ خودکار چاہتا ہوں جو HTML کے ساتھ کام کرے تاکہ اس فارمیٹ میں مواد کا جدول تیار کیا جا سکے جو پرنٹ کے لیے موزوں ہو۔ میں یہ بھی چاہتا تھا کہ ہر لائن ایک لنک ہو تاکہ اسے ویب پیجز اور پی ڈی ایف میں دستاویز کے ارد گرد نیویگیٹ کرنے کے لیے استعمال کیا جا سکے۔ میں عنوان اور صفحہ نمبر کے درمیان ڈاٹ لیڈرز بھی چاہتا تھا۔

اور اس طرح میں نے تحقیق شروع کی۔

میں نے HTML اور CSS کے ساتھ مشمولات کا ٹیبل بنانے پر دو بہترین بلاگ پوسٹس دیکھے۔ پہلا تھا۔ "اپنے HTML سے مشمولات کا ایک جدول بنائیں" جولی بلینک کی طرف سے. جولی نے کام کیا۔ پیجڈ جے ایس, ویب براؤزرز میں صفحہ شدہ میڈیا خصوصیات کے لیے ایک پولی فل جو پرنٹ کے لیے دستاویزات کو مناسب طریقے سے فارمیٹ کرتی ہے۔ میں نے جولی کی مثال سے شروعات کی، لیکن پتہ چلا کہ یہ میرے لیے کافی کام نہیں کر سکا۔ اگلا، مجھے کرسٹوف گرابو ملا "سی ایس ایس کے ساتھ ریسپانسیو TOC لیڈر لائنز" پوسٹ، جس نے سی ایس ایس گرڈ کے استعمال کا تصور متعارف کرایا (جولی کے فلوٹ پر مبنی اپروچ کے برخلاف) سیدھ کو آسان بنانے کے لیے۔ ایک بار پھر، اگرچہ، اس کا نقطہ نظر میرے مقاصد کے لیے بالکل درست نہیں تھا۔

ان دو پوسٹس کو پڑھنے کے بعد، اگرچہ، میں نے محسوس کیا کہ مجھے ترتیب کے مسائل کے بارے میں کافی اچھی سمجھ ہے کہ میں خود شروع کر سکوں۔ میں نے دونوں بلاگ پوسٹوں کے ٹکڑوں کا استعمال کیا اور ساتھ ہی کچھ نئے 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>

مندرجات کی میز پر طرزوں کا اطلاق کرنا

ایک بار جب میں نے اس مارک اپ کو قائم کر لیا جسے میں نے استعمال کرنے کا منصوبہ بنایا تھا، اگلا مرحلہ کچھ طرزوں کو لاگو کرنا تھا۔

سب سے پہلے، میں نے خود کار طریقے سے تیار کردہ نمبروں کو ہٹا دیا. اگر آپ چاہیں تو آپ خود کار طریقے سے تیار کردہ نمبرز کو اپنے پراجیکٹ میں رکھنے کا انتخاب کر سکتے ہیں، لیکن کتابوں کے لیے یہ عام بات ہے کہ ابواب کی فہرست میں بغیر نمبر والے پیش لفظ اور بعد کے الفاظ شامل ہوں، جو خود کار طریقے سے تیار کردہ نمبروں کو غلط بنا دیتا ہے۔

اپنے مقصد کے لیے، میں باب نمبروں کو دستی طور پر پُر کروں گا پھر ترتیب کو ایڈجسٹ کروں گا تاکہ ٹاپ لیول لسٹ میں کوئی پیڈنگ نہ ہو (اس طرح پیراگراف کے ساتھ سیدھ میں ہو) اور ہر ایمبیڈڈ لسٹ کو دو جگہوں سے انڈینٹ کیا جائے۔ میں نے استعمال کرنے کا انتخاب کیا۔ 2ch پیڈنگ ویلیو کیونکہ مجھے ابھی تک اس بات کا یقین نہیں تھا کہ میں کون سا فونٹ استعمال کروں گا۔ دی ch لمبائی کی اکائی پیڈنگ کو کسی کریکٹر کی چوڑائی سے متعلق ہونے کی اجازت دیتی ہے — چاہے کوئی بھی فونٹ استعمال کیا گیا ہو — بجائے اس کے کہ ایک مطلق پکسل سائز جو متضاد نظر آنے کو ختم کر سکے۔

یہ سی ایس ایس ہے جس کے ساتھ میں نے ختم کیا:

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

سارہ سعیدان مجھے بتایا کہ WebKit براؤزر فہرست کے الفاظ کو ہٹاتے ہیں جب 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>

ٹائٹل اور پیج نمبر کو اسٹائل کرنا

فہرست کو میری پسند کے مطابق اسٹائل کرنے کے ساتھ، یہ انفرادی فہرست آئٹم کو اسٹائل کرنے کا وقت تھا۔ مندرجات کے جدول میں ہر آئٹم کے لیے، عنوان اور صفحہ نمبر ایک ہی لائن پر ہونا چاہیے، عنوان بائیں طرف اور صفحہ نمبر دائیں طرف منسلک ہونا چاہیے۔

آپ سوچ رہے ہوں گے، "کوئی مسئلہ نہیں، فلیکس باکس اسی کے لیے ہے!" تم غلط نہیں ہو! Flexbox درحقیقت ٹائٹل پیج کی درست سیدھ حاصل کر سکتا ہے۔ لیکن جب لیڈروں کو شامل کیا جاتا ہے تو صف بندی کے کچھ مشکل مسائل ہوتے ہیں، اس لیے میں نے اس کے بجائے گرڈ کا استعمال کرتے ہوئے کرسٹوف کے نقطہ نظر کے ساتھ جانے کا انتخاب کیا، جو کہ بونس کے طور پر ملٹی لائن ٹائٹلز میں بھی مدد کرتا ہے۔ یہاں ایک انفرادی آئٹم کے لئے 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. صفحہ نمبر دائیں طرف منسلک ہے، جیسا کہ مشمولات کے جدول میں روایتی ہے۔

اس مقام پر میں نے جو دوسری تبدیلی کی وہ تھی "صفحہ" کے متن کو چھپانا۔ یہ اسکرین ریڈرز کے لیے مددگار ہے لیکن بصری طور پر غیر ضروری ہے، اس لیے میں نے ایک استعمال کیا۔ روایتی 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;
}

اور، یقینا، اس کلاس کو استعمال کرنے کے لیے ایچ ٹی ایم ایل کو اپ ڈیٹ کرنے کی ضرورت ہے:

<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() فنکشن میں بیان کیا گیا ہے۔ پیجڈ میڈیا تفصیلات کے لیے CSS تیار کردہ مواد. تاہم، جیسا کہ پیجڈ میڈیا کی زیادہ تر خصوصیات کے ساتھ، یہ فنکشن کسی بھی براؤزر میں لاگو نہیں ہوتا ہے، اس لیے اسے بطور آپشن چھوڑ کر (کم از کم اس وقت جب میں یہ لکھ رہا ہوں)۔ اس پر درج بھی نہیں ہے۔ 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;
}

۔ ::after pseudo-element کو صفحہ کے بہاؤ سے باہر نکالنے اور دوسری لائنوں میں لپیٹنے سے بچنے کے لیے ایک مطلق پوزیشن پر سیٹ کیا گیا ہے۔ متن کو دائیں طرف جوڑا گیا ہے کیونکہ ہم چاہتے ہیں کہ ہر لائن کے آخری نقطے لائن کے آخر میں موجود نمبر پر جائیں۔ (اس کی پیچیدگیوں پر مزید بعد میں۔) .title عنصر کو ایک رشتہ دار پوزیشن پر سیٹ کیا گیا ہے لہذا ::after چھدم عنصر اپنے خانے سے باہر نہیں نکلتا ہے۔ دریں اثنا، overflow پوشیدہ ہے لہذا وہ تمام اضافی نقطے پوشیدہ ہیں۔ نتیجہ ڈاٹ لیڈرز کے ساتھ مشمولات کی ایک خوبصورت میز ہے۔

تاہم، کچھ اور ہے جس پر غور کرنے کی ضرورت ہے۔

سارہ نے مجھے یہ بھی بتایا کہ وہ تمام نقطے اسکرین ریڈرز کے لیے متن کے طور پر شمار ہوتے ہیں۔ تو آپ کیا سنتے ہیں؟ "تعارف ڈاٹ ڈاٹ ڈاٹ ڈاٹ ڈاٹ…" جب تک کہ تمام نقطوں کا اعلان نہیں کیا جاتا ہے۔ اسکرین ریڈر کے صارفین کے لیے یہ ایک خوفناک تجربہ ہے۔

حل یہ ہے کہ اس کے ساتھ ایک اضافی عنصر داخل کیا جائے۔ aria-hidden تیار true اور پھر نقطوں کو داخل کرنے کے لیے اس عنصر کو استعمال کریں۔ تو HTML بن جاتا ہے:

<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>

اور CSS بن جاتا ہے:

.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 سے زیادہ صفحات ہیں۔) صفحہ نمبر کے لیے حتمی CSS یہ ہے:

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

اور اس کے ساتھ، مندرجات کی میز مکمل ہے!

نتیجہ

HTML اور CSS کے علاوہ کسی بھی چیز کے بغیر مشمولات کا ٹیبل بنانا میری توقع سے زیادہ ایک چیلنج تھا، لیکن میں اس کے نتیجے سے بہت خوش ہوں۔ نہ صرف یہ نقطہ نظر ابواب اور ذیلی حصوں کو ایڈجسٹ کرنے کے لیے کافی لچکدار ہے، بلکہ یہ CSS کو اپ ڈیٹ کیے بغیر ذیلی ذیلی حصوں کو اچھی طرح سے ہینڈل کرتا ہے۔ مجموعی نقطہ نظر ویب صفحات پر کام کرتا ہے جہاں آپ مواد کے مختلف مقامات سے لنک کرنا چاہتے ہیں، ساتھ ہی پی ڈی ایف بھی جہاں آپ چاہتے ہیں کہ مواد کا جدول مختلف صفحات سے منسلک ہو۔ اور یقیناً، یہ پرنٹ میں بھی بہت اچھا لگتا ہے اگر آپ اسے کبھی کسی بروشر یا کتاب میں استعمال کرنے کے لیے مائل ہوں۔

میں جولی بلینک اور کرسٹوف گرابو کا شکریہ ادا کرنا چاہوں گا کہ ان کی بہترین بلاگ پوسٹس کے لیے مشمولات کا جدول بنانے پر، کیونکہ جب میں شروع کر رہا تھا تو یہ دونوں انمول تھے۔ میں سارہ سوئیدان کا بھی شکریہ ادا کرنا چاہوں گا کہ میں نے اس پراجیکٹ پر کام کرتے ہوئے ان کے قابل رسائی تاثرات کے لیے۔

---

HTML + CSS کے ساتھ مشمولات کا ایک پرفیکٹ ٹیبل اصل میں شائع ہوا سی ایس ایس - ٹیکنیکس. تمہیں چاہئے نیوز لیٹر حاصل کریں.

• سکے سمارٹ۔ یورپ کا بہترین بٹ کوائن اور کرپٹو ایکسچینج۔
• پلیٹو بلاک چین۔ Web3 Metaverse انٹیلی جنس۔ علم میں اضافہ۔ مفت رسائی۔
• کرپٹو ہاک۔ Altcoin ریڈار. مفت جانچ.
• ماخذ: https://css-tricks.com/a-perfect-table-of-contents-with-html-css/