راهنمای کامل طراحی RTL برای سایت فارسی

RTL در واقعیت چیست؟

وقتی به یک طراح می‌گویید «سایت من فارسی است»، اغلب پاسخ می‌شنوید: «حله، چیدمان رو آینه می‌کنم». این برداشت اشتباه است. RTL یعنی بازطراحی منطق چیدمان از زاویه‌ای دیگر — جایی که چشم از راست به چپ حرکت می‌کند، اولویت‌ها از راست شروع می‌شوند، و آیکون‌ها معانی متفاوتی پیدا می‌کنند.

طراح حرفه‌ای RTL از روز اول با ذهنیت دوجهته (Bidirectional) کار می‌کند، نه اینکه آخر کار بخواهد LTR را آینه کند. اضافه کردن RTL در پایان پروژه، معمولاً به باگ‌های ظاهری، چینش‌های شکسته و تجربه کاربری ضعیف منجر می‌شود.

CSS Logical Properties: ستون اصلی RTL مدرن

تا چند سال پیش، توسعه‌دهندگان مجبور بودند برای RTL دو فایل CSS بنویسند یا از کتابخانه‌هایی مثل RTLCSS استفاده کنند که خروجی LTR را معکوس می‌کرد. در ۲۰۲۶ این کار قدیمی است. CSS Logical Properties پشتیبانی کامل دارد و مرورگر خودکار جهت را براساس dir تغییر می‌دهد.

قدیمی (فیزیکی) در برابر مدرن (منطقی):

/* قدیمی: کار نمی‌کند در RTL */
.box {
  margin-left: 1rem;
  padding-right: 2rem;
  border-left: 1px solid;
}

/* مدرن: کار می‌کند در هر دو جهت */
.box {
  margin-inline-start: 1rem;
  padding-inline-end: 2rem;
  border-inline-start: 1px solid;
}

کلیدواژه‌های منطقی:

• inline-start: شروع متن (راست در RTL، چپ در LTR)
• inline-end: انتهای متن (چپ در RTL، راست در LTR)
• block-start: بالا
• block-end: پایین

Flexbox و Grid: خودکار معکوس می‌شوند

یک خبر خوب: Flexbox و Grid در RTL خودکار رفتار می‌کنند. وقتی dir="rtl" فعال است، flex-direction: row از راست به چپ جریان پیدا می‌کند بدون هیچ کد اضافه. Grid هم همینطور — ستون‌ها از راست شروع می‌شوند.

.nav {
  display: flex;
  /* در RTL، آیتم‌ها از راست به چپ می‌چینند */
  gap: 1rem;
}

این یعنی اگر از flexbox/grid استفاده کنید، احتمالاً ۸۰٪ از کار RTL خودکار انجام می‌شود.

تایپوگرافی فارسی: تنظیمات حیاتی

فونت فارسی نیاز به تنظیمات متفاوت دارد. اگر این موارد را رعایت نکنید، حتی بهترین طراحی هم ناخوانا می‌شود.

۱. line-height بالاتر

حروف فارسی نسبت به لاتین فضای عمودی بیشتری اشغال می‌کنند (به‌خاطر نقطه‌ها، کشیدگی‌ها، حرکات). line-height: 1.4 که برای انگلیسی استاندارد است، در فارسی فشرده به‌نظر می‌رسد. توصیه: ۱.۷ تا ۱.۸.

۲. font-size پایه بزرگ‌تر

کاراکترهای فارسی در هر اندازه فونت، چشمی کوچک‌تر از لاتین دیده می‌شوند. ۱۴px در انگلیسی خواناست، در فارسی نه. حداقل پیشنهادی: ۱۵ تا ۱۶px برای متن اصلی.

۳. فونت‌های وب فارسی مدرن

فونت‌های توصیه‌شده ۲۰۲۶:

• Vazirmatn: مدرن، خوانا، با نسخه variable
• IRANSans: کلاسیک، حرفه‌ای
• Estedad: نسبتاً جدید، طراحی پاک
• Yekan Bakh: برای تیترهای بزرگ
• Sahel: ساده و سبک

