‏تایپوگرافی سیال رو به کانتینر نسپار

از وقتی viewport unit اومد، همه دنبال این بودن که اندازهٔ فونت با اندازهٔ دستگاه عوض بشه. قبل از min() و max() و clamp() این کار یعنی یه بریک‌پوینت بذاری و از یه جایی به بعد به یه عدد ثابت برسی، وگرنه فونت روی صفحه‌های خیلی بزرگ یا خیلی کوچک از کنترل خارج می‌شد. به گفتهٔ نویسنده با clamp() همهٔ این‌ها تو یه خط جا می‌شه.

اما یه گیر مهم هست که نویسنده اول از همه بهش اشاره می‌کنه: اگه داخل این توابع فقط واحد viewport بذاری، زوم کاربر و واحد viewport اثر همدیگه رو خنثی می‌کنن و فونت به تنظیمات دسترسی‌پذیری کاربر جواب نمی‌ده. راه‌حل اینه که یه واحد ثابت رو هم با viewport ترکیب کنی:

h1 {
  font-size: clamp(16px, 15px + 0.2vw, 18px);
}

اون 15px تغییر رو لنگر می‌کنه تا زوم درست کار کنه. مقدارش رو هم می‌تونی از محاسبهٔ همون مقالهٔ Smashing Magazine دربیاری یا با آزمون و خطا به چشم تنظیم کنی.

بخش اصلی پست سراغ container query می‌ره؛ قابلیتی که اجازه می‌ده استایل به عرض ظرفِ المنت واکنش بده، نه عرض کل صفحه. نویسنده می‌گه اولش خودش هم فکر می‌کرد گزینهٔ خوبیه برای تایپوگرافی، چون عنوانی که تو کل صفحه قشنگ جا می‌شه ممکنه تو یه پنل باریک جا نشه. ولی حالا ازش دوری می‌کنه، به یه دلیل ساده: دنبال کردن سلسله‌مراتب اطلاعات رو سخت می‌کنه.

تو مثال ویدیوی کوین پاول دو کارت با عرض متفاوت، عنوان هم‌اندازه دارن و همین هم‌اندازه بودن به خواننده می‌گه محتوای هر دو هم‌ارزه. مشکل واقعی از نظر نویسنده اینه که عرض کانتینر می‌تونه هر چیزی باشه و حتی خود محتوا می‌تونه روی اندازهٔ عنوان اثر بذاره. نتیجه‌ش اینه که اگه اندازهٔ همهٔ h2 ها رو به کانتینر گره بزنی، دیگه همهٔ h2 ها شبیه هم نیستن و بعضی‌شون شبیه یه سطح عنوانِ پایین‌تر دیده می‌شن، سطحی که ممکنه تو طراحی‌ت اصلاً وجود نداشته باشه.

نویسنده این رو با ایدهٔ خودش تو Mise en Mode مقایسه می‌کنه. اونجا هم اندازه‌ها بر اساس جای قرارگیری عوض می‌شن، ولی با مفهوم density و به‌صورت گروهی: هر چی محتوا متراکم‌تر باشه همه‌چیز تو اون ناحیه کوچک‌تر می‌شه، و ناحیه‌هایی که density یکسان دارن اندازه‌های یکسان هم دارن. فرقش اینه که کنترل دست توئه نه دست ظرف. جمع‌بندی نویسنده روشنه: برای تایپوگرافی سیال همون viewport unit رو نگه دار تا تغییرها بین ترکیب‌بندی‌های مشابه یکدست بمونه.

نکات کلیدی:

• فقط واحد viewport داخل clamp() با زوم کاربر تضاد پیدا می‌کنه؛ اضافه کردن یه مقدار ثابت مثل 15px مشکل رو حل می‌کنه
• container query برای فونت، عنوان‌های هم‌سطح رو هم‌اندازه نگه نمی‌داره و هم‌ارزی محتوا گم می‌شه
• عرض کانتینر غیرقابل پیش‌بینیه و خود محتوا هم می‌تونه اندازهٔ عنوان رو جابه‌جا کنه
• جایگزین پیشنهادی نویسنده: تغییر اندازه بر اساس density تو Mise en Mode، که گروهی و عامدانه اعمال می‌شه
• نویسنده منتظره CSS اجازه بده بر عددِ دارای واحد تقسیم کنی تا راهش ساده‌تر بشه