اصول طراحی کامپوننت‌های RTL در سیستم طراحی سازمانی

راست‌چین‌بودن یک «کلاس اضافه» نیست؛ یک تصمیم معماری در سطح کامپوننت است. آنچه در این مقاله می‌آید، الگوهایی است که روی سیستم طراحی ۱۲۰ کامپوننتی ماه نهادینه شده — همراه با تله‌هایی که خودمان در آن افتادیم.

قانون اول: flex با منطق فیزیکی، نه جهت‌نما

بیشتر تیم‌ها برای RTL فقط dir="rtl" می‌گذارند و بعد از چیدن با left/right، همه چیز برمی‌گردد. الگوی درست:

// درست: flex + logical properties — خودش در RTL می‌چرخد
export function CardRow({ children }: { children: React.ReactNode }) {
  return <div className="flex items-center gap-4 justify-between">{children}</div>;
}

// اشتباه: موقعیت فیزیکی hard-code شده
// <div className="absolute left-4">…</div>  ← در RTL گم می‌شود

قانون دوم: متن درون جهت‌نما (bidi isolation)

یک عدد لاتین یا نام برند داخل جمله فارسی، می‌تواند ترتیب بقیه جمله را به‌هم بزند. راه‌حل: isolation برای تکه‌های درون‌خطی:

<span dir="ltr" className="inline-block unicode-bidi isolate">
  {orderNo}   {/* مثل INV-2024-1187 داخل متن فارسی */}
</span>

در CSS هم برای کل بلوک‌های ترکیبی:

.mixed-content {
  unicode-bidi: isolate;
  direction: rtl;
}

آیکون‌ها: آینه یا نه؟

• آیکون‌های جهت‌دار (فلش بازگشت، پیشرفت) در RTL باید آینه شوند: scaleX(-1) روی فقط همان دسته.
• آیکون‌های بی‌طرف (ساعت، چشم) دست‌نخورده می‌مانند.
• هرگز آیکون حاوی متن را آینه نکنید — متن وارونه خوانده می‌شود.

قانون سوم: تست خودکار جهت

دو تست سبک در CI کافی است تا RTL بشکند و کسی خبردار نشود:

تست	چه چیزی را می‌گیرد
اسکرین‌شات ۳۹۰px با dir=rtl	چیدن شکسته‌شده در موبایل
assertion عمودی نبودن scrollbar افقی	overflow پنهان

جهت‌درستی مثل کنتراست رنگ است: چشم توسعه‌دهنده آن را نمی‌بیند، فقط تست است که پیدایش می‌کند.

نتیجه‌گیری

سیستم طراحیِ واقعاً دوزبانه، از logical properties و isolation شروع می‌شود و با تستِ خودکار بسته می‌شود. هر میان‌بری در این دو نقطه، بعداً چند برابر هزینه‌اش را در نگهداری پس می‌دهد.