তালিকা চিহ্নিতকারীর পরে গ্যাপ সম্পর্কে আপনার যা কিছু জানা দরকার

আমি পরিতেছিলাম "সৃজনশীল তালিকা স্টাইলিং" Google এর web.dev ব্লগে এবং কোড উদাহরণগুলির মধ্যে একটিতে অদ্ভুত কিছু লক্ষ্য করেছেন৷ ::marker নিবন্ধের বিভাগ। অন্তর্নির্মিত তালিকা চিহ্নিতকারীগুলি হল বুলেট, অর্ডিনাল সংখ্যা এবং অক্ষর। দ্য ::marker ছদ্ম-উপাদান আমাদের এই মার্কারগুলিকে স্টাইল করতে বা একটি কাস্টম অক্ষর বা চিত্র দিয়ে প্রতিস্থাপন করতে দেয়।

::marker { content: url('/marker.svg') ' ';
}

যে উদাহরণটি আমার দৃষ্টি আকর্ষণ করেছে তা তালিকা আইটেমগুলির জন্য একটি কাস্টম মার্কার হিসাবে একটি SVG আইকন ব্যবহার করে৷ কিন্তু একটি একক স্থান অক্ষরও আছে (" ") এর পাশের CSS মানের মধ্যে url() ফাংশন এই স্থানটির উদ্দেশ্য কাস্টম মার্কারের পরে একটি ফাঁক সন্নিবেশ করানো বলে মনে হচ্ছে।

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

প্রথমত, আমি একটি সঠিক মার্জিন দিয়ে স্থান অক্ষর প্রতিস্থাপন করার চেষ্টা করেছি:

::marker { content: url('/marker.svg'); margin-right: 1ch;
}

এই কাজ করেনি. এটি সক্রিয় আউট হিসাবে, ::marker শুধুমাত্র একটি সমর্থন করে বেশিরভাগ পাঠ্য-সম্পর্কিত CSS বৈশিষ্ট্যের ছোট সেট. উদাহরণস্বরূপ, আপনি পরিবর্তন করতে পারেন font-size এবং color মার্কার, এবং সেট করে একটি কাস্টম মার্কার সংজ্ঞায়িত করুন content একটি স্ট্রিং বা URL-এ, যেমন উপরে দেখানো হয়েছে। কিন্তু margin এবং padding বৈশিষ্ট্য হয় সমর্থিত নয়, তাই তাদের সেট করার কোন প্রভাব নেই। কি একটি হতাশা.

এটা কি সত্যিই হতে পারে যে একটি স্পেস অক্ষর একটি কাস্টম মার্কার পরে একটি ফাঁক সন্নিবেশ করার একমাত্র উপায়? আমি খুঁজে বের করা প্রয়োজন. আমি এই বিষয়ে গবেষণা করার সময়, আমি কয়েকটি আকর্ষণীয় আবিষ্কার করেছি যা আমি এই নিবন্ধে ভাগ করতে চাই।

প্যাডিং এবং মার্জিন যোগ করা হচ্ছে

প্রথমত, এর কি নিশ্চিত করা যাক margin এবং padding উপর করবেন <ul> এবং <li> উপাদান আমি এই উদ্দেশ্যে একটি পরীক্ষা পৃষ্ঠা তৈরি করেছি। প্রাসঙ্গিক স্লাইডার টেনে আনুন এবং তালিকা চিহ্নিতকারীর প্রতিটি পাশে ব্যবধানের উপর প্রভাব পর্যবেক্ষণ করুন। টিপ: সমস্ত নিয়ন্ত্রণগুলিকে তাদের প্রাথমিক মানগুলিতে পুনরায় সেট করতে উদারভাবে রিসেট বোতামটি ব্যবহার করুন।

বিঃদ্রঃ: ব্রাউজার একটি ডিফল্ট প্রয়োগ করে padding-inline-left of 40px থেকে <ol> এবং <ul> উপাদান যৌক্তিক padding-inline-left সম্পত্তি শারীরিক সমতুল্য padding-left একটি বাম-থেকে-ডান ইনলাইন দিকনির্দেশ সহ লেখার সিস্টেমে সম্পত্তি। এই নিবন্ধে, আমি সরলতার জন্য শারীরিক বৈশিষ্ট্য ব্যবহার করতে যাচ্ছি।

