راستبهچپ کردن یک رابط کاربری، فراتر از dir="rtl"
نکتههای عملی برای ساختن رابط فارسی درست: از ویژگیهای منطقی CSS تا اعداد و تاریخ شمسی.
گذاشتن dir="rtl" روی تگ html تازه شروع کار است. چند نکته که معمولاً فراموش میشوند:
۱. از ویژگیهای منطقی استفاده کنید
بهجای margin-left و padding-right، از معادلهای منطقی استفاده کنید تا استایل در هر دو جهت
درست کار کند:
.card {
padding-inline-start: 1rem;
border-inline-start: 3px solid var(--accent);
}در Tailwind هم کلاسهای ps-*، pe-*، ms-*، me-* و text-start دقیقاً همین کار را میکنند.
۲. متن لاتین را ایزوله کنید
نام کتابخانهها، دستورها و آدرسها وسط متن فارسی میتوانند ترتیب نمایش را بههم بریزند. راهحل
استاندارد unicode-bidi است:
:lang(en),
code {
direction: ltr;
unicode-bidi: isolate;
}۳. تاریخ و عدد را با Intl بسازید
برای تاریخ شمسی و اعداد فارسی به کتابخانهٔ جانبی نیازی نیست:
new Intl.DateTimeFormat('fa-IR-u-ca-persian', { dateStyle: 'long' }).format(new Date());
new Intl.NumberFormat('fa-IR').format(1402);۴. قلم را درست انتخاب کنید
قلم باید هم فارسی و هم لاتین را پوشش بدهد و وزن متغیر داشته باشد. وزیرمتن گزینهٔ مطمئنی است و بهصورت خودمیزبان هم قابل استفاده است، بنابراین وابستگی به سرویس بیرونی ایجاد نمیکند.
۵. آیکونهای جهتدار را قرینه کنید
فلش «بعدی» در رابط راستبهچپ باید به سمت چپ باشد. برای آیکونهای SVG کافی است در حالت RTL
transform: scaleX(-1) بگذارید.