‏واحد lh؛ وقتی فاصله‌ها با متن جور می‌شن

احمد شدید تو مقالهٔ تازه‌ش می‌گه واحد lh مدت‌هاست تو CSS وجود داره ولی کمتر کسی از کاربردهاش حرف می‌زنه. این واحد دقیقاً برابر مقدار محاسبه‌شدهٔ خصوصیت line-height هست؛ یعنی هر 1lh همون ارتفاع یک خط از خودِ متنه. از نوامبر ۲۰۲۳ تو کروم، اج، فایرفاکس و سافاری پشتیبانی می‌شه و وضعیتش روی Baseline قرار داره.

اولین کاربرد، فاصلهٔ عمودی بین پاراگراف‌هاست. معمولاً برای این کار یه مقدار ثابت مثل 1rem می‌ذاریم، ولی نویسنده نشون می‌ده وقتی همون فاصله رو با lh بدیم ریتم عمودی متن منطقی‌تر به نظر می‌رسه، چون فاصله از روی ارتفاع خط خود متن حساب می‌شه:

p {
  margin-bottom: 1lh;
}

به گفتهٔ نویسنده قبلاً برای همین نتیجه مجبور بودیم ارتفاع یه تکه متن رو دستی ست کنیم و ازش برای فاصله‌ها استفاده کنیم؛ راهی که نگه‌داری و مقیاس‌پذیریش سخت بود. کاربرد بعدی، افکت «خط‌های دفتر» با linear-gradient هست: اگه background-size رو به‌جای مقدار ثابت روی 100% 1lh بذاریم، خط‌ها با بزرگ و کوچیک شدن فونت از متن جدا نمی‌شن.

مثال جالب‌تر، هم‌ترازی تصویرِ float شده با خط‌هاست. نویسنده ارتفاع تصویر رو با calc-size() از حالت auto می‌گیره و بعد با تابع round() به نزدیک‌ترین مضرب 1lh گرد می‌کنه تا لبهٔ پایین عکس دقیقاً روی یه خط بشینه:

.content img {
  float: left;
  height: calc-size(auto, round(up, size, 1lh));
}

دو کاربرد آخر هم همین منطق رو دنبال می‌کنن: برای محدود کردن یه لیست به پنج خط، max-height: 5lh جای مقدار پیکسلی می‌شینه و ماسک محوشدگی هم با 1lh تعریف می‌شه تا با بزرگ‌تر شدن فونت دقیقاً همون پنج خط بمونه. برای اندازهٔ آیکون کنار متن دکمه هم — ایده‌ای که نویسنده از اندی بل گرفته — یه متغیر --size: 0.8lh تعریف می‌شه و به عرض و ارتفاع SVG داده می‌شه.

نکات کلیدی:

• 1lh برابر مقدار محاسبه‌شدهٔ line-height عنصره و از نوامبر ۲۰۲۳ Baseline شده
• margin-bottom: 1lh فاصلهٔ پاراگراف‌ها رو به ریتم خطی متن گره می‌زنه
• background-size: 100% 1lh افکت خط‌های کاغذی رو مستقل از فونت‌سایز نگه می‌داره
• ترکیب calc-size() و round() ارتفاع تصویر float شده رو روی خط می‌نشونه
• max-height: 5lh و --size: 0.8lh برای سقف ارتفاع لیست و اندازهٔ آیکون کار می‌کنن