যেমন আপনি দেখতে পারেন, padding-left on <li> তালিকা চিহ্নিতকারীর পরে ব্যবধান বাড়ায়। অন্য তিনটি বৈশিষ্ট্য মার্কারের বাম দিকে ব্যবধান নিয়ন্ত্রণ করে, অন্য কথায়, তালিকা আইটেমের ইন্ডেন্টেশন।

এমনকি যখন তালিকা আইটেম এর লক্ষ্য করুন padding-left is 0px, মার্কার পরে একটি ন্যূনতম ফাঁক এখনও আছে. এই ব্যবধান কমানো যাবে না margin or padding. ন্যূনতম ব্যবধানের সঠিক দৈর্ঘ্য ব্রাউজারের উপর নির্ভর করে।

সংক্ষেপে, তালিকা আইটেমের বিষয়বস্তু চিহ্নিতকারী থেকে একটি ব্রাউজার-নির্দিষ্ট ন্যূনতম দূরত্বে অবস্থান করা হয় এবং এই ব্যবধানটি যোগ করে আরও বাড়ানো যেতে পারে padding-left থেকে <li>.

এর পরে, দেখা যাক যখন আমরা মার্কারের অবস্থান করি তখন কি হয় ভিতরে তালিকা আইটেম.

তালিকা আইটেম ভিতরে মার্কার সরানো

সার্জারির list-style-position সম্পত্তি দুটি কীওয়ার্ড গ্রহণ করে: outside, যা ডিফল্ট, এবং inside, যা তালিকা আইটেমের ভিতরে চিহ্নিতকারীকে স্থানান্তরিত করে। পরেরটি পূর্ণ-প্রস্থ তালিকা আইটেমগুলির সাথে ডিজাইন তৈরি করার জন্য দরকারী।

এখন মার্কার হলে ভিতরে তালিকা আইটেম, এই যে মানে padding-left on <li> মার্কার পরে আর ফাঁক বাড়ে না? খুঁজে বের কর. আমার পরীক্ষার পৃষ্ঠায়, চালু করুন list-style-position: inside চেকবক্সের মাধ্যমে। কেমন আছেন চারজন padding এবং margin এই পরিবর্তন দ্বারা প্রভাবিত বৈশিষ্ট্য?

যেমন আপনি দেখতে পারেন, padding-left on <li> এখন ব্যবধান বাড়ায় বাম মার্কার এর মানে হল যে আমরা মার্কারের পরে ব্যবধান বাড়ানোর ক্ষমতা হারিয়ে ফেলেছি। এই পরিস্থিতিতে, এটি যোগ করতে সক্ষম হতে দরকারী হবে margin-right থেকে ::marker নিজেই, কিন্তু এটি কাজ করে না, যেমন আমরা উপরে প্রতিষ্ঠিত করেছি।

উপরন্তু, একটি আছে ক্রোমিয়ামে বাগ যে কারণে মার্কারের পরে ফাঁক হয়ে যায় ট্রিপল স্যুইচ করার পরে inside পজিশনিং ডিফল্টরূপে, ফাঁকের দৈর্ঘ্য পাঠ্য আকারের প্রায় এক-তৃতীয়াংশ। তাই একটি ডিফল্ট এ font-size of 16px, ফাঁক প্রায় 5.5px. সুইচ করার পর inside, ফাঁক পূর্ণ বৃদ্ধি পায় 16px ক্রোমে এই বাগ প্রভাবিত করে disc, circle, এবং square মার্কার, কিন্তু সাধারণ সংখ্যা চিহ্নিতকারী নয়.

নিম্নলিখিত চিত্রটি macOS-এ তিনটি প্রধান ব্রাউজার জুড়ে বাইরের এবং ভিতরে অবস্থান করা তালিকা মার্কারগুলির ডিফল্ট রেন্ডারিং দেখায়। আপনার সুবিধার জন্য, আমি তাদের মার্কারগুলিতে সমস্ত তালিকা আইটেমকে অনুভূমিকভাবে সারিবদ্ধ করেছি যাতে ফাঁকের আকারের পার্থক্যগুলি তুলনা করা সহজ হয়৷

সারসংক্ষেপ, সুইচিং list-style-position: inside দুটি সমস্যা প্রবর্তন করে। এর মাধ্যমে আমরা আর ব্যবধান বাড়াতে পারি না padding-left on <li>, এবং ফাঁকের আকার ব্রাউজারগুলির মধ্যে অসামঞ্জস্যপূর্ণ।

অবশেষে, দেখা যাক যখন আমরা একটি কাস্টম মার্কার দিয়ে ডিফল্ট তালিকা মার্কার প্রতিস্থাপন করি তখন কী হয়।