۴. نیم‌فاصله را نادیده نگیرید

«می‌خواهم» با نیم‌فاصله یک کلمه است؛ «می خواهم» با فاصله کامل، دو کلمه. این تفاوت روی خوانایی، سئو، و حتی شمارش کلمات اثر می‌گذارد.

آیکون‌ها: کدام معکوس، کدام نه؟

این یکی از پر تله‌ترین بخش‌های RTL است. نمی‌توان همه آیکون‌ها را آینه کرد، چون معنای برخی عوض می‌شود.

آیکون‌هایی که باید معکوس شوند:

• فلش‌های جهت‌دار (back، forward، next)
• آیکون پاراگراف و چپ‌چین/راست‌چین
• چک‌مارک‌هایی که جهت‌دار هستند
• آیکون reply و forward در ایمیل
• اسلایدر و progress bar

آیکون‌هایی که نباید معکوس شوند:

• قلب، ستاره، خانه، چرخ‌دنده
• دکمه play (همیشه از چپ به راست)
• لوگوی برندها (یوتیوب، توییتر، فیس‌بوک)
• اعداد روی آیکون‌ها
• زمان روی ساعت (همیشه ۱۲ بالا)

/* معکوس کردن آیکون فلش با CSS */
[dir="rtl"] .icon-arrow {
  transform: scaleX(-1);
}

چالش‌های واقعی RTL

۱. اعداد در متن فارسی

فارسی به‌صورت پیش‌فرض راست به چپ است، اما اعداد همیشه چپ به راست نوشته می‌شوند. این یعنی در جمله‌ای مثل «قیمت ۱۲۵,۰۰۰ تومان است»، رشته «۱۲۵,۰۰۰» باید LTR رندر شود تا درست نشان داده شود. اکثر مرورگرها این کار را خودکار انجام می‌دهند.

۲. کلمات انگلیسی در متن فارسی

وقتی «React» یا «Tailwind» در یک پاراگراف فارسی می‌آید، باید LTR رندر شود. این هم خودکار است، ولی اگر فونت فارسی شما کاراکترهای لاتین خوبی ندارد، باید fallback تعیین کنید: font-family: 'Vazirmatn', 'Inter', sans-serif;

۳. فرم‌ها و input

در فرم RTL، placeholder از راست شروع می‌شود. اما برای فیلدهای ایمیل و URL که LTR طبیعی هستند، می‌توان از dir="ltr" روی همان input استفاده کرد.

۴. جداول داده‌ای

در جدول فارسی، ستون اول باید سمت راست باشد. مرورگر این را خودکار انجام می‌دهد اگر dir="rtl" روی والد باشد. ولی اگر اعداد در جدول دارید، tabular-nums را در font-feature-settings فعال کنید برای ستون‌بندی تمیز.

چارچوب‌های مدرن و پشتیبانی RTL

تست RTL: چه چیزهایی را چک کنید؟

• چیدمان کلی: همه عناصر از راست شروع می‌شوند؟
• تایپوگرافی: فونت‌ها لود شدند؟ line-height مناسب است؟
• آیکون‌ها: جهت‌دارها معکوس شدن؟ مفهومی‌ها نشدن؟
• فرم‌ها: placeholder از راست؟ input‌های ایمیل LTR؟
• اعداد: در متن درست نمایش می‌شوند؟
• اسکرول: روی موبایل اسکرول افقی ندارد؟
• تست با native speaker: یک نفر فارسی‌زبان طبیعی بودنش را تأیید کند.

سؤالات متداول

جمع‌بندی

طراحی RTL در ۲۰۲۶ به‌شکل قابل توجهی ساده‌تر از پنج سال پیش است — CSS Logical Properties، پشتیبانی native در چارچوب‌های اصلی، و فونت‌های مدرن فارسی همگی این کار را راحت‌تر کرده‌اند. اما هنوز اصل اول پابرجاست: از روز اول دوجهته فکر کنید. RTL در پایان پروژه اضافه شود، عذاب می‌شود. اول طراحی شود، طبیعی به‌نظر می‌رسد.