প্রথমে HTML নাম্বারড লিস্টের ডিফল্ট স্টাইল দেখে নিই।
CSS-এর মাধ্যমে বাংলায় সংখ্যাযুক্ত তালিকা (Ordered List) তৈরির সবচে’ সহজ উপায় হল list-style-type হিসেবে bengali ব্যবহার করা। তবে এটা Internet Explorer-এ কাজ করে না।
ডিফল্ট হিসেবে নাম্বারগুলো ১. ২. ৩. … এভাবে দেখাচ্ছে। এগুলোকে আমরা ১/ ২/ ৩/ এভাবে প্রদর্শন করতে চাই। এক্ষেত্রে counter() ফাংশনটি ব্যবহার করতে পারি।
সংখ্যার আগে শূন্য প্রদর্শন:
আর যদি সংখ্যার আগে শূন্য প্রদর্শন করতে চাই, সেক্ষেত্রে বাংলার জন্যে কোনো Pre-defined স্টাইল নেই। এক্ষেত্রে আমরা নতুন একটি Counter Style Rule তৈরি করে নিতে পারি।
বাংলা অক্ষর সম্বলিত লিস্ট:
বাংলা অক্ষর সম্বলিত লিস্টের ক্ষেত্রেও কোনো Pre-defined স্টাইল নেই । তাই এক্ষেত্রেও আমাদের নতুন একটি Counter Style Rule তৈরি করে নিতে হবে।
মাল্টি লেভেল নাম্বারড লিস্ট:
HTML মাল্টি লেভেল নাম্বারড লিস্টের ক্ষেত্রেও আমরা উপরিউক্ত স্টাইলগুলো ব্যবহার করতে পারি। কিন্তু আমরা চাচ্ছি, কোনো চাইল্ড আইটেম তার প্যারেন্ট আইটেমের নাম্বারও প্রদর্শন করুক। যেমন, ৩ নং আইটেমের অধীন আইটেমগুলো ৩.১, ৩.২, ৩.৩ এভাবে দেখাক। সেক্ষেত্রে আমরা counters() ফাংশনটি ব্যবহার করতে পারি।
এখন দ্বিতীয় একটি <ol>-কে একটি <div>-এর ভিতরে নিয়ে দেখি কী ঘটে।
দ্বিতীয় লিস্টটি ৫.১/ ৫.২/ ৫.৩/ এভাবে হয়ে গিয়েছে। হওয়া উচিত ছিলো ১/ ২/ ৩/ ইত্যাদি। নিচের মতো করে এর সমাধান করতে পারি।
অনেক ভালো কিছু উপস্থাপন করেছেন। তবে আমার মনে হচ্ছে আরো সহজ করে এবং বিস্তারিতভাবে লিখে দিলে সবাই অনেক ভালোভাবে বুঝতে পারতো।
আপনার সুন্দর পরামর্শের জন্য ধন্যবাদ। আমার একটি বদভ্যাস হলো আর্টিকেলগুলো সম্পূর্ণ হবার আগেই প্রকাশ করা। তবে প্রতিনিয়ত সেগুলোর পরিবর্ধন ও সংশোধন অব্যাহত রাখার চেষ্টা করি।