2026/10/04

طراحی وب راست‌به‌چپ: ده نکته‌ی فنی برای یک سایت فارسی بی‌نقص

طراحی وب راست‌به‌چپ: ده نکته‌ی فنی برای یک سایت فارسی بی‌نقص

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

۱. هم lang و هم dir

در تگ html هر دو را بگذار: lang="fa" و dir="rtl". dir جهت پایه را مشخص می‌کند و lang به مرورگر و ابزارهای کمکی (مثل صفحه‌خوان) می‌گوید زبان محتوا چیست.

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

به‌جای margin-left و padding-right از margin-inline-start، padding-inline-end، text-align: start و border-inline-start استفاده کن. این‌طور یک فایل CSS برای فارسی و انگلیسی هر دو کار می‌کند و فلکس و گرید خودشان جهت را عوض می‌کنند.

۳. فقط آیکون‌های جهت‌دار را برگردان

فلش‌ها، دکمه‌ی «بازگشت» و علامت‌های پیمایش باید در حالت راست‌به‌چپ برعکس شوند. اما آیکون‌هایی مثل پخش ویدیو، ساعت، تیک و لوگوها معمولاً نباید برگردند.

۴. متن‌های ترکیبی فارسی و لاتین

وقتی فارسی با انگلیسی و عدد قاطی می‌شود، الگوریتم دوجهته‌ی متن (bidi) گاهی علائم نگارشی را جابه‌جا می‌کند. برای تکه‌های ورودی کاربر از <bdi> استفاده کن و برای فیلدها dir="auto". شماره تلفن، ایمیل، آدرس اینترنتی و کد را در dir="ltr" بگذار.

۵. نیم‌فاصله و فاصله‌ی حروف

کلماتی مثل «می‌شود» و «کتاب‌ها» به نیم‌فاصله (ZWNJ) نیاز دارند. در کیبورد فارسی ویندوز با Shift+Space تایپ می‌شود. نکته‌ی مهم‌تر: روی متن فارسی هرگز letter-spacing نگذار، چون حروف به‌هم‌چسبیده را از هم جدا می‌کند و خط خراب می‌شود.

۶. فونت و ارتفاع خط

فونتی انتخاب کن که حروف فارسی و ارقام را کامل پشتیبانی کند. فونت‌های متغیر مثل وزیرمتن حجم کمتری دارند؛ مجوز استفاده‌شان را بررسی کن و font-display: swap را تنظیم کن. فارسی به ارتفاع خط بیشتری نیاز دارد (حدود ۱٫۸ تا ۲) و در اندازه‌ی یکسان کمی کوچک‌تر از لاتین به نظر می‌رسد.

۷. اعداد و تاریخ

یکدست باش: یا همه ارقام فارسی (۱۲۳) یا همه لاتین. برای قالب‌بندی از Intl.NumberFormat('fa-IR') و برای تاریخ شمسی از Intl.DateTimeFormat('fa-IR') استفاده کن. در ورودی فرم‌ها هر دو نوع رقم را بپذیر و سمت سرور به لاتین تبدیل کن.

۸. فیلدهای چپ‌چین

شماره تلفن، ایمیل و آدرس معمولاً باید dir="ltr" باشند، حتی داخل صفحه‌ی راست‌به‌چپ، تا مکان‌نما و علامت‌ها درست رفتار کنند.

۹. تراز دوطرفه (justify) را با احتیاط

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

۱۰. با محتوای واقعی تست کن

با Lorem ipsum نمی‌شود فهمید تیتر بلند در موبایل چطور می‌شکند. با متن واقعی، طول‌های مختلف، عنوان‌های بلند و نام‌های ترکیبی فارسی و انگلیسی، روی iOS و اندروید تست کن.

منبع:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values