واحد CSS lh

مقدمه

واحد ارتفاع خط (lh) مدتی است که وجود دارد و من به ندرت افرادی را می بینم که نحوه استفاده از آن را به اشتراک بگذارند. در این مقاله چند مورد استفاده را که شخصاً دوست دارم به اشتراک می گذارم.

از نام آن، واحد ارتفاع خط برابر با مقدار محاسبه شده است line-height دارایی

فاصله عمودی

بیایید مثال زیر را در نظر بگیریم. من می خواهم فاصله عمودی بین پاراگراف ها را اضافه کنم. ما معمولاً از حاشیه ای با مقدار ثابت یا در بهترین حالت ترکیبی از مقدار ثابت و واحدهای ظرف یا پنجره استفاده می کنیم.

برای اهداف نمایشی، من به صورت دستی یک جداکننده پاراگراف اضافه کردم. با رنگ صورتی برجسته شده است. ارتفاع پیش فرض آن است 1rem.

من ارزش را تغییر دادم lh. توجه کنید که چگونه فاصله پاراگراف منطقی تر به نظر می رسد.

p {
  margin-bottom: 1lh;
}

اکنون فاصله گذاری بر اساس ارتفاع خط متن است. این استفاده با هک‌هایی انجام می‌شد که در آن باید به صورت دستی ارتفاع یک متن را تنظیم می‌کردیم، سپس از آن برای فاصله استفاده می‌کردیم.

اگرچه ممکن است در برخی موارد کارساز باشد، اما حفظ و مقیاس آن چالش برانگیز خواهد بود.

جلوه خط کاغذ

این یک کاربرد محبوب برای ارتفاع خط و lh آن را حتی آسان تر می کند. من خطوط را با گرادیان خطی CSS ساختم. ارتفاع الگوی تکراری روی تنظیم شده است 1lh.

این هم تصویر پس زمینه:

.content {
  background-image: linear-gradient(
    to bottom,
    transparent calc(100% - 1px),
    rgba(0, 0, 0, 0.15)
  );
  background-size: 100% 2rem;
}

در حالی که این به عنوان یک شروع کار می کند، راه حل بهینه ای نیست. سعی کنید اندازه فونت زیر را تغییر دهید و ببینید که چگونه تراز را با خطوط کاغذ شکسته است.

اگر استفاده از lh برای نقشه خواهید دید که در هنگام تغییر اندازه فونت چگونه تراز بهتر است.

من این کار را با تنظیم اندازه فونت والد انجام دادم و پاراگراف ها آن را به ارث می برند.

.content {
  font-size: 1.5rem;
  background-image: linear-gradient(
    to bottom,
    transparent calc(100% - 1px),
    rgba(0, 0, 0, 0.15)
  );
  background-size: 100% 1lh;

  p {
    font-size: inherit;
  }
}

همچنین می توانید به صورت دستی هیچ واحدی را تنظیم نکنید line-height خود والد و عناصر فرزند به طور پیش فرض آن را به ارث خواهند برد.

تراز کردن تصاویر شناور

آخرین باری که از CSS استفاده کردید کی بود؟ float? در اینجا یک استفاده سرگرم کننده از واحد ارتفاع خط آورده شده است. من باید ارتفاع تصویر با خط کنار آن تراز شود.

تصویر زیر را بسازید. توجه کنید که چگونه لبه پایینی تصویر با خطوط تراز نیست.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam sint، iure magnam quis، quia، necessitatibus nulla sequi ipsum unde nihil alias aut odio ullam aperiam animi magni perferendis vitae veritatis؟

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam sint، iure magnam quis، quia، necessitatibus nulla sequi ipsum unde nihil alias aut odio ullam aperiam animi magni perferendis vitae veritatis؟

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam sint، iure magnam quis، quia، necessitatibus nulla sequi ipsum unde nihil alias aut odio ullam aperiam animi magni perferendis vitae veritatis؟

اگر استفاده از lh برای ارتفاع تصویر همراه با round() عملکرد، کار خواهد کرد.

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

در اینجا چه اتفاقی برای قطعه CSS بالا می افتد:

• استفاده calc-size() برای بدست آوردن ارتفاع تصویر از طریق auto.
• با کمک round() عملکرد همراه با size از calc-size() و در lh برای گرد کردن ارتفاع تصویر به نزدیکترین ردیف.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam sint، iure magnam quis، quia، necessitatibus nulla sequi ipsum unde nihil alias aut odio ullam aperiam animi magni perferendis vitae veritatis؟

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam sint، iure magnam quis، quia، necessitatibus nulla sequi ipsum unde nihil alias aut odio ullam aperiam animi magni perferendis vitae veritatis؟

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam sint، iure magnam quis، quia، necessitatibus nulla sequi ipsum unde nihil alias aut odio ullam aperiam animi magni perferendis vitae veritatis؟

در این حالت، تغییر اندازه فونت باعث شکسته شدن تراز نمی شود زیرا ارتفاع خط به ارث می رسد. آن را امتحان کنید!

می توانید در مورد آن بیشتر بدانید round() از این مقاله اخیر

محتوای محو شده

در مثال زیر لیستی از آیتم ها را دارم و می خواهم ارتفاع آن را به پنج خط محدود کنم. بدون استفاده lh واحد، مدیریت آن دشوار است.

سعی کنید اندازه فونت را افزایش دهید و ببینید چه اتفاقی می افتد.

محدودیت ارتفاع دیگر با پنج ردیف اول مطابقت ندارد. این به این دلیل است که محو شدن و حداکثر ارتفاع مبتنی بر پیکسل است.

.list {
  max-height: 120px;
  mask-image: linear-gradient(
    to bottom,
    #000,
    #000 calc(100% - 30px),
    transparent 100%
  );
  overflow-y: clip;
}

در نسخه ی نمایشی زیر، نحوه افزایش ارتفاع برای مطابقت با پنج ردیف در هنگام استفاده را ببینید lh واحد

.list {
  max-height: 5lh;
  mask-image: linear-gradient(
    to bottom,
    #000,
    #000 calc(100% - 1lh),
    transparent 100%
  );
}

این نسخه ی نمایشی است:

نماد اندازه بر اساس ارتفاع خط

من در مورد این استفاده از اندی بل یاد گرفتم. ایده استفاده از آن است lh واحد برای تنظیم اندازه نماد.

.button {
  --size: 0.8lh;

  svg {
    width: var(--size);
    height: var(--size);
  }
}

نسخه ی نمایشی را بررسی کنید:

دموهای بیشتری برای استفاده از آنها وجود دارد lh واحد! اگر موارد استفاده دیگری دارید، لطفاً آنها را با من به اشتراک بگذارید، خوشحال می شوم نگاهی بیندازم!

در ادامه مطلب

درباره طرح‌بندی‌های CSS بیشتر بدانید

طرح‌بندی ساختمان می‌تواند یک کار چالش برانگیز باشد، به خصوص اگر مدل ذهنی اولیه چیدمان‌های CSS را نمی‌دانید. دیگر لازم نیست نگران آن باشید. من یک دوره تعاملی در مورد طرح بندی CSS منتشر کردم و آن را نام بردم، استاد چیدمان.

دوره Layout Maestro را سفارش دهید و مهارت های طرح بندی CSS خود را ارتقا دهید.