ساختن دیزاین‌سیستم فارسی؛ هفت تصمیمی که از روز اول باید بگیرید

بیشتر تیم‌های ایرانی دیزاین‌سیستمشان را با یک کتابخانه‌ی انگلیسی شروع می‌کنند و بعد «فارسی‌اش می‌کنند»: فونت عوض می‌شود، dir="rtl" اضافه می‌شود و چند جا با margin-right وصله می‌خورد. شش ماه بعد، هر کامپوننت تازه یک باگ راست‌به‌چپ تازه دارد و تقویم شمسی از سه کتابخانه‌ی مختلف آمده است.

دیزاین‌سیستم کاشی را با ۲۱۵ کامیت ساختم و بیشتر درس‌هایش همین بود: چند تصمیم هست که اگر روز اول درست گرفته شود، بقیه‌ی کار ساده می‌شود؛ و اگر نه، هر روز هزینه دارد. این مقاله آن هفت تصمیم است.

#۱. توکن‌ها در سه لایه

رنگ‌ها، فاصله‌ها و گوشه‌ها را در سه لایه تعریف کنید:

• پایه: مقدار خام، مثل --x-firoozeh-500: #0fa89b.
• معنایی: نقش، نه رنگ، مثل --x-bg-brand یا --x-text-secondary.
• کامپوننت: مثل --x-button-radius.

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

#۲. راست‌به‌چپ از اول، نه وصله‌ای

مهم‌ترین تصمیم فنی: در هیچ کامپوننتی از left و right استفاده نکنید. به‌جایش ویژگی‌های منطقی CSS: margin-inline-start، padding-inline-end، inset-inline-start و text-align: start. با این کار، هر کامپوننت بدون یک خط کد اضافه در هر دو جهت درست کار می‌کند؛ و اگر روزی نسخه‌ی انگلیسی لازم شد، آماده است.

کنارش، یک قاعده برای آیکون‌ها: فقط آیکون‌هایی که جهت رابط را نشان می‌دهند قرینه می‌شوند، و این با یک علامت در خود آیکون‌ست مشخص می‌شود، نه با تصمیم دستی در هر صفحه. جزئیات کامل را در چک‌لیست رابط RTL نوشته‌ام.

#۳. فونت و تایپوگرافی فارسی

یک فونت واقعاً فارسی انتخاب کنید، نه فونت لاتینی که حروف عربی پیش‌فرض دارد. چند عدد که در عمل جواب داده:

• متن بدنه ۱۵ تا ۱۶ پیکسل با فاصله‌ی خط ۱٫۸ تا ۲؛ ارتفاع حروف فارسی کمتر از لاتین است.
• برچسب‌های رابط با وزن ۵۰۰ تا ۶۰۰ خواناتر از ۴۰۰اند.
• هیچ‌وقت به متن فارسی letter-spacing ندهید؛ اتصال حروف را می‌شکند.
• یک نسخه‌ی CSS بدون فونت هم منتشر کنید تا تیم‌هایی که فونت خودشان را دارند، دو فونت بارگذاری نکنند.

#۴. داده‌های ایرانی، داخل خود سیستم

این‌جا بیشترین تفاوت با کتابخانه‌های خارجی است. کامپوننت‌هایی که هر محصول ایرانی لازم دارد و نباید هر تیم از نو بنویسد:

• تاریخ شمسی: نمایش با Intl.DateTimeFormat("fa-IR-u-ca-persian") و انتخابگر تاریخی که شنبه را اول هفته و جمعه را تعطیل بداند.
• ارقام: ورودی‌ها هر سه نوع رقم (فارسی، عربی، لاتین) را بپذیرند، فارسی نمایش دهند و لاتین ذخیره کنند.
• پول: یک واحد (تومان یا ریال) برای کل محصول، همیشه نوشته‌شده، با جداکننده‌ی «٬».
• اعتبارسنجی: کد ملی، شماره‌ی کارت، شبا، موبایل و کد پستی، هر کدام الگوریتم مشخص خودشان را دارند.

#۵. دسترس‌پذیری، جزو تعریف «تمام شده»

کامپوننتی که با کیبورد کار نکند یا صفحه‌خوان آن را نفهمد، تمام نشده است. برای هر کامپوننت این‌ها را از اول در چک‌لیست بگذارید: فوکوس قابل‌دیدن، کار کامل با کیبورد، نقش و برچسب درست برای صفحه‌خوان، و کنتراست حداقل ۴٫۵ به ۱. کنتراست را هم موقع ساخت توکن‌ها خودکار بسنجید تا رنگی که استاندارد نیست، اصلاً وارد سیستم نشود.

#۶. یک کامپوننت، همه‌جا

هر کامپوننت تازه فقط کد نیست. اگر قرار است سیستم یکپارچه بماند، هر کامپوننت باید هم‌زمان در همه‌جا اضافه شود: کد، مستندات با نمونه‌ی زنده، کیت فیگما، پیام‌های دوزبانه، تست تصویری در تم روشن و تیره و سقف حجم. کامپوننتی که فقط در کد هست و در فیگما نیست، شش ماه بعد دو نسخه‌ی متفاوت دارد.

#۷. انتشار و نسخه‌گذاری قابل‌اعتماد

تیم‌هایی که از سیستم استفاده می‌کنند باید بدانند به‌روزرسانی چه چیزی را عوض می‌کند. نسخه‌گذاری معنایی (تغییر ناسازگار فقط در نسخه‌ی اصلی)، یادداشت تغییرات برای هر نسخه و تست روی یک پروژه‌ی نمونه پیش از انتشار، اعتماد می‌سازند. بدون این‌ها، تیم‌ها از ترس، نسخه را به‌روز نمی‌کنند و سیستم عملاً چند شاخه می‌شود.

#جمع‌بندی

دیزاین‌سیستم فارسی با چند تصمیم درست در روز اول شروع می‌شود: توکن‌های لایه‌ای، ویژگی‌های منطقی CSS، فونت و تایپوگرافی فارسی، داده‌های ایرانی داخل سیستم، دسترس‌پذیری به‌عنوان بخشی از تعریف کار، یک کامپوننت در همه‌جا، و انتشار قابل‌اعتماد. بقیه‌اش تکرار همین‌هاست.