طراحی سایت راست‌چین (RTL): راهنمای عملی برای سایت فارسی

سایتی که برای یک زبان چپ‌به‌راست ساخته شده و بعد برای فارسی «برعکس» شده، تقریباً همیشه کمی اشتباه حس می‌شود، حتی برای بازدیدکننده‌ای که نمی‌تواند بگوید دلیلش چیست. آیکون‌ها جهت اشتباه را نشان می‌دهند، نوار پیشرفت برعکس پر می‌شود، یک فیلد فرم عجیب چیده شده یا عددها کنار متن فارسی به ترتیب اشتباه خوانده می‌شوند. هیچ‌کدام به‌تنهایی سایت را خراب نمی‌کند، ولی با هم بی‌سروصدا و فوری نشان می‌دهند نسخه‌ی راست‌به‌چپ یک فکر بعدی بوده، نه یک تصمیم طراحی واقعی. این راهنما، بر اساس ساخت سایت‌های دوزبانه‌ی فارسی و انگلیسی، چیزی را پوشش می‌دهد که واقعاً نیاز به توجه دارد.

آینه کردن ساختاری است، نه تزئینی

نقطه‌ی شروع صفت dir="rtl" روی عنصر ریشه‌ی صفحه است، همراه با lang تنظیم‌شده روی کد زبان درست. همین یک صفت کار بیشتری از آن‌چه به نظر می‌رسد انجام می‌دهد: جهت پیش‌فرض متن، چیدمان پیش‌فرض عناصر بلوکی و ترتیب خواندن منطقی چیدمان را برمی‌گرداند. ویژگی‌های منطقی CSS، مثل margin-inline-start به‌جای margin-left و padding-inline-end به‌جای padding-right، خودکار از این جهت پیروی می‌کنند و به همین دلیل ساختن از ابتدا با ویژگی‌های منطقی، نسبت به وصله‌پینه کردن یک طراحی چپ‌به‌راست بعداً، کار دوباره‌ی زیادی را حذف می‌کند.

همه‌چیز نباید آینه شود و اشتباه کردن در همین تشخیص یکی از رایج‌ترین اشتباه‌های RTL است. ناوبری، چینش متن، چیدمان فرم و بیشتر آیکون‌هایی که جهت را نشان می‌دهند، مثل پیکان‌ها و شورون‌ها، باید آینه شوند. دکمه‌ی پخش، آیکون ساعت، لوگوی شرکت، نوار پیشرفت ویدیو و بیشتر عناصر برند نباید آینه شوند، چون مثل پیکان معنای جهتی ندارند. یک قاعده‌ی سرانگشتی: اگر آیکون معنی «جلو» یا «عقب» می‌دهد، باید برگردد؛ اگر یک شیء فیزیکی یا یک لوگوی ثابت را نشان می‌دهد، نباید.

تایپوگرافی برای فارسی

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

عددها و محتوای دوجهته

اینجا جایی است که خیلی از پیاده‌سازی‌های RTL وگرنه دقیق اشتباه می‌کنند. ارقام فارسی یا عربی حتی داخل متن راست‌به‌چپ از چپ به راست نوشته می‌شوند، درست مثل شماره‌تلفن یا تاریخی که داخل یک جمله‌ی انگلیسی برعکس نمی‌شود. قیمت، شماره‌تلفن یا تاریخی که داخل جمله‌ی فارسی آمده باید با جهت داخلی درست رندر شود در حالی که درست داخل جریان راست‌به‌چپ اطرافش می‌نشیند. الگوریتم دوجهته‌ی یونیکد بیشتر این کار را خودکار در مرورگرهای مدرن انجام می‌دهد، ولی می‌تواند با استفاده‌ی بی‌دقت از direction یا override دستی unicode-bidi خراب شود، پس محتوای واقعی ترکیبی را آزمایش کنید، نه فقط رشته‌های خالص فارسی یا خالص انگلیسی، قبل از این‌که به چیدمان اعتماد کنید.

فرم‌ها، تاریخ‌ها و ورودی‌ها

فیلدهای فرم باید با جهت خواندن هم‌راستا شوند، با برچسب‌هایی که نسبت به ورودی‌شان درست جای گرفته‌اند. متن placeholder و چینش ورودی باید زبان محتوای همان فیلد را دنبال کند، که وقتی یک فرم برچسب فارسی را با فیلد ایمیل انگلیسی یا شماره‌تلفن با الفبای لاتین ترکیب می‌کند، مشخصاً اهمیت دارد. انتخاب‌گر تاریخ توجه خاصی می‌خواهد: اگر کسب‌وکار یا مخاطب شما از تقویم جلالی (فارسی) در کنار یا به‌جای تقویم میلادی استفاده می‌کند، زود تصمیم بگیرید رابط کاربری به‌طور پیش‌فرض کدام را نشان می‌دهد و صریح باشید کدام ذخیره و نمایش داده می‌شود، چون قاطی کردن بی‌صدای این دو منبع رایج خطای واقعی زمان‌بندی است، نه فقط یک مسئله‌ی ظاهری.

آزمایش درست یک سایت RTL

