فہرست مارکر کے بعد خلا کے بارے میں آپ کو جاننے کے لیے ہر چیز کی ضرورت ہے۔

میں پڑھ رہا تھا "تخلیقی فہرست اسٹائلنگ" گوگل کے web.dev بلاگ پر اور کوڈ کی مثالوں میں سے ایک میں کچھ عجیب دیکھا ::marker مضمون کا حصہ. بلٹ ان لسٹ مارکر گولیاں، آرڈینل نمبرز اور حروف ہیں۔ دی ::marker pseudo-element ہمیں ان مارکروں کو سٹائل کرنے یا اپنی مرضی کے کردار یا تصویر سے تبدیل کرنے کی اجازت دیتا ہے۔

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

جس مثال نے میری توجہ مبذول کرائی وہ فہرست آئٹمز کے لیے حسب ضرورت مارکر کے بطور SVG آئیکن استعمال کرتی ہے۔ لیکن ایک خلائی کردار بھی ہے (" ") کے آگے سی ایس ایس ویلیو میں url() فنکشن ایسا لگتا ہے کہ اس جگہ کا مقصد حسب ضرورت مارکر کے بعد ایک خلا ڈالنا ہے۔

جب میں نے یہ کوڈ دیکھا، تو میں نے فوراً سوچا کہ کیا خلا پیدا کرنے کا کوئی بہتر طریقہ ہے۔ میں ایک جگہ شامل کرنا content زیادہ سے زیادہ حل سے زیادہ کام کی طرح محسوس ہوتا ہے۔ سی ایس ایس فراہم کرتا ہے۔ margin اور padding اور صفحہ پر عناصر کو خالی کرنے کے دوسرے معیاری طریقے۔ کیا اس صورت حال میں ان خصوصیات میں سے کوئی بھی استعمال نہیں ہو سکتا؟

پہلے، میں نے اسپیس کریکٹر کو مناسب مارجن سے بدلنے کی کوشش کی:

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

یہ کام نہیں ہوا۔ جیسا کہ یہ پتہ چلتا ہے، ::marker صرف حمایت کرتا ہے a زیادہ تر متن سے متعلق سی ایس ایس خصوصیات کا چھوٹا سیٹ. مثال کے طور پر، آپ کو تبدیل کر سکتے ہیں font-size اور color مارکر کا، اور ترتیب دے کر اپنی مرضی کے مارکر کی وضاحت کریں۔ content سٹرنگ یا یو آر ایل پر، جیسا کہ اوپر دکھایا گیا ہے۔ لیکن 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>، اور خلا کا سائز براؤزرز کے درمیان متضاد ہے۔

آخر میں، آئیے دیکھتے ہیں کہ جب ہم ڈیفالٹ لسٹ مارکر کو اپنی مرضی کے مارکر سے بدل دیتے ہیں تو کیا ہوتا ہے۔

حسب ضرورت مارکر پر سوئچ کرنا

a کی وضاحت کرنے کے دو طریقے ہیں۔ اپنی مرضی کے مارکر:

• list-style-type اور list-style-image خصوصیات
• content پر جائیداد ::marker چھدم عنصر

۔ content جائیداد زیادہ طاقتور ہے. مثال کے طور پر، یہ ہمیں استعمال کرنے کی اجازت دیتا ہے۔ counter() فہرست آئٹم کے آرڈینل نمبر تک رسائی کے لیے فنکشن ضمیر list-item مقابلہ) اور اسے اپنی مرضی کے تاروں سے سجائیں۔

بدقسمتی سے، سفاری اس کی حمایت نہیں کرتا ہے۔ content جائیداد پر ::marker ابھی تک (WebKit بگ)۔ اس وجہ سے، میں استعمال کرنے جا رہا ہوں list-style-type اپنی مرضی کے مارکر کی وضاحت کرنے کے لیے پراپرٹی۔ آپ اب بھی استعمال کر سکتے ہیں۔ ::marker سلیکٹر کے ذریعے اعلان کردہ کسٹم مارکر کو اسٹائل کرنے کے لیے list-style-type. کا وہ پہلو ::marker سفاری میں تعاون یافتہ ہے۔

کوئی بھی یونیکوڈ کریکٹر ممکنہ طور پر حسب ضرورت لسٹ مارکر کے طور پر کام کر سکتا ہے، لیکن حروف کے صرف ایک چھوٹے سے سیٹ کے اصل میں ان کے آفیشل نام میں "Bullet" ہوتا ہے، اس لیے میں نے سوچا کہ میں انہیں حوالہ کے لیے یہاں مرتب کروں۔