একটি কাস্টম মার্কার স্যুইচ করা হচ্ছে

একটি সংজ্ঞায়িত করার দুটি উপায় আছে কাস্টম মার্কার:

• list-style-type এবং list-style-image বৈশিষ্ট্য
• content উপর সম্পত্তি ::marker ছদ্ম-উপাদান

সার্জারির content সম্পত্তি আরো শক্তিশালী। উদাহরণস্বরূপ, এটি আমাদের ব্যবহার করতে দেয় counter() তালিকা আইটেমের অর্ডিন্যাল নম্বর অ্যাক্সেস করার জন্য ফাংশন ( অন্তর্নিহিত list-item বিপরীত) এবং কাস্টম স্ট্রিং সঙ্গে এটি সাজাইয়া.

দুর্ভাগ্যবশত, সাফারি সমর্থন করে না content সম্পত্তি ::marker এখনো (ওয়েবকিট বাগ) এই কারণে, আমি ব্যবহার করতে যাচ্ছি list-style-type কাস্টম মার্কার সংজ্ঞায়িত করার জন্য সম্পত্তি। আপনি এখনও ব্যবহার করতে পারেন ::marker কাস্টম মার্কার স্টাইল করার জন্য নির্বাচক list-style-type. যে দিক ::marker সাফারিতে সমর্থিত।

যেকোনো ইউনিকোড অক্ষর সম্ভাব্যভাবে একটি কাস্টম তালিকা চিহ্নিতকারী হিসাবে পরিবেশন করতে পারে, কিন্তু অক্ষরের একটি ছোট সেট আসলে তাদের অফিসিয়াল নামে "বুলেট" আছে, তাই আমি ভেবেছিলাম রেফারেন্সের জন্য আমি সেগুলি এখানে সংকলন করব।

চরিত্র	নাম	কোড পয়েন্ট	CSS কীওয়ার্ড
•	গুলি	U+2022	disc
‣	ত্রিভুজাকার বুলেট	U+2023
⁃	হাইফেন বুলেট	U+2043
⁌	কালো বাম দিকের বুলেট	U+204C
⁍	কালো ডানদিকের বুলেট	U+204D
◘	বিপরীত বুলেট	U+25D8
◦	সাদা বুলেট	U+25E6	circle
☙	রিভার্সড রোটেটেড ফ্লোরাল হার্ট বুলেট	U+2619
❥	ঘোরানো হেভি ব্ল্যাক হার্ট বুলেট	U+2765
❧	ঘোরানো ফ্লোরাল হার্ট বুলেট	U+2767
⦾	চক্রাকারে সাদা বুলেট	U+29BE
⦿	বৃত্তাকার বুলেট	U+29BF

বিঃদ্রঃ: সিএসএস square কীওয়ার্ডের ইউনিকোডে একটি অনুরূপ "বুলেট" অক্ষর নেই। সবচেয়ে কাছাকাছি যে চরিত্রটি আসে তা হল ব্ল্যাক স্মল স্কোয়ার (▪️) ইমোজি (U+25AA).

এখন দেখা যাক যখন আমরা ডিফল্ট তালিকা মার্কার প্রতিস্থাপন করি তখন কি হয় list-style-type: "•" (U+2022 বুলেট)। এটি ডিফল্ট বুলেটের মতো একই অক্ষর, তাই কোন বড় রেন্ডারিং পার্থক্য থাকা উচিত নয়। আমার পরীক্ষা পৃষ্ঠায়, চালু করুন list-style-type বিকল্প এবং মার্কার কোনো পরিবর্তন পর্যবেক্ষণ.

আপনি দেখতে পাচ্ছেন, দুটি উল্লেখযোগ্য পরিবর্তন রয়েছে:

1. মার্কার পরে ন্যূনতম ফাঁক আর নেই।
2. বুলেটটি ছোট হয়ে গেছে, যেন এটি একটি ছোট এ রেন্ডার করা হয়েছে font-size.

অনুসারে CSS কাউন্টার স্টাইল লেভেল 3, ডিফল্ট তালিকা চিহ্নিতকারী (disc) হতে হবে "এর অনুরূপ • U+2022 বুলেট"। মনে হচ্ছে ব্রাউজারগুলি ডিফল্ট বুলেটের আকারকে আরও সুস্পষ্ট করার জন্য বাড়ায়। ফায়ারফক্স এমনকি একটি বিশেষ ফন্ট ব্যবহার করে, -moz-bullet-font, চিহ্নিতকারীর জন্য।

