بازسازی جلوه متن کوتاه شده MDN

بر کسی پوشیده نیست که MDN طرح جدیدی را عرضه کرد در ماه مارس زرق و برق دار است! و تعدادی جواهرات شیرین CSS-y در آن وجود دارد که دیدن آنها سرگرم کننده است. یکی از این جواهرات این است که اجزای کارت چگونه متن کوتاه شده را مدیریت می کنند.

خیلی باحاله، آره؟ می‌خواهم آن را در مدت کوتاهی پاره کنم، اما چند چیز واقعاً مرا به این رویکرد می‌کشاند:

• این نمونه ای از قطع عمدی محتوا است. ما به آن اشاره کرده ایم از دست دادن داده های CSS در جاهای دیگر و در حالی که از دست دادن داده ها به طور کلی چیز بدی است، من از نحوه استفاده از آن در اینجا خوشم می آید زیرا گزیده ها به عنوان یک تیزر برای محتوای کامل هستند.
• این با کوتاه کردن متن با آن متفاوت است text-overflow: ellipsisموضوعی که اخیراً با اریک اگرت مطرح شد به اشتراک گذاشته شده نگرانی های او با آن استدلال اصلی علیه آن این است که هیچ راهی برای بازیابی متنی که در برش قطع می شود وجود ندارد - فناوری کمکی آن را اعلام می کند، اما کاربران بینا راهی برای بازیابی آن ندارند. رویکرد MDN ها کنترل بیشتری را در آن بخش فراهم می کند زیرا برش صرفاً بصری است.

بنابراین، چگونه MDN این کار را انجام داد؟ هیچ چیز در اینجا تا آنجایی که HTML پیش می رود خیلی جالب نیست، فقط یک ظرف با یک پاراگراف.

<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` */
}

توجه کنید که من با a تماس می گیرم --background متغیری که روی همان مقدار رنگ پس‌زمینه استفاده شده در تنظیم شده است .card خود به این ترتیب، به نظر می رسد متن در پس زمینه محو می شود. و متوجه شدم که باید نقطه دوم رنگ را در گرادینت تغییر دهم، زیرا وقتی گرادیان تا 100 درصد ترکیب می‌شود، متن کاملاً پنهان نمی‌شود. پیدا کردم 80% تا جایی شیرین برای چشمانم باشد

و بله، :after نیاز به 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 */
}

به نظر می‌رسید اضافه کردن یک پیکسل بیشتر به ارتفاع این کار را انجام می‌دهد، اما MDN وقتی به DevTools نگاه کردم، توانست بدون آن این کار را انجام دهد. بعد دوباره استفاده نمی کنم top (و یا inset-block-start) برای جبران شیب در آن جهت یا. 🤷‍♂️

حالا که p:after کاملاً در موقعیت قرار دارد، ما باید به صراحت موقعیت نسبی را در پاراگراف برای حفظ کردن اعلام کنیم :after در جریان آن در غیر این صورت، :after به طور کامل از جریان سند خارج می شود و خارج از کارت منفجر می شود. این تبدیل به CSS کامل برای .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 */
}

کار ما تمام شد، درست است؟ جواب منفی! به نظر می رسد شیب دانگ در موقعیت مناسبی قرار ندارد.

اعتراف می‌کنم که در این مورد به فکر فرو رفتم و DevTools را روی MDN راه‌اندازی کردم تا ببینم چه چیزی را از دست داده‌ام. اوه بله، :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%;
}

الان همه با هم!

و بله، به نظر می رسد به نظر می رسد که VoiceOver به متن کامل احترام می گذارد. هر چند من هیچ صفحه خوان دیگری را تست نکرده ام.

من همچنین متوجه شدم که پیاده سازی MDN حذف می شود pointer-events از جانب p:after. احتمالا تاکتیک دفاعی خوبی برای جلوگیری از رفتارهای عجیب و غریب در هنگام انتخاب متن است. من آن را اضافه کردم و انتخاب متن، حداقل در سافاری، فایرفاکس و کروم، کمی روان‌تر به نظر می‌رسد.