کریکٹر	نام	کوڈ پوائنٹ	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 یونیکوڈ میں کلیدی لفظ کا کوئی متعلقہ "Bullet" حرف نہیں ہے۔ جو کردار سب سے قریب آتا ہے وہ ہے بلیک سمال اسکوائر (▪️) ایموجی (U+25AA).

اب دیکھتے ہیں کہ جب ہم پہلے سے طے شدہ فہرست مارکر کو تبدیل کرتے ہیں تو کیا ہوتا ہے۔ list-style-type: "•" (U+2022 گولی)۔ یہ ڈیفالٹ بلٹ جیسا ہی کردار ہے، اس لیے رینڈرنگ میں کوئی بڑا فرق نہیں ہونا چاہیے۔ میرے ٹیسٹ پیج پر، آن کریں۔ list-style-type اختیار اور مارکر میں کسی بھی تبدیلی کا مشاہدہ کریں۔

جیسا کہ آپ دیکھ سکتے ہیں، دو اہم تبدیلیاں ہیں:

1. مارکر کے بعد اب کوئی کم از کم فرق نہیں ہے۔
2. گولی چھوٹی ہو گئی ہے، جیسے کہ اسے ایک چھوٹی پر پیش کیا گیا ہو۔ font-size.

کے مطابق سی ایس ایس کاؤنٹر اسٹائلز لیول 3پہلے سے طے شدہ فہرست مارکر (disc) ہونا چاہیے "سے ملتا جلتا" U+2022 گولی"۔ ایسا لگتا ہے کہ براؤزر پہلے سے طے شدہ گولی کے سائز میں اضافہ کرتے ہیں تاکہ اسے مزید قابل مطالعہ بنایا جا سکے۔ فائر فاکس یہاں تک کہ ایک خاص فونٹ استعمال کرتا ہے، -moz-bullet-fontمارکر کے لیے۔

کیا چھوٹے سائز کا مسئلہ سی ایس ایس سے حل کیا جا سکتا ہے؟ میرے ٹیسٹ پیج پر، مارکر اسٹائلنگ کو آن کریں اور دیکھیں کہ جب آپ اسے تبدیل کرتے ہیں تو کیا ہوتا ہے۔ 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وغیرہ)۔ حسب ضرورت مارکر (سٹرنگ یا یو آر ایل) کے بعد کوئی کم از کم فرق نہیں ہے۔
3. a کا اضافہ کر کے خلا کی لمبائی میں اضافہ کیا جا سکتا ہے۔ padding-left کرنے کے لئے <ul>، لیکن صرف اس صورت میں جب مارکر فہرست آئٹم (پہلے سے طے شدہ وضع) سے باہر رکھا گیا ہو۔
4. حسب ضرورت اسٹرنگ مارکر کا پہلے سے طے شدہ سائز بلٹ ان مارکر سے چھوٹا ہوتا ہے۔ کو تبدیل کرنا font-family on ::marker ان کے سائز میں اضافہ کر سکتے ہیں.

نتیجہ

مضمون کے آغاز سے کوڈ کی مثال پر نظر ڈالتے ہوئے، مجھے لگتا ہے کہ میں اب سمجھ گیا ہوں کہ اس میں خلائی کردار کیوں ہے content قدر. SVG مارکر کے بعد ایک خلا ڈالنے کا کوئی بہتر طریقہ نہیں ہے۔ یہ ایک ایسا حل ہے جس کی ضرورت ہے کیونکہ کوئی مقدار نہیں ہے۔ margin اور padding فہرست آئٹم کے اندر موجود حسب ضرورت مارکر کے بعد ایک خلا پیدا کر سکتا ہے۔ اے margin-right on ::marker یہ آسانی سے کر سکتا ہے، لیکن اس کی حمایت نہیں کی جاتی ہے۔

جب تک ::marker مزید خصوصیات کے لیے سپورٹ شامل کرتا ہے، ویب ڈویلپرز کے پاس اکثر مارکر کو چھپانے اور اس کی تقلید کے علاوہ کوئی چارہ نہیں ہوتا ہے۔ ::before چھدم عنصر. مجھے حال ہی میں یہ خود کرنا پڑا کیونکہ میں مارکر کو تبدیل نہیں کر سکتا تھا۔ background-color. امید ہے کہ ہمیں زیادہ طاقتور کے لیے زیادہ انتظار نہیں کرنا پڑے گا۔ ::marker چھدم عنصر.

• SEO سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
• پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
• ماخذ: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/