ছোট আকারের সমস্যা CSS দিয়ে ঠিক করা যায়? আমার পরীক্ষার পৃষ্ঠায়, মার্কার স্টাইলিং চালু করুন এবং আপনি যখন পরিবর্তন করেন তখন কী হয় তা পর্যবেক্ষণ করুন font-size, line-height, এবং font-family মার্কার

আপনি দেখতে পারেন, বৃদ্ধি font-size কাস্টম মার্কারটিকে উল্লম্বভাবে ভুলভাবে সংযোজিত করে দেয় এবং এটি হ্রাস করে সংশোধন করা যায় না line-height. দ্য vertical-align সম্পত্তি, যা সহজেই এই সমস্যার সমাধান করতে পারে, এটি সমর্থিত নয় ::marker.

কিন্তু আপনি যে পরিবর্তন লক্ষ্য করেছেন font-family মার্কার বড় হতে পারে? এটি সেট করার চেষ্টা করুন Tahoma. ছোট-আকারের সমস্যার জন্য এটি সম্ভাব্যভাবে একটি ভাল-পর্যাপ্ত সমাধান হতে পারে, যদিও আমি পরীক্ষা করিনি যে কোন ফন্টটি প্রধান ব্রাউজার এবং অপারেটিং সিস্টেম জুড়ে সবচেয়ে ভাল কাজ করে।

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

1. কাস্টম মার্কার পরে কোন ন্যূনতম ফাঁক নেই.
2. ::marker সমর্থন করে না padding or margin.
3. padding-left on <li> ব্যবধান বাড়ায় না, যেহেতু মার্কারটি অবস্থিত inside.

সারাংশ

আমি নিবন্ধে উল্লেখ করেছি এমন সমস্ত মূল তথ্যের সংক্ষিপ্তসার এখানে রয়েছে:

1. ব্রাউজার একটি ডিফল্ট প্রয়োগ করে padding-inline-start of 40px থেকে <ul> এবং <ol> উপাদান।
2. অন্তর্নির্মিত তালিকা চিহ্নিতকারীর পরে একটি ন্যূনতম ফাঁক রয়েছে (disc, decimal, ইত্যাদি)। কাস্টম মার্কার (স্ট্রিং বা URL) এর পরে কোন ন্যূনতম ফাঁক নেই।
3. a যোগ করে ব্যবধানের দৈর্ঘ্য বাড়ানো যায় padding-left থেকে <ul>, কিন্তু শুধুমাত্র যদি মার্কার তালিকা আইটেমের বাইরে অবস্থান করা হয় (ডিফল্ট মোড)।
4. কাস্টম স্ট্রিং মার্কার বিল্ট-ইন মার্কারগুলির তুলনায় একটি ছোট ডিফল্ট আকার আছে। পরিবর্তন করা font-family on ::marker তাদের আকার বৃদ্ধি করতে পারে।

উপসংহার

নিবন্ধের শুরু থেকে কোড উদাহরণের দিকে ফিরে তাকালে, আমি মনে করি আমি এখন বুঝতে পেরেছি কেন একটি স্পেস অক্ষর আছে content মান SVG মার্কার পরে একটি ফাঁক সন্নিবেশ করার জন্য আর কোন ভাল উপায় নেই। এটি একটি সমাধান যা প্রয়োজন কারণ কোন পরিমাণ নেই margin এবং padding তালিকা আইটেমের ভিতরে অবস্থান করা একটি কাস্টম মার্কার পরে একটি ফাঁক তৈরি করতে পারে। ক margin-right on ::marker সহজে এটি করতে পারে, কিন্তু এটি সমর্থিত নয়।

পর্যন্ত ::marker আরও বৈশিষ্ট্যের জন্য সমর্থন যোগ করে, ওয়েব ডেভেলপারদের প্রায়শই মার্কার লুকানো এবং এটির সাথে অনুকরণ করা ছাড়া কোন বিকল্প থাকে না ::before ছদ্ম-উপাদান। আমাকে সম্প্রতি এটি করতে হয়েছিল কারণ আমি মার্কার পরিবর্তন করতে পারিনি background-color. আশা করি, আরও শক্তিশালী হওয়ার জন্য আমাদের বেশিক্ষণ অপেক্ষা করতে হবে না ::marker ছদ্ম-উপাদান।

• এসইও চালিত বিষয়বস্তু এবং পিআর বিতরণ। আজই পরিবর্ধিত পান।
• প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. এখানে প্রবেশ করুন.
• উত্স: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/