HTML + CSS সহ বিষয়বস্তুর একটি নিখুঁত সারণী

এই বছরের শুরুতে, আমি স্ব-প্রকাশিত একটি ইবুক নামক জাভাস্ক্রিপ্ট প্রতিশ্রুতি বোঝা (ডাউনলোডের জন্য বিনামূল্যে) যদিও এটিকে একটি মুদ্রণ বইতে রূপান্তর করার আমার কোন উদ্দেশ্য ছিল না, যথেষ্ট লোকে একটি মুদ্রণ সংস্করণ সম্পর্কে জিজ্ঞাসা করতে পৌঁছেছে যে আমি নিজেও এটি প্রকাশ করার সিদ্ধান্ত নিয়েছি। আমি ভেবেছিলাম এটি HTML এবং CSS ব্যবহার করে একটি সহজ অনুশীলন হবে একটি পিডিএফ তৈরি করুন এবং তারপর এটি প্রিন্টারে পাঠান। আমি কি বুঝতে পারিনি যে আমার কাছে একটি প্রিন্ট বইয়ের একটি গুরুত্বপূর্ণ অংশের উত্তর ছিল না: বিষয়বস্তুর সারণী।

বিষয়বস্তু একটি টেবিল মেকআপ

এর মূলে, বিষয়বস্তুর একটি টেবিল মোটামুটি সহজ। প্রতিটি লাইন একটি বই বা ওয়েবপৃষ্ঠার একটি অংশ প্রতিনিধিত্ব করে এবং নির্দেশ করে যে আপনি সেই সামগ্রীটি কোথায় পাবেন। সাধারণত, লাইনে তিনটি অংশ থাকে:

1. অধ্যায় বা বিভাগের শিরোনাম
2. লিডার (যেমন সেই বিন্দু, ড্যাশ বা লাইন) যেগুলি দৃশ্যত শিরোনামটিকে পৃষ্ঠা নম্বরের সাথে সংযুক্ত করে
3. পৃষ্ঠা নম্বর

মাইক্রোসফ্ট ওয়ার্ড বা গুগল ডক্সের মতো ওয়ার্ড প্রসেসিং সরঞ্জামগুলির মধ্যে বিষয়বস্তুর একটি সারণী তৈরি করা সহজ, কিন্তু যেহেতু আমার সামগ্রীটি মার্কডাউনে ছিল এবং তারপরে এইচটিএমএলে রূপান্তরিত হয়েছিল, এটি আমার জন্য একটি ভাল বিকল্প ছিল না। আমি এমন কিছু স্বয়ংক্রিয় চেয়েছিলাম যা প্রিন্টের জন্য উপযুক্ত এমন একটি বিন্যাসে বিষয়বস্তুর টেবিল তৈরি করতে HTML এর সাথে কাজ করবে। আমি প্রতিটি লাইন একটি লিঙ্ক হতে চেয়েছিলাম যাতে এটি নথির চারপাশে নেভিগেট করার জন্য ওয়েবপৃষ্ঠা এবং পিডিএফগুলিতে ব্যবহার করা যেতে পারে। আমি শিরোনাম এবং পৃষ্ঠা নম্বরের মধ্যে ডট লিডারও চেয়েছিলাম।

আর তাই আমি গবেষণা শুরু করলাম।

আমি এইচটিএমএল এবং সিএসএস এর সাথে বিষয়বস্তুর একটি টেবিল তৈরি করার জন্য দুটি চমৎকার ব্লগ পোস্ট পেয়েছি। প্রথমটি ছিল "আপনার HTML থেকে বিষয়বস্তুর একটি সারণী তৈরি করুন" জুলি ব্ল্যাঙ্ক দ্বারা। জুলি কাজ করেছে PagedJS, ওয়েব ব্রাউজারগুলিতে অনুপস্থিত পৃষ্ঠাযুক্ত মিডিয়া বৈশিষ্ট্যগুলির জন্য একটি পলিফিল যা মুদ্রণের জন্য নথিগুলিকে সঠিকভাবে ফর্ম্যাট করে৷ আমি জুলির উদাহরণ দিয়ে শুরু করেছি, কিন্তু দেখেছি যে এটি আমার জন্য পুরোপুরি কাজ করেনি। এর পরে, আমি ক্রিস্টোফ গ্রাবো'স খুঁজে পেয়েছি "সিএসএসের সাথে প্রতিক্রিয়াশীল TOC লিডার লাইন" পোস্ট, যা সারিবদ্ধকরণকে সহজ করতে CSS গ্রিড (জুলির ফ্লোট-ভিত্তিক পদ্ধতির বিপরীতে) ব্যবহার করার ধারণা চালু করেছে। আবার, যদিও, তার পদ্ধতি আমার উদ্দেশ্যের জন্য একেবারে সঠিক ছিল না।

এই দুটি পোস্ট পড়ার পরে, যদিও, আমি অনুভব করেছি যে লেআউটের সমস্যাগুলি সম্পর্কে আমার নিজের উপর সূচনা করার জন্য আমার যথেষ্ট ভাল ধারণা রয়েছে। আমি উভয় ব্লগ পোস্টের টুকরোগুলি ব্যবহার করেছি সেইসাথে কিছু নতুন 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 দৈর্ঘ্য ইউনিট প্যাডিংকে একটি অক্ষরের প্রস্থের সাথে আপেক্ষিক হতে দেয় — যে ফন্ট ব্যবহার করা হোক না কেন — একটি পরম পিক্সেল আকারের পরিবর্তে যা অসামঞ্জস্যপূর্ণ দেখাতে পারে।