به فایل طراحی اعتماد نکنید. صفحه‌های ساخته‌شده را آزمایش کنید، چون تعامل بین فریم‌ورک‌ها و کامپوننت‌های شخص ثالث اغلب آینه شدن را به شکل‌هایی می‌شکند که در یک مکاپ ایستا نامرئی‌اند. منوهای ناوبری، جهت dropdown، جایگیری modal و tooltip، جهت کروسل و اسلایدر و هر کامپوننتی که از یک کتابخانه قرض گرفته شده و با فکر RTL ساخته نشده را بررسی کنید، چون خیلی از کتابخانه‌های محبوب UI حتی وقتی جهت صفحه درست تنظیم شده، پیش‌فرضشان چپ‌به‌راست است. زوم و تغییر اندازه‌ی متن خود مرورگر را هم بررسی کنید، چون چیدمان‌های RTL می‌توانند در زوم ۲۰۰ درصد به شکل‌های ظریفی بشکنند که یک چیدمان چپ‌به‌راست نمی‌شکند.

فریم‌ورک‌ها و کتابخانه‌های رایج: چه چیزی را بررسی کنید

بیشتر فریم‌ورک‌های CSS الان پشتیبانی RTL دارند، ولی «پشتیبانی از RTL» در عمل خیلی فرق می‌کند، از استایل‌های واقعاً مبتنی بر ویژگی منطقی تا یک شیت استایل وصله‌شده که فقط حالت‌های رایج را مدیریت می‌کند. قبل از تعهد به یک کتابخانه‌ی کامپوننت برای یک پروژه‌ی دوزبانه، یک صفحه‌ی واقعی با محتوای ترکیبی فارسی و انگلیسی بسازید، شامل یک فرم، یک dropdown و یک آیکون، و آن را در هر دو جهت بررسی کنید به‌جای اعتماد به ادعاهای مستندات کتابخانه. مجموعه‌ی آیکون‌ها اغلب یک شکاف است: یک کتابخانه‌ی محبوب آیکون ممکن است پیکان‌ها را خودکار وقتی جهت صفحه عوض می‌شود آینه کند، یا نکند، و این ارزش آزمایش صریح را دارد، نه فرض کردن.

چرا این موضوع برای سئو و اعتماد هم اهمیت دارد

سایتی که RTL را اشتباه انجام می‌دهد فقط ناصیقل به نظر نمی‌رسد؛ درست مثل یک ترجمه‌ی شلخته، تجربه‌ای کم‌کیفیت و کم‌اعتماد را به بازدیدکننده‌ی فارسی‌زبان یا عربی‌زبان نشان می‌دهد، و همین برداشت حتی وقتی هر باگ تکی کوچک است روی نرخ تبدیل اثر می‌گذارد. از نظر سئو، صفت‌های lang و dir درست هم برای ابزارهای دسترس‌پذیری اهمیت دارند و هم، در کنار علامت‌گذاری hreflang درست، برای این‌که موتورهای جستجو نسخه‌های زبانی صفحه‌های شما را درست بفهمند و نشان دهند، موضوعی که در راهنمای سئو سایت دوزبانه پوشش داده‌ایم.

RTL فقط فارسی و عربی نیست

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

یک چک‌لیست کوتاه

1. dir="rtl" و lang درست را روی ریشه‌ی صفحه تنظیم کنید، نه فقط روی یک div بسته‌بندی.
2. در همه‌جا از ویژگی‌های منطقی CSS به‌جای ویژگی‌های فیزیکی چپ و راست استفاده کنید.
3. آیکون‌های جهتی را آینه کنید؛ لوگو، اشیای ثابت یا آیکون‌های غیرجهتی را آینه نکنید.
4. از فونتی که واقعاً برای فارسی طراحی شده با ارتفاع خط تنظیم‌شده استفاده کنید.
5. عدد، تاریخ و متن لاتین تعبیه‌شده را در جهت داخلی درست‌شان نگه دارید.
6. صریح بین تاریخ جلالی و میلادی تصمیم بگیرید و درباره‌ی این‌که کدام ذخیره می‌شود ثابت‌قدم باشید.
7. هر کامپوننت تعاملی را در مرورگر آزمایش کنید، نه فقط طراحی ایستا.
8. جاسازی‌های شخص ثالث (نقشه، ابزارک پرداخت، پخش‌کننده‌ی ویدیو) را جدا برای مشکل جهت بررسی کنید، چون بیرون از کنترل CSS خودتان هستند.

درست ساختن RTL از ابتدا خیلی ارزان‌تر از وصله‌پینه کردنش بعداً است، که یکی از مزیت‌های فریم‌ورکی مثل Next.js است وقتی با CSS منطقی و مسیریابی زبانی درست از همان اولین commit تنظیم شود، چیزی که در مقاله‌ی چرا Next.js برای سایت کسب‌وکار دوزبانه انتخاب خوبی است پوشش داده‌ایم. اگر می‌خواهید سایت خودتان برای همین جزئیات بررسی شود، خدمات طراحی سایت و توسعه وب ما کار دوزبانه‌ی فارسی-انگلیسی و RTL را یک تخصص اصلی می‌داند، نه یک افزونه.