فاصله‌گذاری

راهنمای فاصله‌گذاری در فارسی یو آی با پشتیبانی کامل از زبان‌های راست‌به‌چپ (RTL)

مقیاس فاصله

00px0rem
0.52px0.125rem
14px0.25rem
1.56px0.375rem
28px0.5rem
2.510px0.625rem
312px0.75rem
3.514px0.875rem
416px1rem
520px1.25rem
624px1.5rem
728px1.75rem
832px2rem
936px2.25rem
1040px2.5rem
1248px3rem
1664px4rem

کلاس‌های RTL

برای پشتیبانی صحیح از RTL، از کلاس‌های منطقی (logical) به جای کلاس‌های جهت‌دار استفاده کنید.

جدول تبدیل کلاس‌ها
کلاس‌های استاندارد و معادل RTL آنها
استانداردRTL-friendlyتوضیحات
ml-*ms-*مارجین از ابتدا (راست در RTL)
mr-*me-*مارجین از انتها (چپ در RTL)
pl-*ps-*پدینگ از ابتدا (راست در RTL)
pr-*pe-*پدینگ از انتها (چپ در RTL)
end-*start-*موقعیت ابتدا
start-*end-*موقعیت انتها
text-endtext-startتراز متن به ابتدا
text-starttext-endتراز متن به انتها
border-l-*border-s-*بردر ابتدا
border-r-*border-e-*بردر انتها

سیستم گرید

Moon Grid System
سیستم گرید 12 ستونه با گاتر 16px
موبایل320px - 780px

2-4-6 ستون | مارجین: 16px | گاتر: 16px

دسکتاپ1728px+

12-6-4-2 ستون | حداقل عرض: 104px | گاتر: 16px

مثال کاربردی

استفاده از فاصله‌گذاری RTL
{/* ❌ اشتباه - جهت‌دار */}
<div className="ml-4 pr-6 text-end border-r-2">

{/* ✅ درست - منطقی (RTL-friendly) */}
<div className="ms-4 pe-6 text-start border-e-2">

{/* مثال کامل */}
<Card className="p-6">
  <div className="flex items-center gap-4">
    <Avatar className="size-12" />
    <div className="flex-1 space-y-1">
      <h3 className="font-semibold">نام کاربر</h3>
      <p className="text-sm text-muted-foreground">توضیحات</p>
    </div>
    <Button variant="ghost" size="icon" className="ms-auto">
      <MoreIcon />
    </Button>
  </div>
</Card>