এখানে আমি যে CSS দিয়ে শেষ করেছি:

.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;
}

এবং, অবশ্যই, সেই ক্লাসটি ব্যবহার করার জন্য 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>

এই ভিত্তি স্থাপনের সাথে, আমি শিরোনাম এবং পৃষ্ঠার মধ্যে নেতাদের সম্বোধন করতে চলেছি।

ডট নেতা তৈরি করা

প্রিন্ট মিডিয়াতে নেতারা এত সাধারণ যে আপনি ভাবছেন, কেন সিএসএস ইতিমধ্যে এটি সমর্থন করে না? উত্তর: এটা করে. ভাল ধরনের.

আসলে একটি আছে leader() ফাংশন সংজ্ঞায়িত পেজড মিডিয়া স্পেসিফিকেশনের জন্য CSS জেনারেটেড কন্টেন্ট. যাইহোক, পেজযুক্ত মিডিয়া স্পেসিফিকেশনগুলির বেশিরভাগের মতো, এই ফাংশনটি কোনও ব্রাউজারে প্রয়োগ করা হয় না, তাই এটিকে একটি বিকল্প হিসাবে বাদ দিয়ে (অন্তত আমি যখন এটি লিখছি তখন)। এটা এমনকি তালিকাভুক্ত করা হয় না caniuse.com, সম্ভবত কারণ কেউ এটি বাস্তবায়ন করেনি এবং কোন পরিকল্পনা বা সংকেত নেই যে তারা করবে।

সৌভাগ্যবশত, জুলি এবং ক্রিস্টোফ উভয়েই ইতিমধ্যে তাদের নিজ নিজ পোস্টে এই সমস্যাটির সমাধান করেছেন। ডট নেতা সন্নিবেশ করতে, তারা উভয় একটি ব্যবহার করে ::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 ছদ্ম-উপাদান একটি পরম অবস্থানে সেট করা হয় যাতে এটিকে পৃষ্ঠার প্রবাহের বাইরে নিয়ে যায় এবং অন্য লাইনে মোড়ানো এড়াতে হয়। পাঠ্যটি ডানদিকে সারিবদ্ধ করা হয়েছে কারণ আমরা চাই প্রতিটি লাইনের শেষ বিন্দুগুলি লাইনের শেষে থাকা সংখ্যাটিতে ফ্লাশ হোক। (পরে এর জটিলতা সম্পর্কে আরও।) .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>

এবং 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;
}

এবং যে সঙ্গে, বিষয়বস্তু সারণী সম্পূর্ণ!

উপসংহার

এইচটিএমএল এবং সিএসএস ছাড়া কিছুই না দিয়ে একটি বিষয়বস্তুর টেবিল তৈরি করা আমার প্রত্যাশার চেয়ে বেশি একটি চ্যালেঞ্জ ছিল, তবে আমি ফলাফল নিয়ে খুব খুশি। এই পদ্ধতিটি কেবল অধ্যায় এবং উপ-বিভাগগুলিকে মিটমাট করার জন্য যথেষ্ট নমনীয় নয়, এটি CSS আপডেট না করেই উপ-উপবিভাগগুলিকে সুন্দরভাবে পরিচালনা করে। সামগ্রিক পদ্ধতিটি ওয়েব পৃষ্ঠাগুলিতে কাজ করে যেখানে আপনি বিষয়বস্তুর বিভিন্ন অবস্থানে লিঙ্ক করতে চান, সেইসাথে পিডিএফগুলি যেখানে আপনি বিষয়বস্তুর টেবিলটি বিভিন্ন পৃষ্ঠার সাথে লিঙ্ক করতে চান৷ এবং অবশ্যই, এটি প্রিন্টেও দুর্দান্ত দেখায় যদি আপনি কখনও এটি একটি ব্রোশার বা বইতে ব্যবহার করতে আগ্রহী হন।

আমি জুলি ব্ল্যাঙ্ক এবং ক্রিস্টোফ গ্র্যাবোকে তাদের চমৎকার ব্লগ পোস্টের জন্য ধন্যবাদ জানাতে চাই বিষয়বস্তুর সারণী তৈরি করার জন্য, কারণ যখন আমি শুরু করছিলাম তখন উভয়ই অমূল্য ছিল। আমি এই প্রজেক্টে কাজ করার সময় তার অ্যাক্সেসিবিলিটি প্রতিক্রিয়ার জন্য Sara Soueidan কে ধন্যবাদ জানাতে চাই।

---

HTML + CSS সহ বিষয়বস্তুর একটি নিখুঁত সারণী মূলত প্রকাশিত সিএসএস-ট্রিকস। তোমার উচিত নিউজলেটার পান.

• Coinsmart. ইউরোপের সেরা বিটকয়েন এবং ক্রিপ্টো এক্সচেঞ্জ।
• প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. বিনামূল্যে এক্সেস.
• ক্রিপ্টোহক। Altcoin রাডার। বিনামূল্যে ট্রায়াল.
• সূত্র: https://css-tricks.com/a-perfect-table-of-contents-with-html-css/