CSS Cap Unit

مقدمه

در حین کار بر روی یک مقاله اخیر در مورد ویژگی شکاف، باید یک مربع بین دو کلمه قرار دهم و آن را در تراز نگه دارم. داشتم به روشی فکر می کردم که اندازه جعبه را با ارتفاع حرف بزرگ برابر کنم. بعد از کمی تحقیق پیدا کردم cap واحد و مطابق انتظار کار می کند. در این مقاله من مشکل و نحوه حل آن را نشان خواهم داد.

مشکل

در شکل بعدی یک مربع بین کلمات دارم. باید ارتفاع آن را با حروف بزرگ (H و W) برابر کنم.

راه حل 1: اندازه ثابت

اولین چیزی که به آن فکر کردم این بود که هر کلمه را به یک عنصر تقسیم کنم و از Flexbox برای مدیریت طرح بندی استفاده کنم.

p class="title">
  span>Hellospan>
  span class="spacer">span>
  span>Worldspan>
p>

.title {
  display: flex;
  gap: 0.5rem;
}

باحال مرحله بعدی اضافه کردن سبک جداکننده است. برای شروع این کار را انجام دادم:

.spacer {
  --size: 2rem;
  width: var(--size);
  height: var(--size);
  background-color: var(--brand-1);
}

در اینجا نتیجه است.

در نگاه اول، به نظر می رسد که ما متوجه شده ایم. بیایید سعی کنیم اندازه فونت را کمی تغییر دهیم و ببینیم چه اتفاقی می افتد.

این خوب نیست. باید ارتفاع مربع را با حرف بزرگ برابر کنم.

راه حل 2: واحد سابق

در این تکرار سعی کردم از آن استفاده کنم ex یک واحد CSS که برابر با ارتفاع حروف کوچک است.

.spacer {
  --size: 1.55ex;
  width: var(--size);
  height: var(--size);
  background-color: var(--brand-1);
}

سعی کنید اندازه متن زیر را تغییر دهید.

کار می کند! هورای در این مرحله من مطمئن نبودم که آیا این بهترین راه حل است یا خیر. تنها نقطه ضعف این است که باید با آن بازی کنید ex مقدار تا جایی که برابر با ارتفاع حرف بزرگ باشد.

راه حل 3: کلاهک

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

یک جستجوی سریع در گوگل نشان داد cap و rcap ماژول ها برای اولین بار در فایرفاکس (فوریه 2022)، کروم (سپتامبر 2023) و سافاری (دسامبر 2023) منتشر شدند.

.spacer {
  --size: 1cap;
  width: var(--size);
  height: var(--size);
  background-color: var(--brand-1);
}

یک کلمه برای توصیف آن. کمال. این چیزی است که من استفاده کردم cap واحد برای یک مورد استفاده واقعی که من از آن راضی هستم.

راه حل 3: گیلاس در بالا

اکنون که راه حل کامل را پیدا کرده ام، آیا می توان آن را حتی بهتر کرد؟

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

اگه اضافه کنم چی height: 1cap به عنوان؟

.title {
  height: 1cap;
  outline: solid 1px;
}

بهتر است، درست است؟

تراز متن و نماد

راه دیگری برای استفاده از CSS cap می تواند این باشد که یک نماد را با متن مجاور تراز کنید.

.button {
  
  padding-block: 1cap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5cap;

  svg {
    --size: 1.65cap;
    flex: 0 0 var(--size);
    width: var(--size);
    height: var(--size);
  }
}

در دمو زیر، با نوار لغزنده بازی کنید تا اندازه فونت را تغییر دهید.

Outro

این همه برای این مقاله است. آیا موارد استفاده دیگری برای CSS دارید؟ cap واحد؟ اگر چنین است، من دوست دارم از شما در توییتر (X)، Mastodon یا Threads بشنوم.