خیلی‌ها فکر می‌کنن سایت فارسی یعنی همون سایت انگلیسی با متن راست‌چین. نتیجه‌ش سایتیه که اول نگاه خوب به نظر می‌رسه، ولی تو جزئیات یه چیزایی «کج» حس می‌شه: فلش به سمت اشتباه، شماره‌تلفن به‌هم‌ریخته، فاصله‌ها نامتقارن. این‌ها جزئیاتیه که تو پروژه‌های فارسی بیشتر از بقیه می‌بینم.

جهت صفحه رو از ریشه درست تنظیم کنید

باید روی تگ html هم dir="rtl" باشه و هم lang="fa". با این دو، مرورگر ترتیب عنصرها، جهت اسکرول افقی و رفتار فرم‌ها رو خودش درست می‌کنه و لازم نیست همه چیز رو دستی وارونه کنید.

به‌جای left و right از ویژگی‌های منطقی استفاده کنید

اگه تو CSS برای فاصله و تراز از margin-left و padding-right استفاده کنید، با عوض‌شدن جهت همه‌چیز باید دوباره نوشته بشه. ویژگی‌های منطقی مثل margin-inline-start و padding-inline-end خودشون با جهت صفحه جابه‌جا می‌شن و کد تمیزتر می‌مونه.

آیکن‌ها و فلش‌ها

فلش «بعدی» تو انگلیسی به راست اشاره می‌کنه، تو فارسی باید به چپ. همین مورد تو اسلایدرها، دکمه‌های «بیشتر بخوانید»، مسیر راهنما (breadcrumb) و آکاردئون‌ها هم صدق می‌کنه. همه‌ی آیکن‌ها البته نباید برعکس بشن؛ لوگوها، آیکن ساعت یا علامت‌های جهت‌دارِ واقعی مثل «پخش» رو نباید وارونه کرد.

فیلدهای فرم

فیلد ایمیل، آدرس سایت، شماره موبایل و کد پستی محتوای چپ‌به‌راسته. اگه این فیلدها راست‌چین باشن، تایپ کردن و خوندنشون سخت می‌شه. برای این‌ها dir="ltr" بذارید، ولی متن راهنمای (placeholder) و برچسب‌ها فارسی و راست‌چین بمونن.

اعداد، نقطه‌گذاری و متن‌های ترکیبی

وقتی تو یه جمله‌ی فارسی کلمه یا عدد لاتین قرار می‌گیره، علامت‌ها (نقطه، پرانتز، علامت سؤال) گاهی سر جای اشتباه می‌پرن. برای تکه‌های ترکیبی مثل نام برند یا شماره‌ها از تگ bdi یا ویژگی unicode-bidi استفاده کنید و حتماً سایت رو با متن واقعی تست کنید، نه فقط با «لورم ایپسوم».

نیم‌فاصله و ظاهر متن

نیم‌فاصله تو کلماتی مثل «می‌خواهم» و «کتاب‌ها» فقط یه ریزه‌کاری ظاهری نیست؛ خوانایی و حتی جست‌وجوی داخل سایت رو تحت تأثیر قرار می‌ده. فونت فارسی هم معمولاً به ارتفاع خط (line-height) بیشتری نسبت به لاتین نیاز داره، وگرنه خط‌ها فشرده و خسته‌کننده می‌شن.

جمع‌بندی

راست‌به‌چپ بودن یه تنظیم نیست، یه نگاه از ابتدای پروژه‌ست. رعایتش وقت زیادی نمی‌گیره، ولی تفاوتش رو کاربر فارسی‌زبون حس می‌کنه، حتی اگه نتونه بگه دقیقاً چی بهتر شده. درباره‌ی این‌که چرا قالب‌های آماده اغلب تو این بخش ضعیف‌ان، تو مقاله‌ی اختصاصی یا قالب آماده هم نوشتم.

اگه سایتی دارید که تو این جزئیات مشکل داره، پیام بدید تا نگاهش کنم.

شروع یک پروژه‌ی جدید

برای فروشگاه، پرتفولیو یا هر ایده‌ی دیگه‌ای — بگید چی لازم دارید.

شروع پروژه ←