কাউন্টার এবং তালিকা শৈলী

অনেক ধরনের কন্টেন্ট HTML লিস্ট হিসেবে সবচেয়ে ভালোভাবে উপস্থাপন করা যায়। অর্ডারড লিস্ট কন্টেন্টের ক্ষেত্রে, যেমন রান্নার ধাপ বা কোনো আর্টিকেলের ফুটনোট, মার্কারটিতেও প্রায়শই তথ্য থাকে। একটি লিস্টের কাউন্টারগুলো নিয়ন্ত্রণ করার জন্য CSS বিভিন্ন উপায় প্রদান করে।

তালিকার শৈলী

বিভিন্ন ধরনের পূর্বনির্ধারিত তালিকা শৈলী রয়েছে যা সংখ্যা, বর্ণমালা, রোমান সংখ্যা এবং অনেক আন্তর্জাতিক গণনা পদ্ধতি সমর্থন করে।

ব্রাউজার সমর্থিত স্টাইলগুলোর পাশাপাশি, W3C ‘রেডি-মেড কাউন্টার স্টাইলস’ প্রকাশ করেছে, যেখানে ৪৫টি লিখন পদ্ধতিতে অতিরিক্ত ১৮১টি স্টাইলের সমর্থন রয়েছে।

এই বিকল্পগুলো যদি আপনার প্রয়োজন মেটাতে না পারে, তবে আপনি একটি নিজস্ব @counter-style ও নির্ধারণ করতে পারেন। এর মাধ্যমে আপনি নিজস্ব প্রতীক, প্রিফিক্স ও সাফিক্স এবং আরও অনেক কিছু নির্দিষ্ট করতে পারবেন।

ডিফল্টরূপে, আইটেম মার্কারটি তালিকার outside , তালিকার সামনে এবং ডানদিকে সারিবদ্ধ থাকে। আপনি list-style-position: inside ব্যবহার করে আইটেম মার্কারটিকে তালিকার ভিতরেও রাখতে পারেন।

কাউন্টার

লিস্ট স্টাইলগুলো লিস্ট আইটেম মার্কারগুলো কীভাবে প্রদর্শিত হবে তা নিয়ন্ত্রণ করে, অন্যদিকে কাউন্টারগুলো আপনাকে প্রদর্শিত মানগুলো নিয়ন্ত্রণ করার সুযোগ দেয়। <li> লিস্ট আইটেম এলিমেন্টের জন্য, ব্রাউজার list-item নামে একটি কাউন্টার তৈরি করে, যা প্রতিটি লিস্ট আইটেমের জন্য ১ করে বৃদ্ধি পায়।

সিএসএস কাউন্টারগুলো এমন কোনো এলিমেন্ট কতবার রেন্ডার হচ্ছে তার একটি চলমান হিসাব রাখে, যেটির জন্য একটি নির্দিষ্ট counter-increment ভ্যালু সেট করা থাকে।

একটি নতুন কাউন্টার তৈরি করতে, একটি কাউন্টারের নাম এবং ঐচ্ছিকভাবে একটি প্রাথমিক মান সহ counter-reset ব্যবহার করুন। আপনি প্রায়শই এটি একটি প্যারেন্ট এলিমেন্টে সেট করবেন, যেটি গণনা করা হবে এমন সমস্ত এলিমেন্ট ধারণ করে।

এরপর, আপনি যে প্রতিটি উপাদান গণনা করতে চান, সেটিতে একটি counter-increment প্রপার্টি যোগ করুন।

সবশেষে, counter() ফাংশন ব্যবহার করে কাউন্টারের মান প্রদর্শন করুন।

এই উদাহরণে, আমরা প্রতিটি পাদটীকার লিঙ্ক টেক্সট হিসেবে পাদটীকার চলমান সংখ্যা প্রদর্শন করতে চাই। যেহেতু আমরা পুরো ডকুমেন্টের জন্য একটিমাত্র কাউন্টার চাই, তাই আমরা বডিতে counter-reset: note সেট করেছি এবং প্রতিটি পাদটীকার লিঙ্কে এটি বৃদ্ধি করার ব্যবস্থা রেখেছি।

আপনি বিভিন্ন আইটেম গণনা করার জন্য একাধিক কাউন্টারও ব্যবহার করতে পারেন। পাদটীকার উদাহরণে, যদি আপনি পাদটীকাটি যে বিভাগ এবং অনুচ্ছেদে রয়েছে তার সূচী প্রদর্শন করতে চান, তাহলে কী হবে?

বডিতে counter-reset ব্যবহার করে সেকশন সংখ্যা তৈরি করা যায় এবং প্রতিটি <h2> এলিমেন্টের জন্য তা বাড়ানো যায়। আমরা চাই প্রতিটি সেকশনের জন্য প্যারাগ্রাফ সংখ্যা রিসেট হোক, তাই আমরা <h2> এলিমেন্টগুলোতে counter-reset এবং <p> এলিমেন্টগুলোতে increment ব্যবহার করব।

অবশেষে, আমরা content প্রপার্টিতে কাউন্টারের মানগুলো একত্রিত করি।

a:after {
  content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
  font-size: small;
  vertical-align: super;
}

নেস্টেড কাউন্টার

একটি লিস্টের ভিতরে আরেকটি লিস্ট রাখলে কী হয়? প্রতিটি <ul> বা <ol> এলিমেন্টের জন্য list-item কাউন্টারটি ইনিশিয়ালাইজ করা হয়, এবং counter() ব্যবহার করলে শুধুমাত্র সবচেয়ে ভেতরের কাউন্টারটির সংখ্যা রিটার্ন হয়। যদি আপনি নেস্টেড প্রতিটি কাউন্টারের সংখ্যা দেখাতে চান, তাহলে counters() ফাংশনটি ব্যবহার করুন, যেটি একটি কাউন্টারের নাম এবং একটি সেপারেটর গ্রহণ করে।

li::marker {
  content: counters(list-item, ".")
  }

বিপরীত কাউন্টার

ডিফল্টরূপে, কাউন্টারগুলো (যার মধ্যে <ol> এলিমেন্টগুলোর জন্য অন্তর্নিহিত list-item কাউন্টারও অন্তর্ভুক্ত) ০ থেকে শুরু হয় এবং প্রতিটি এলিমেন্টের জন্য এক করে বাড়ে, অর্থাৎ প্রথমটিকে ১ হিসাবে গণনা করা হয়। কিন্তু আপনি যদি পেছন থেকে ১ পর্যন্ত গণনা করতে চান, তাহলে কী হবে?

এটি করার জন্য, <ol> এ reversed অ্যাট্রিবিউটটি যোগ করুন। আপনি যদি স্ট্যান্ডার্ড লিস্ট স্টাইল ব্যবহার করেন, তাহলে মার্কারগুলো প্রত্যাশিতভাবেই কাজ করবে। তবে, আপনি যদি একটি কাস্টম কাউন্টার ব্যবহার করেন, তাহলে আপনাকে counter-increment কে একটি নেগেটিভ মানে সেট করতে হবে এবং কাউন্টারের প্রারম্ভিক মানটি ম্যানুয়ালি গণনা করতে হবে।

আপনার বোধগম্যতা যাচাই করুন