MDN کے کٹے ہوئے ٹیکسٹ اثر کو دوبارہ بنانا

یہ کوئی راز نہیں ہے کہ MDN ایک نیا ڈیزائن تیار کیا مارچ میں واپس. یہ خوبصورت ہے! اور اس میں کچھ میٹھے CSS-y جواہرات ہیں جنہیں دیکھنے میں مزہ آتا ہے۔ ان جواہرات میں سے ایک یہ ہے کہ کارڈ کے اجزاء کس طرح کٹے ہوئے متن کو ہینڈل کرتے ہیں۔

بہت اچھا، ہاں؟ میں اسے تھوڑی دیر میں پھاڑنا چاہتا ہوں، لیکن کچھ چیزیں واقعی مجھے اس نقطہ نظر کی طرف کھینچتی ہیں:

• یہ جان بوجھ کر مواد کو کاٹنے کی ایک مثال ہے۔ ہم نے اس کا حوالہ دیا ہے۔ سی ایس ایس ڈیٹا کا نقصان دوسری جگہوں پر. اور جب کہ ڈیٹا کا نقصان عام طور پر ایک بری چیز ہے، مجھے یہ پسند ہے کہ اسے یہاں کیسے استعمال کیا جا رہا ہے کیونکہ اقتباسات کا مطلب مکمل مواد کے لیے چھیڑنا ہے۔
• یہ متن کو تراشنے سے مختلف ہے۔ text-overflow: ellipsis، ایک ایسا موضوع جو حال ہی میں سامنے آیا جب ایرک ایگرٹ مشترکہ اس کے ساتھ اس کے خدشات۔ اس کے خلاف بنیادی دلیل یہ ہے کہ اس متن کو بازیافت کرنے کا کوئی طریقہ نہیں ہے جو کٹ جانے میں کٹ جاتا ہے — معاون ٹیک اس کا اعلان کرے گی، لیکن دیکھنے والے صارفین کے پاس اسے بازیافت کرنے کا کوئی طریقہ نہیں ہے۔ MDNs نقطہ نظر اس شعبہ میں تھوڑا سا زیادہ کنٹرول فراہم کرتا ہے کیونکہ تراشنا محض بصری ہے۔

تو، MDN نے یہ کیسے کیا؟ جہاں تک ایچ ٹی ایم ایل جاتا ہے یہاں کچھ بھی زیادہ پسند نہیں ہے، صرف ایک پیراگراف والا کنٹینر۔

<div class="card">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore consectetur temporibus quae aliquam nobis nam accusantium, minima quam iste magnam autem neque laborum nulla esse cupiditate modi impedit sapiente vero?</p>
</div>

ہم چیزوں کو آگے بڑھانے کے لیے چند بنیادی طرزیں چھوڑ سکتے ہیں۔

ایک بار پھر، کچھ بھی پسند نہیں ہے. ہمارا مقصد تیسری لائن کے بعد مواد کو ختم کرنا ہے۔ ہم سیٹ کر سکتے ہیں a max-height پیراگراف پر اور اس کے لیے اوور فلو کو چھپائیں:

.card p {
  max-height: calc(4rem * var(--base)); /* Set a cut-off point for the content */
  overflow: hidden; /* Cut off the content */
}

واہ واہ، اس کا کیا حال ہے۔ calc() سامان نوٹ کریں کہ میں نے ایک سیٹ اپ کیا۔ --base متغیر سامنے جو ایک عام ضرب کے طور پر استعمال کیا جا سکتا ہے. میں اسے حساب کرنے کے لیے استعمال کر رہا ہوں۔ font-size, line-height, padding کارڈ کے لیے، اور اب max-height پیراگراف کے. مجھے مستقل اقدار کے ساتھ کام کرنا آسان لگتا ہے خاص طور پر جب مجھے جس سائز کی ضرورت ہے وہ واقعی اس طرح کے پیمانے پر مبنی ہو۔ میں نے دیکھا کہ MDN اسی طرح کا استعمال کرتا ہے۔ --base-line-height متغیر، شاید اسی مقصد کے لیے۔

متن کی اس تیسری لائن کو ختم کرنے کے لئے حاصل کرنا؟ یہ ایک کلاسک ہے۔ linear-gradient() پیراگراف پر :after چھدم عنصر، جسے کارڈ کے نیچے دائیں کونے میں پن کیا جاتا ہے۔ لہذا، ہم اسے ترتیب دے سکتے ہیں:

