حروف، فاصله، و حرکت صفحه
وزن فونت، فاصله‌ی سطر فارسی، و حرکت در همین سایت؛ وزیرمتن، Inter، شکستن کلمه، و اینکه Lenis کی لود می‌شود.
نوشتهی محمد هنرور· ۴ دقیقه مطالعه
اولین چیزی که در صفحه باور می‌کنم شیء هیرو نیست. حروف است: کدام قلم، کدام وزن، سطر بعدی چقدر پایین، و آیا چیزی بی‌دلیل تکان می‌خورد. درباره‌ی من همین را در یک خط گفته: فاصله‌ی یک پیکسل، وزن یک فونت، زمان یک انیمیشن. این یادداشت جای همان انتخاب‌ها در CSS و در اسکریپت حرکت است.
مسیر و جهت مقاله‌ی دیگری است، دو مسیر، نه یک صفحه‌ی وارونه. آن را برای lang و hreflang و تقویم بخوان. این یکی پیش حروف می‌ماند.
دو قلم متغیر، بدون زیرمجموعه‌ی اضافه
انگلیسی با Inter است، فونت متغیر، وزن ۱۰۰ تا ۹۰۰ در یک فایل. فارسی با وزیرمتن، به همان شکل. روی صفحه‌ی انگلیسی پشته Inter است، بعد وزیرمتن، بعد قلم سیستم. روی فارسی ترتیب برعکس می‌شود تا کلمه به طراحی لاتین Inter نیفتد.
تعویض با :lang(fa) است و با fa-IR جور است. انتخابگری که دقیقاً fa می‌خواست هرگز روشن نمی‌شد. فونت متغیر کمکی نمی‌کند اگر خانواده‌ی غلط برنده شود.
فایل Inter قبلاً یونانی و سیریلیک و ویتنامی را هم داشت. هیچ متنی از آن‌ها استفاده نمی‌کند. استایل حالا لاتین و لاتین گسترده را نگه می‌دارد. وزیرمتن بازه‌ی عربی را برای فارسی نگه می‌دارد و لاتین را برای اسم ابزار داخل جمله: Astro، GSAP، Three.js.
وزن یک تصمیم است
عنوان خانه وزن ۸۰۰ است. خط بالای آن ۶۰۰. بدنه‌ی متن وزن معمولی است با فاصله‌ی سطر ۱٫۷. نثر فارسی در مقاله بازتر است: قالب نوشته برای فارسی فاصله‌ی سطر ۲ می‌گذارد، چون همان اندازه با نقطه و اتصال تنگ حس می‌شود.
وزن را انیمیت نمی‌کنم. عنوانی که از نازک به سیاه نرم شود شبیه بارگذاری است. وزن از نقاشی اول سر جایش است. حرکت، اگر باشد، جا و شفافیت را عوض می‌کند و فقط در صفحه‌ای که خودش خواسته.
دکمه‌ها ۶۰۰ هستند، گوشه‌گرد، و دکمه‌ی اصلی روی گرادیان رنگ تأکیدی. رنگ خاموش برای مقدمه و تاریخ و پاصفحه است تا عنوان فقط با اندازه داد نزند. در صفحه‌ی کوچک عنوان خانه محدودیت عرض را برمی‌دارد. مقیاس با clamp است تا از دسکتاپ به تلفن یک‌ضرب نپرد.
فاصله روی محور خط است
حاشیه‌ای که یعنی ابتدای سطر با margin-inline و padding-inline است، نه left و right. سرصفحه، خرده‌نان، فهرست مطالب و جداکننده‌ی عددها از ابتدای خط استفاده می‌کنند تا راست‌به‌چپ برای هر فاصله بازنویسی نخواهد. نوار مهارت‌ها عمداً direction: ltr دارد. آن استثنا محلی است.
عرض خواندن مقاله حدود هفتاد نویسه است. مقدمه‌ی خانه کوتاه‌تر است. اگر سطری در فارسی بلند حس شود، علاج عرض یا فاصله‌ی سطر است، نه قلم ریزتر که نقطه را گم کند.
شکستن حرف فارسی را می‌بُرد
اسکریپت عنوان را به کلمه تقسیم می‌کند، نه به حرف. کلمه‌ی فارسی زنجیر اتصال است. span دور هر حرف زنجیر را می‌بُرد. کد روی فاصله می‌بُرد، هر کلمه را می‌پیچد، و اگر کلمه همان data-highlight باشد گرادیان می‌گیرد. در فارسی «حسِ» است. در انگلیسی feels.
انیمیشن کلمه‌ها را بالا می‌آورد. برای حرکتِ کم اجرا نمی‌شود و در صفحه‌ی مقاله اصلاً اجرا نمی‌شود.
چه چیزی اجازه‌ی حرکت دارد
Lenis روی هر صفحه نیست. مقاله‌ها سند را روی حرکت ساده می‌گذارند، پس نه Lenis وارد می‌شود و نه GSAP. در خانه، فهرست وبلاگ، پروژه‌ها و درباره ورود هنوز صبر می‌کند. اگر prefers-reduced-motion روشن باشد، یا سرصفحه کلاس no-motion گذاشته باشد، هیچ‌کدام گرفته نمی‌شوند. بازگشت به بالا یک scrollTo ساده است.
GSAP عددها را می‌شمارد و .reveal را ظاهر می‌کند. آن بلوک‌ها از شفافیت صفر شروع می‌شوند تا ظاهر شدن جا داشته باشد. حرکت کم این را در CSS خاموش می‌کند و .reveal دیده می‌شود. ترجیح می‌دهم ورود را از دست بدهم تا کسی منتظر محوی بماند که نخواسته.
مکان‌نما و کج شدن کارت پیش از وصل شدن اشاره‌گر دقیق و حرکت کم را چک می‌کنند. صفحه‌ی لمسی مکان‌نمای ساختگی نمی‌گیرد.
Lenis اسکرول را به دست می‌گیرد. این معامله روی خانه‌ی کوتاه قابل قبول است و روی مقاله بد. قالب نوشته اسکرول بومی، نوار باریک خواندن، و فهرست مطالب را نگه می‌دارد.
ساکن هم می‌تواند تمام باشد
دستگاه حروف همان خرجی است که قبول دارم: دو فونت متغیر، وزن واقعی عنوان، فاصله‌ی سطر بازتر برای فارسی، و فاصله‌هایی که جهت نوشتن را دنبال می‌کنند. کتابخانه‌ی اسکرول و صحنه‌ی تمام‌صفحه پای هر آدرس خرج نمی‌شوند. آن هزینه‌ی دوم موضوع صفحه‌ی استاتیک، و وقتی صحنه هزینه‌اش را درمی‌آورد است.
فهرست مهارت در درباره است. چه کاری را برمی‌دارم و چه چیزی شرح عمومی نمی‌گیرد در همکاری است. جزئیات همین صفحه را اگر بخواهی دوباره بخوانی، از وزن ۸۰۰ عنوان شروع کن و بعد برو سراغ اینکه چرا حرف را جدا نمی‌کنیم: اتصال فارسی با اسپن دور هر حرف می‌شکند و این را در اسکریپت حرکت، نه در یک راهنمای کلی، نوشته‌ام.