‏وسط‌چین کردن آیکون کنار متن چندخطی

تو مقالهٔ احمد شادید اومده که یه الگوی خیلی رایج تو رابط کاربری، همین لیست‌هاست که هر آیتمشون یه آیکون کنار متن داره. با display: flex و align-items: center تا وقتی متن یه خطیه همه‌چی مرتبه، ولی تا عرض لیست کم بشه و متن بشکنه به دو خط، آیکون می‌ره وسط ارتفاع کل آیتم و دیگه با خط اول هم‌تراز نیست. نویسنده می‌گه این همون چیزیه که خیلی وقت‌ها از چشم آدم در می‌ره.

اولین فکری که به ذهن می‌رسه اینه که align-items رو بذاریم روی start، ولی به گفتهٔ نویسنده این حتی بدترش می‌کنه. دلیلش line-height ـه، یعنی ارتفاع خط، که بالا و پایین حروف یه فضای خالی از خود فونت می‌ذاره. با start آیکون می‌چسبه به بالای همون فضای خالی، نه به خود حروف. پس باید آیکون رو چند پیکسل پایین آورد.

یه translateY(3px) ثابت همون لحظه جواب می‌ده، اما تا سایز فونت یا سایز آیکون یا عرض لیست عوض بشه دوباره به هم می‌ریزه. راه‌حل نویسنده اینه که افست رو نسبی حساب کنیم: نصف اختلاف بین ارتفاع یه خط (1lh) و سایز آیکون.

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

با این فرمول هر سه‌تا متغیر هم که عوض بشن، هم‌ترازی خودش درست می‌مونه. تو بعضی حالت‌ها مثلاً آیکون ۲۴ پیکسلی کنار فونت ۱۷ پیکسلی، افست منفی می‌شه و باز هم نتیجه درسته.

حالت دوم اینه که آیکون رو به‌جای تگ، با شبه‌المان ::before و background-image بذاریم. نویسنده می‌گه اینجا سه‌تا تله هست: بدون background-size: contain آیکون بریده می‌شه، بدون flex-shrink: 0 با بزرگ شدن فونت عرضش جمع می‌شه، و با ارتفاع ثابت اصلاً کشیده نمی‌شه. راه‌حل اینه که height: auto بدیم و با aspect-ratio: 1 مربع نگهش داریم، بعد همون فرمول 1lh رو روی شبه‌المان هم بزنیم.

نکات کلیدی:

• واحد lh یعنی ارتفاع یه خط متن؛ فرمول calc((1lh - var(--size)) / 2) افست لازم برای هم‌تراز کردن آیکون با خط اوله
• align-items: start آیکون رو به بالای فضای خالی line-height می‌چسبونه، نه به خود حروف
• translateY با عدد ثابت مثل ۳ پیکسل فقط برای یه ترکیب مشخص از فونت و آیکون درسته
• برای آیکون شبه‌المانی سه تنظیم لازمه: background-size: contain، flex-shrink: 0 و aspect-ratio: 1 کنار height: auto
• ابزارهایی که تو راه‌حل نهایی استفاده شدن: flexbox، aspect-ratio، واحد lh، calc() و height: auto