‏وقتی تراز درست، غلط به نظر میاد

نویسنده که تو Moneybox کتابخونهٔ آیکون و پایه‌های design system رو ساخته، می‌گه یه آیکون کنار یه label، حتی با flexbox کاملاً وسط‌چین، می‌تونه کج به نظر بیاد. مرورگر کارش رو درست انجام داده؛ فقط مستطیل‌ها رو تراز می‌کنه، در حالی که چیزی که چشم دنبالش می‌کنه ممکنه یه گوشهٔ دیگهٔ اون مستطیل باشه. مثال اصلی مقاله یه دکمهٔ دایره‌ای play بدون label هست که با inline-flex و align-items: center آیکون SVG رو وسطش می‌ذاره و برای دسترسی‌پذیری aria-label می‌گیره.

قدم اول اینه که مرز SVG رو با یه قانون موقت مثل outline ببینی. تو نسخهٔ خراب، viewBox (یعنی محدودهٔ مختصاتی که SVG نشون می‌ده) 0 0 32 24 هست، ولی مثلث فقط از x=6 تا x=18 رو پر می‌کنه. یعنی مرکز مثلث ۱۲ـه و مرکز viewBox ۱۶. با اصلاح viewBox به 0 0 24 24 مثلث وسط می‌شینه. البته نویسنده می‌گه این برش رو چشم‌بسته روی کل یه مجموعه آیکون اعمال نکن، چون فضای مختصات مشترکشون ممکنه عمدی باشه.

ولی حتی مثلثی که از نظر هندسی وسطه، چون سمت چپش (ضلع عمودی) پرتره، متمایل به چپ دیده می‌شه. نویسنده با translate(2 0) روی transform اون path، مثلث رو دو واحد به راست می‌بره تا centroidش وسط بوم بیفته. تأکید می‌کنه این یه گزینه برای مقایسه‌ست نه فرمول ادراک، و شاید جابه‌جایی کمتر بهتر باشه. نکتهٔ مهم جای اصلاحه: اگه مثلث همه‌جا کج دیده می‌شه، خود asset رو درست کن؛ اگه فقط تو یه دکمه مشکل داره، spacing همون component رو عوض کن.

همین مشکل برای دایره کنار مربع هم هست: با ابعاد برابر، دایره کوچیک‌تر دیده می‌شه چون گوشه‌ها رو پر نمی‌کنه. تو مثال مقاله قطر دایره از ۳۶ به ۴۰ واحد می‌رسه، در حالی که viewport SVG همون می‌مونه و layout تغییری نمی‌کنه. نویسنده به key shapes آیکون‌های IBM اشاره می‌کنه که برای شکل‌های مختلف راهنمای جدا دارن. تو تایپوگرافی هم گیومهٔ باز اول پاراگراف رو بیرون حاشیه آویزون می‌کنن (hanging punctuation) تا لبهٔ متن صاف به نظر بیاد.

متن هم مستطیل خودش رو داره: line box با حروف یکنواخت پر نمی‌شه، پس نویسنده پیشنهاد می‌ده با چند label مثل Play و Play recording و یه آیکون دیگه هم تست کنی. baseline alignment هم درمان خودکار آیکون‌ها نیست، چون SVG خودبه‌خود cap height فونت رو نداره. آخر هم توصیه می‌کنه دکمه رو بزرگ کنی، با zoom مرورگر چک کنی و کنار اصلاح بصری یه یادداشت بذاری تا کسی بعداً برش نگردونه به تراز ریاضی.

نکات کلیدی:

• flexbox فقط مستطیل عنصر SVG رو وسط می‌ذاره، نه شکلی که داخلش کشیده شده.
• تو مثال مقاله، تغییر viewBox از 0 0 32 24 به 0 0 24 24 مثلث رو از نظر هندسی وسط می‌ذاره.
• جابه‌جایی translate(2 0) centroid مثلث play رو وسط بوم ۲۴ واحدی می‌بره.
• دایره‌ای با قطر ۴۰ واحد کنار مربع ۳۶ واحدی، هم‌اندازه به نظر میاد.
• اصلاحی که همه‌جا لازمه جاش تو asset هست و اصلاحی که فقط تو یه دکمه لازمه جاش تو spacing همون component.