.card p:after {
  content: ""; /* Needed to render the pseudo */
  background-image: linear-gradient(to right, transparent, var(--background) 80%);
  position: absolute;
  inset-inline-end: 0; /* Logical property equivalent to `right: 0` */
}

نوٹ کریں کہ میں ایک کو کال کر رہا ہوں۔ --background متغیر جو اسی پس منظر کے رنگ کی قدر پر سیٹ ہے جو پر استعمال ہوتا ہے۔ .card خود اس طرح، متن پس منظر میں دھندلا ہوتا دکھائی دیتا ہے۔ اور میں نے محسوس کیا کہ مجھے گریڈینٹ میں دوسرے کلر سٹاپ کو موافقت کرنے کی ضرورت ہے کیونکہ جب گریڈینٹ 100% تک مل جاتا ہے تو متن مکمل طور پر پوشیدہ نہیں ہوتا ہے۔ میں نے ڈھونڈا 80% میری آنکھوں کے لیے ایک پیاری جگہ بننا۔

اور ہاں، :after ضرورت a height اور width. height وہ جگہ ہے --base متغیرات دوبارہ کھیل میں آتے ہیں کیونکہ ہم چاہتے ہیں کہ اس کو پیراگراف کے مطابق بنایا جائے۔ line-height کی اونچائی کے ساتھ متن کا احاطہ کرنے کے لئے :after.

.card p:after {
  /* same as before */
  height: calc(1rem * var(--base) + 1px);
  width: 100%; /* relative to the .card container */
}

اونچائی کا ایک اضافی پکسل شامل کرنا ایک چال لگ رہا تھا، لیکن جب میں نے DevTools پر جھانکا تو MDN اسے اس کے بغیر اتارنے میں کامیاب رہا۔ پھر، میں استعمال نہیں کر رہا ہوں۔ top (یا inset-block-start) یا تو اس سمت میں میلان کو آفسیٹ کرنے کے لیے۔ 🤷‍♂️

اب جب کہ p:after بالکل پوزیشن میں ہے، ہمیں پیراگراف پر متعلقہ پوزیشننگ کو واضح طور پر بیان کرنے کی ضرورت ہے :after اس کے بہاؤ میں. ورنہ، :after دستاویز کے بہاؤ سے مکمل طور پر ہٹا دیا جائے گا اور کارڈ کے باہر سمیٹ دیا جائے گا۔ یہ اس کے لیے مکمل سی ایس ایس بن جاتا ہے۔ .card پیراگراف:

.card p {
  max-height: calc(4rem * var(--base)); /* Set a cut-off point for the content */
  overflow: hidden; /* Cut off the content */
  position: relative; /* needed for :after */
}

ہم کر رہے ہیں، ٹھیک ہے؟ Nope کیا! ایسا لگتا ہے کہ ڈانگ گریڈینٹ صحیح پوزیشن میں نہیں ہے۔

میں تسلیم کروں گا کہ میں نے اس پر دماغی کام کیا اور MDN پر DevTools کو برطرف کیا تاکہ یہ دیکھیں کہ میں کیا کھو رہا ہوں۔ ارے ہان، :after بلاک عنصر کے طور پر ظاہر کرنے کی ضرورت ہے۔ اس میں سرخ بارڈر شامل کرنے پر یہ دن کی طرح واضح ہے۔🤦‍♂️

.card p:after {
  content: "";
  background: linear-gradient(to right, transparent, var(--background) 80%);
  display: block;
  height: calc(1rem * var(--base) + 1px);
  inset-block-end: 0;
  position: absolute;
  width: 100%;
}

اب سب مل کر!

اور ہاں، لگ رہا ہے ایسا لگتا ہے کہ وائس اوور مکمل متن کا احترام کرتا ہے۔ اگرچہ میں نے کسی دوسرے اسکرین ریڈرز کا تجربہ نہیں کیا ہے۔

میں نے یہ بھی دیکھا کہ MDN کا نفاذ ہٹا دیتا ہے۔ pointer-events سے p:after. متن کا انتخاب کرتے وقت عجیب و غریب رویوں کو روکنے کے لیے شاید ایک اچھا دفاعی حربہ۔ میں نے اسے شامل کیا اور متن کا انتخاب تھوڑا سا ہموار محسوس ہوتا ہے، کم از کم سفاری، فائر فاکس اور کروم میں۔