نکته‌های ساخت وب‌سایت فارسی: راست‌چین، نیم‌فاصله، ارقام و تاریخ شمسی

ساخت سایت فارسی فقط «ترجمه‌ی متن» نیست؛ چند نکته‌ی فنی وجود دارد که اگر رعایت نشود، ظاهر و حتی جستجو و ذخیره‌ی داده خراب می‌شود. این‌ها نکته‌هایی است که در پروژه‌های خودم (مثل ClassBan و همین سایت) با آن‌ها روبه‌رو شدم.

۱. جهت و زبان صفحه

در تگ html هم زبان و هم جهت را بگذارید:

<html lang="fa" dir="rtl">

lang برای موتورهای جستجو، مرورگر و ابزارهای کمک‌خوان مهم است و dir چیدمان را برعکس می‌کند. برای تکه‌های انگلیسی داخل صفحه (مثل آدرس ایمیل یا کد) از dir="ltr" روی همان عنصر استفاده کنید تا علامت‌های نگارشی جابه‌جا نشوند.

۲. CSS منطقی به‌جای چپ و راست

به‌جای margin-left از margin-inline-start و به‌جای text-align: left از text-align: start استفاده کنید تا هر دو زبان (فارسی و انگلیسی) با یک CSS درست کار کنند. در سایت‌های دوزبانه، این کار کپی‌کردن CSS برای هر جهت را از بین می‌برد.

۳. نیم‌فاصله (ZWNJ)

نیم‌فاصله کاراکتر Unicode با کد U+200C است و برای نوشتن «می‌شود»، «کتاب‌ها» و مانند آن لازم است. در متن HTML می‌توانید مستقیم تایپ کنید یا ‌ بنویسید. نکته‌ی جستجو: بعضی کاربران با نیم‌فاصله و بعضی بدون آن جستجو می‌کنند؛ در جستجوی داخلی سایت هر دو را یکسان‌سازی (normalize) کنید.

۴. «ی» و «ک» عربی در برابر فارسی

دو شکل ي و ك (عربی) با ی و ک (فارسی) کدهای متفاوتی دارند. اگر کاربر با کیبورد یا ورودی دیگر، شکل عربی را وارد کند، جستجو و تطبیق نام‌ها خراب می‌شود. هنگام ذخیره یا جستجو، متن را نرمال کنید:

const norm = (s) => s.replace(/ي/g, 'ی').replace(/ك/g, 'ک');

۵. ارقام فارسی و انگلیسی

کاربران ممکن است «۰۹۱۲…» یا «0912…» تایپ کنند. اگر شماره‌ی تلفن یا کد ملی را ذخیره می‌کنید، قبل از اعتبارسنجی ارقام را به یک شکل (معمولاً انگلیسی) تبدیل کنید و در نمایش، هر شکلی که مخاطب ترجیح می‌دهد نشان دهید:

const toEn = (s) => s.replace(/[۰-۹]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d));

برای شماره‌ی موبایل هم حذف همه‌ی غیرارقام و افزودن صفر ابتدایی در صورت ۱۰ رقمی بودن، جلوی خطاهای ارسال پیامک را می‌گیرد (نمونه در پیامک مدرسه).

۶. تاریخ شمسی

تاریخ‌ها را در دیتابیس به شکل استاندارد (ISO / میلادی) نگه دارید و فقط هنگام نمایش به شمسی تبدیل کنید. برای تبدیل از یک کتابخانه‌ی آزموده مثل jalaali-js استفاده کنید و خودتان الگوریتم ننویسید؛ خطای یک‌روزه در سال‌های کبیسه بسیار آزاردهنده است. خروجی تاریخ شمسی در محیط‌های مختلف (مثلاً با Intl) ممکن است متفاوت باشد؛ همیشه با چند تاریخ شناخته‌شده تست کنید.

۷. فونت

از فونتی با پشتیبانی کامل فارسی (مثل Vazirmatn) استفاده کنید. برای سرعت: فقط وزن‌های لازم، فرمت woff2 و font-display: swap. در font-family چند جایگزین بگذارید (Tahoma, sans-serif) تا قبل از لود فونت متن خوانا باشد.

۸. اعداد در متن و علامت‌ها

در متن فارسی، ممیز و درصد و پرانتز با جهت‌دهی دوطرفه (bidi) ممکن است جابه‌جا نمایش داده شوند. اگر عدد یا بخش انگلیسی در جمله جابه‌جا شد، آن بخش را با <bdi> یا <span dir="ltr"> احاطه کنید.

چک‌لیست

lang="fa" dir="rtl"؛ CSS منطقی؛ نیم‌فاصله؛ نرمال‌سازی ی/ک؛ تبدیل ارقام؛ ذخیره‌ی تاریخ استاندارد؛ فونت سبک؛ و تست روی موبایل.