عرض سطر، و ضرب خواندن
عرض ستون مقاله هفتاد نویسه است، فاصله‌ی سطر فارسی دو، و حرف اول درشت فقط مال انگلیسی است؛ وزیرمتن و Inter با font-display: swap اینجا می‌آیند.
نوشتهی محمد هنرور· ۶ دقیقه مطالعه
اینکه کدام قلم برنده می‌شود و Lenis کی اجازه‌ی ورود دارد در حروف، فاصله، و حرکت صفحه آمده. این یادداشت پیش خود سطر می‌ماند: سطر چقدر حق دارد ادامه پیدا کند، سطر بعدی چقدر پایین‌تر می‌نشیند، و چه چیزی اجازه دارد ستون را ببرد. صفحه می‌تواند قلم درست داشته باشد و باز هم سخت خوانده شود. خرابی معمولاً از عرض است، یا از ضرب‌آهنگی که هیچ جا استراحت نمی‌دهد.
به این عددها امتیاز آزمایشگاهی وصل نمی‌کنم. سطر یا تمام می‌شود یا نمی‌شود، و این را با خواندن همان پاراگراف می‌شود فهمید.
ستون حدود هفتاد نویسه است
در مقاله بلوک نثر max-width: 70ch است، اندازه‌ی قلم 1.1rem، و فاصله‌ی سطر 1.85. در CSS هر ch عرض صفرِ همان قلمی است که واقعاً کشیده شده. عرض دنبال قلم می‌رود، نه دنبال یک حدس پیکسلی ثابت. هفتاد قانون خواندن نیست. عرضی است که گذاشته‌ام و دیگر دست نزده‌ام. آن‌قدر بلند که جمله بندش را تمام کند. آن‌قدر کوتاه که چشم ابتدای سطر بعد را گم نکند.
عرض‌های دیگر سایت کوتاه‌ترند و کوتاه‌تر بودنشان دلیل دارد. مقدمه‌ی خانه روی 50ch می‌ایستد. لید بخش‌ها روی 60ch. توضیح خاکستری زیر عنوان مقاله هم به 60ch محدود است. این سطرها معرفی می‌کنند. جای ماندن نیستند.
عنوان خانه چیز دیگری است. وزن ۸۰۰، مقیاس با clamp از 2.4rem تا 5.2rem، و بیشینه‌ی عرض 14ch. تیتر شکل است. پاراگراف مسیر است. اگر هر دو یک عرض داشته باشند، تیتر شبیه پاراگرافی می‌شود که درشت شده، یا پاراگراف شبیه تیتری که یادش رفته بایستد.
بدنه‌ی متن بیرون از ستون مقاله فاصله‌ی سطر 1.7 دارد. مقاله عمداً بازتر است. قالب فرض می‌کند بیشتر از یک صفحه در همان ستون می‌مانی.
فارسی یک پله هوا بیشتر می‌خواهد
وقتی زبان مقاله فارسی است، .lang-fa .prose فاصله‌ی سطر را ۲ می‌گذارد. همان 70ch با نقطه و اتصال تنگ حس می‌شود. ریز کردن قلم عرض را نجات می‌دهد و نقطه را گم می‌کند. فاصله‌ی باز همان علاج است و فقط مال مقاله است. بقیه‌ی صفحه‌ی فارسی روی همان 1.7 بدنه می‌ماند.
قلم‌ها همان‌هایی است که یادداشت تایپ گفته. با زبان fa وزیرمتن اول است. وگرنه Inter اول است. هر دو به قلم سیستم می‌رسند. هر دو متغیرند، وزن ۱۰۰ تا ۹۰۰ در یک فایل، و هر دو font-display: swap دارند. تعویض یعنی نقاشی اول ممکن است با قلم جایگزین باشد. چون عرض با ch است، وقتی قلم واقعی برسد کمی جابه‌جا می‌شود. صفرِ هر خانواده یک عرض نیست. این جابه‌جایی را قبول دارم. متنِ نامرئی تا وقتی فایل قلم برسد، هزینه‌ای است که نمی‌خواهم.
فایل Inter در این سایت لاتین و لاتین گسترده است. وزیرمتن بازه‌ی عربی را برای فارسی نگه می‌دارد و لاتین را برای اسمی که وسط جمله‌ی فارسی نشسته. جزئیات زیرمجموعه در همان یادداشت تایپ است. اینجا فقط به این درد می‌خورد که ch خاصیت قلمی است که صفر را کشیده. اگر خانواده‌ی غلط برنده شود، عرض با نقشه‌ی غلط اندازه گرفته شده.
خود عنوان مقاله letter-spacing برابر -0.01em دارد، یک قاعده برای هر دو زبان. تنگ‌ترش نمی‌کنم و برای فارسی مقدار دومی نمی‌گذارم. هوا مال فاصله‌ی سطر است، نه شکافی که بین حرف‌های متصل زورکی باز شود.
حرف درشت اول عادت انگلیسی است
مقاله‌ی انگلیسی حرف اول پاراگراف اول را شناور می‌کند. 3.6em است، وزن ۸۰۰، و گرادیان رنگ تأکیدی را می‌گیرد. انتخابگر این است: .lang-en .prose > p:first-of-type::first-letter. مقاله‌ی فارسی با آن جور نمی‌شود. حرف اولِ افتاده روی حرف متصل، زنجیر را همان‌طور می‌بُرد که اسپن دور هر حرف می‌بُرد، و شناوری left است، یعنی لبه‌ی غلط برای سطر راست‌به‌چپ. شروع مقاله‌ی فارسی خود جمله است، هم‌قد بقیه‌ی متن، با هوای بیشتر بین سطرها.
پاراگراف‌های زیر بلوک نثر حاشیه‌ی پایین 1.3rem دارند. این فاصله معمولی است. فاصله‌ی عنوان نیست. حرف درشت، جایی که هست، یک اتفاق در شروع نوشته است. روی پاراگراف‌های بعدی تکرار نمی‌شود و تزئینی نیست که هر دو زبان موظف باشند شریک شوند.
جمع کردن این‌ها در یک استایل که فارسی را انگلیسیِ وارونه بداند آسان است. قالب این کار را نمی‌کند. شروع انگلیسی یک حرف بزرگ دارد. شروع فارسی فاصله‌ی سطر ۲ دارد. هر دو ضرب‌آهنگ‌اند. یک ضرب‌آهنگ نیستند.
عنوان استراحت است
h2 داخل مقاله فاصله‌ی سطر 1.3 دارد و حاشیه‌ی بالا 2.8rem. آن حاشیه استراحت بین بخش‌هاست. اگر هر پاراگراف به همین فاصله از بعدی جدا شود، طرح تخت می‌شود و فهرست مطالب به شکست‌هایی اشاره می‌کند که موقع خواندن حسشان نمی‌کنی. عنوان همچنین scroll-margin-top: 6rem دارد و در چیدمان باریک 8.5rem، تا پرش از فهرست مطالب از زیر سرصفحه‌ی چسبان رد شود. عنوانی که بعد از کلیک دیده نشود عنوان نیست. هدفی است که زیر پوسته‌ی صفحه قایم شده.
با هاور، لنگر # به ابتدای خط اضافه می‌شود. در انگلیسی چپ است. در فارسی راست. یک قاعده، inset-inline-start، هر دو را می‌سازد. لنگر نشانی عنوان را کپی می‌کند. عرض پاراگراف زیرش را عوض نمی‌کند.
h1 صفحه بیرون از بلوک نثر است. با clamp از 2.2rem تا 3.8rem و فاصله‌ی سطر 1.15. بعد توضیح، بعد تاریخ و زمان مطالعه، بعد ستون. این ترتیب رسیدن است. بدنه لازم نیست داد بزند تا پیدا شود، چون عنوان قبلاً این کار را کرده و بعد ایستاده.
کنار ستون، نه داخل آن
فهرست مطالب ستون چسبان 240px است با فاصله‌ی 3rem از نثر. از 70ch کم نمی‌شود چون داخل آن ننشسته. شبکه به مقاله minmax(0, 1fr) می‌دهد و به فهرست ریل خودش را. در صفحه‌ی باریک فهرست نوار افقی می‌شود و حاشیه‌ی پرش عنوان بزرگ‌تر می‌شود تا آن نوار روی عنوانی که به سویش پریده‌ای ننشیند.
نواری بالای پنجره، به ارتفاع 3px، با جای اسکرول مقیاس می‌گیرد. مبدأ تبدیل در صفحه‌ی چپ‌به‌راست چپ است و وقتی dir راست‌به‌چپ باشد راست، تا نوار از ابتدای خط رشد کند. تراشه‌ی جدا دقیقه‌های مانده را از مستطیل خود نثر می‌خواند، نه از موقعیت کتابخانه‌ی اسکرول. صفحه‌ی مقاله حرکت را ساده می‌گذارد، یعنی سند data-motion="plain" دارد. اسکریپت حرکت را هنوز چیدمان وارد می‌کند، ولی GSAP و Lenis فقط وقتی گرفته می‌شوند که حرکت غنی باشد و خواننده کمتر نخواسته باشد. روی نوشته آن ماژول‌ها بیرون می‌مانند. نوار یک scaleX روی شنونده‌ی اسکرول بومی است. کل مسیر همین است.
یک تغییر نوری هست و جایی که باید، رد می‌شود. اگر prefers-reduced-motion نباشد، نثر کلاس تمرکز می‌گیرد. پاراگراف و فهرست و نقل تا وقتی از نوار میانی پنجره رد نشده‌اند شفافیت 0.55 دارند و آن‌جا به قوت کامل برمی‌گردند. نوار، ناظر تقاطع است با حاشیه‌ی ریشه‌ی -35% 0px -45% 0px. با حرکت کم این کلاس هرگز اضافه نمی‌شود. هر بلوک کامل می‌ماند. ترجیح می‌دهم تار شدن را از دست بدهم تا کسی محوی را دنبال کند که نخواسته.
دقایق سرصفحه از خود متن در زمان ساخت می‌آید. خواندنِ مارک‌داون است، نه ادعا درباره‌ی سرعت یک نفر خاص. تراشه‌ای که می‌شمارد از همان جمع استفاده می‌کند. اگر برای تو غلط باشد، باز فقط یک تراشه است. ستون به آن وابسته نیست.
سطر برای چیست
عرض همان بخشی از صفحه است که آدم بدون آزمایشگاه حس می‌کند. برای 70ch نتیجه‌ی آزمایش سرعت منتشر نمی‌کنم و فاصله‌ی سطر را به یک امتیاز ساختگی ترجمه نمی‌کنم. این عددها اینجا نیستند چون برای این یادداشت اندازه‌شان نگرفته‌ام. آزمون عملی این است که به ته سطر برسی و هنوز بدانی از کجا شروع شده.
کنار گذاشتن انیمیشن در این قالب موضوع کی انیمیشن را نمی‌آوریم است. چرا نوشته صحنه‌ی WebGL دانلود نمی‌کند در صفحه‌ی استاتیک، و وقتی صحنه هزینه‌اش را درمی‌آورد است. آن فایل HTML تمام‌شده پیش از این فاصله‌ها چه بدهکار است در صفحه‌ی استاتیک به خواننده چه بدهکار است آمده. جنس کاری که برمی‌دارم، و چه چیزی شرح عمومی نمی‌گیرد، در همکاری است.
اگر همان واقعیت را از استایل بخواهی، از ستون 70ch شروع کن، بعد فاصله‌ی سطر ۲ برای فارسی، بعد انتخابگر حرف درشت که هیچ‌وقت با مقاله‌ی فارسی جور نمی‌شود. بقیه‌اش فاصله است تا عنوان مکث باشد، نه پاراگراف دیگری با اندازه‌ی بزرگ‌تر.