RTL و تجربه کاربری فارسی: فراتر از dir="rtl"
راستبهچپ کردن layout کافی نیست. UX فارسی به تایپوگرافی، اعداد، فرمها و ریزتعاملات هم وابسته است.
علی مرتضوی
بنیانگذار پارادایس کد
RTL چیست و چه چیزی نیست
RTL جهت خواندن و جریان layout است: راست شروع، چپ پایان. اما همه چیز آینه نمیشود. آیکونهای جهتدار (back، forward) باید معناشناسی حفظ شود؛ اعداد و کد انگلیسی LTR میمانند.
html lang="fa" dir="rtl" نقطه شروع است. logical properties در CSS (margin-inline-start) از left/right سختکد شده پایدارتر است.
طراحی Figma باید از ابتدا RTL باشد، نه آینه بعدی LTR.
در کامپوننتهای third-party مثل date picker یا carousel، پیشفرض LTR رایج است. قبل از انتخاب کتابخانه، مستندات RTL آن را بخوانید و در spike فنی آزمایش کنید. هزینه override دیرهنگام از انتخاب اشتباه ابزار گرانتر است.
تایپوگرافی و خوانایی فارسی
فونت با وزنهای کافی، x-height مناسب و پشتیبانی کامل حروف فارسی. فونت لاتین-only روی متن فارسی میشکند.
line-height فارسی اغلب کمی بیشتر از لاتین میخواهد. اندازه body حداقل ۱۶px در موبایل.
اعداد: انتخاب بین فارسی (۱۲۳) و لاتین (123) باید در کل محصول یکنواخت باشد. قیمت و تاریخ با locale formatter.
برای عناوین طولانی فارسی، hyphenation و شکست خط را تست کنید. کلمه انگلیسی وسط جمله با unicode-bidi: isolate از بههمریختگی جهت جلوگیری میکند. در جدول قیمت، ستون عدد را با direction: ltr و text-align مناسب تراز کنید.
فرمها، اعتبارسنجی و پیامها
label راستچین بالای فیلد یا شناور با الگوی شناختهشده. placeholder تنها راهنما نباشد.
خطای validation زیر فیلد، فارسی و مشخص. موفقیت و loading قابل فهم.
ورودی موبایل، کد ملی، کارت — mask و direction درست. autocomplete مناسب.
در فرم چندستونه، ترتیب tab باید از راست به چپ و از بالا به پایین منطقی باشد. دکمه اصلی (ثبت) در جایگاهی باشد که انگشت یا ماوس بهطور طبیعی به آن برسد — معمولاً پایین و سمت راست در RTL.
ناوبری، جدول و داده
منوی اصلی از راست طبیعی است. breadcrumb و tab از راست به چپ.
جدول: تراز عددی و عملیات در ستون ثابت. اسکرول افقی در موبایل با sticky ستون مهم.
chevron در accordion و منو در RTL به سمت چپ باز شود.
در داشبورد، کارت KPI را با عنوان کوتاه فارسی و عدد برجسته طراحی کنید. نمودارها برچسب محور فارسی داشته باشند و legend خوانا باشد. رنگ تنها وسیله انتقال معنا نباشد.
میکروکپی و لحن
متن دکمه فعلمحور و کوتاه: «ثبت سفارش» نه «کلیک کنید». خطاها مقصر کاربر نباشند: «اطلاعات ناقص است» بهتر از «اشتباه کردید».
تاریخ شمسی در بسیاری محصولات ایرانی انتظار است. تبدیل شمسی/میلادی در نمایش و input شفاف.
احترام و رسمیت متناسب برند؛ یکنواخت در کل محصول.
از اصطلاحات ترجمهشده نامفهوم پرهیز کنید. اگر اصطلاح فنی انگلیسی لازم است، یک بار در پرانتز توضیح دهید. واژههایی مثل «لاگین» در بازار ایران رایجاند؛ سازگاری با انتظار کاربر مهمتر از ترجمه تحتاللفظی است.
تست و چکلیست RTL
در Chrome و Safari موبایل تست کنید. keyboard فارسی در input واقعی.
mixed content: جمله فارسی با کلمه انگلیسی وسط — bidi isolate (unicode-bidi) اگر لازم.
RTL بخشی از identity محصول ایرانی است. در پارادایس کد از طراحی تا کد، فارسی را first-class میدانیم نه ترجمه بعدی.
چکلیست QA: آیا modal از راست به چپ درست باز میشود؟ آیا tooltip و popover از viewport خارج نمیشوند؟ آیا اسکرولبار و overflow در containerهای تو در تو درست کار میکند؟ این موارد در LTR تستشده پیدا نمیشوند.
دانش و مقالات
نیاز به اجرای همین مفاهیم در محصولتان دارید؟
پارادایس کد از مشاوره تا پیادهسازی کامل کنار شماست.