هم ترازی بهتر آیکون ها و برچسب ها

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

در اینجا یک مثال است:

در این مقاله دو راه حل را که بر اساس HTML استفاده می کنم نشان خواهم داد:

• نماد یک عنصر HTML است (مثلا یا )
• این نماد از طریق یک شبه عنصر به عنوان تصویر پس زمینه اضافه می شود

نماد موجود در نشانک

در این حالت یک ظرف با نماد و محتوا داریم. ما معمولا از flexbox استفاده می کنیم. مانند این:

ul class="list">
  li class="list-item">
    svg class="icon">svg>
    span class="label">How to align an icon to a label.span>
  li>
  
ul>

.list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

به طور پیش فرض خوب به نظر می رسد. اینجاست:

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

چگونه می‌توانیم زمانی که متن پیچیده می‌شود، نماد را در تراز عمودی نگه داریم؟ ابتدا به اصول اولیه برگشتم. به جای استفاده align-items: center، استفاده کردم start به عنوان یک ارزش

.list-item {
  display: flex;
  align-items: start;
  gap: 0.5rem;
}

اما این باعث یک مشکل تراز بزرگتر شد. ناحیه برجسته شده ارتفاع خط است. ارتفاع عنصر متن دارای فضای خالی در بالا و پایین آن است که از خود فونت می آید. چه زمانی align-items: start اعمال می شود، نماد با بالای ظرف تراز می شود.

اگر نماد را به سمت پایین فشار دهیم تا با ردیف بالا تراز شود چه؟

.list-item {
  display: flex;
  align-items: start;
  gap: 0.5rem;
}

.icon {
  transform: translateY(3px);
}

این کار می کند. بیایید محدودیت های آن را کنار بگذاریم و ببینیم که آیا ادامه دارد یا خیر! برای انجام این کار، نسخه ی نمایشی را به گونه ای ایجاد کردم که یک یا چند مورد از موارد زیر را تغییر می دهد:

• اندازه قلم مورد فهرست
• اندازه آیکون
• عرض ظرف را فهرست کنید

آن را امتحان کنید و متوجه شوید که چگونه نماد تراز نیست.

وقتی اندازه نماد، اندازه قلم یا عرض ظرف تغییر کند، استفاده از یک مقدار ثابت برای تبدیل کار نخواهد کرد.

راه حل: از واحد lh استفاده کنید

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

.icon {
  
  --size: var(--icon-size);
  --offset: calc((1lh - var(--size)) / 2);
  transform: translateY(var(--offset));
}

در این راه حل، اگر هر یک از سه مقدار را تغییر دهید، تراز کار می کند. در برخی موارد، افست می تواند منفی باشد، درست مانند مثال زیر:

نماد به عنوان یک شبه عنصر

گاهی اوقات ما نیازی به اضافه کردن نماد به عنوان یک عنصر HTML نداریم، بنابراین از یک شبه عنصر برای آن استفاده می کنیم.

در اینجا CSS اصلی است:

.list-item {
  display: flex;
  gap: 0.5rem;
}

.list-item::before {
  content: "";
  --size: var(--icon-size);
  width: var(--size);
  height: var(--size);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

در نگاه اول خوب به نظر می رسد، اینطور نیست؟ سعی کنید اندازه فونت را کمی افزایش دهید.

آیا متوجه شده اید که نماد قطع شده است؟ این به این دلیل است که ما باید اندازه پس زمینه را محدود کنیم.

.list-item {
  display: flex;
  gap: 0.5rem;
}

.list-item::before {
  content: "";
  --size: var(--icon-size);
  width: var(--size);
  height: var(--size);
  background-image: url("data:image/svg+xml,%3Csvg ....");
  background-size: contain;
  background-repeat: no-repeat;
}

سعی کنید اندازه فونت را بزرگتر کنید. آیا متوجه شده اید که عرض نماد در حال کوچک شدن است؟ این به این دلیل است که به طور پیش فرض عنصر flex جمع می شود. ما باید این کار را لغو کنیم.

.list-item {
  display: flex;
  gap: 0.5rem;
}

.list-item::before {
  content: "";
  --size: var(--icon-size);
  flex-shrink: 0;
  width: var(--size);
  height: var(--size);
  background-image: url("data:image/svg+xml,%3Csvg ....");
  background-size: contain;
  background-repeat: no-repeat;
}

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

راه حل

در حال حاضر آیتم لیست یک ظرف فلکس باکس است و به طور پیش فرض آیتم ها کشیده شده اند (عمودی). چرا نماد در مورد ما کشیده نمی شود؟ خوب، به این دلیل است که ما یک ارتفاع ثابت را تعیین کرده ایم.

من ویژگی height را روی auto.

.list-item {
  display: flex;
  gap: 0.5rem;
}

.list-item::before {
  content: "";
  --size: var(--icon-size);
  flex-shrink: 0;
  width: var(--size);
  height: auto;
  background-image: url("data:image/svg+xml,%3Csvg ....");
  background-size: contain;
  background-repeat: no-repeat;
}

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

کاوش:

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

.list-item {
  display: flex;
  gap: 0.5rem;
}

.list-item::before {
  content: "";
  --size: var(--icon-size);
  flex-shrink: 0;
  aspect-ratio: 1;
  width: var(--size);
  height: auto;
  background-image: url("data:image/svg+xml,%3Csvg ....");
  background-size: contain;
  background-repeat: no-repeat;
}

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

.list-item {
  display: flex;
  gap: 0.5rem;
}

.list-item::before {
  content: "";
  --size: var(--icon-size);
  --offset: calc((1lh - var(--size)) / 2);
  flex-shrink: 0;
  aspect-ratio: 1;
  width: var(--size);
  height: auto;
  background-image: url("data:image/svg+xml,%3Csvg ....");
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(var(--offset));
}

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

• فلکس باکس
• نسبت تصویر
• واحد lh
• محاسبه ()
• ارتفاع: خودکار

Outro

و این همه است. من در حین کار روی یک پروژه مشکلی را حل کردم و خواستم آن را به اشتراک بگذارم. امیدواریم چیز جدیدی یاد گرفته باشید.

با تشکر برای خواندن.

استاد چیدمان

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

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