طراحی راست‌به‌چپ درست: فراتر از برعکس کردن صفحه
محصول فارسی خوب، ترجمه‌ی آینه‌ای یک محصول انگلیسی نیست. جهت، تایپوگرافی، ارقام، متن دوزبانه و آیکن‌ها هر کدام قاعده‌ی خودشان را دارند. راهنمای عملی برای طراحی و پیاده‌سازی رابط راست‌به‌چپ.
بیشتر ابزارها و قالب‌های طراحی برای زبان‌های چپ‌به‌راست ساخته شده‌اند. نتیجه این است که خیلی از محصولات فارسی حس یک ترجمه‌ی شتاب‌زده را دارند: همه‌چیز برعکس شده، ولی هیچ‌چیز درست سر جایش نیست.
راست‌به‌چپ درست، یک تنظیم نیست؛ مجموعه‌ای از تصمیم‌هاست.
جهت را منطقی بنویسید، نه فیزیکی
اولین و مهم‌ترین اصل فنی: به جای «چپ» و «راست»، از «ابتدا» و «انتها» استفاده کنید.
CSS امروز ویژگی‌های منطقی دارد. به جای margin-left می‌نویسید margin-inline-start. در فارسی این یعنی راست، در انگلیسی یعنی چپ. یک کد، دو زبان.
| فیزیکی | منطقی |
|---|---|
margin-left | margin-inline-start |
padding-right | padding-inline-end |
text-align: left | text-align: start |
left: 0 | inset-inline-start: 0 |
اگر از ابتدا این‌طور بنویسید، اضافه کردن زبان دوم تقریباً رایگان است. همین سایت با یک مجموعه استایل، هم فارسی و هم انگلیسی را نمایش می‌دهد.
چه چیزهایی برعکس می‌شوند و چه چیزهایی نه
همه‌چیز آینه نمی‌شود. این فهرست جلوی بیشتر خطاها را می‌گیرد.
برعکس می‌شوند:
- چیدمان کلی صفحه و ترتیب ستون‌ها.
- آیکن‌های جهت‌دار: فلش «بعدی»، «برگشت».
- نوار پیشرفت و اسلایدر.
- ترتیب مراحل یک فرایند.
برعکس نمی‌شوند:
- لوگوها.
- آیکن‌هایی که جهت ندارند: جستجو، تنظیمات.
- دکمه‌های پخش رسانه؛ پخش همیشه به سمت راست اشاره می‌کند.
- ساعت و نمودارهای زمانی در بیشتر موارد.
- کد، نشانی وب، ایمیل و شماره‌ی تلفن.
متن دوزبانه
متن فارسی واقعی پر از واژه‌ی لاتین است: نام محصول، اصطلاح فنی، نشانی. وقتی این دو در یک خط کنار هم می‌آیند، مرورگر باید تصمیم بگیرد هر تکه کدام طرف برود و همیشه درست حدس نمی‌زند.
علامت نگارشی که به آخر یک واژه‌ی لاتین چسبیده، ناگهان به ابتدای خط می‌پرد. راه‌حل، جدا کردن صریح تکه‌ی لاتین با ابزارهای ایزوله‌سازی جهت است تا مرورگر بداند این بخش مستقل است.
برای فیلدهای ورودی هم همین است: فیلد ایمیل و نشانی وب باید همیشه چپ‌به‌راست باشد، حتی در صفحه‌ی فارسی.
تایپوگرافی فارسی
- ارتفاع خط بیشتر. حروف فارسی به فضای عمودی بیشتری نیاز دارند. ارتفاع خطی که برای انگلیسی مناسب است، در فارسی خفه به نظر می‌رسد.
- فاصله‌گذاری حروف ممنوع. حروف فارسی به هم متصل‌اند. فاصله دادن میان آن‌ها، که در طراحی انگلیسی رایج است، واژه را می‌شکند.
- حروف بزرگ وجود ندارد. تأکیدی که در انگلیسی با حروف بزرگ ساخته می‌شود، در فارسی باید با وزن یا رنگ ساخته شود.
- فونت با وزن‌های کافی. یک فونت فارسی خوب با چند وزن، بیش از هر تزئینی به خوانایی کمک می‌کند.
- طول خط. خط خیلی بلند، خواندن را سخت می‌کند؛ در فارسی هم.
نیم‌فاصله
نیم‌فاصله جزء درست‌نویسی فارسی است: «می‌شود»، «کتاب‌ها»، «خانه‌ی». نبودنش متن را آماتور نشان می‌دهد و اگر به جایش فاصله‌ی کامل بگذارید، واژه در انتهای خط می‌شکند.
برای محتوای محصول، بررسی خودکار نیم‌فاصله ارزش دارد. در این سایت، اعتبارسنجی محتوا الگوهای رایج نبودِ نیم‌فاصله را هشدار می‌دهد.
ارقام و تاریخ
- ارقام فارسی در متن فارسی. ۱۲۳ نه 123.
- ذخیره همیشه لاتین. در پایگاه داده ارقام لاتین نگه دارید و هنگام نمایش تبدیل کنید.
- ورودی هر دو را بپذیرد. کاربر ممکن است با هر صفحه‌کلیدی بنویسد.
- تقویم خورشیدی. برای کاربر ایرانی تاریخ میلادی معنای کمی دارد.
- جداکننده‌ی هزارگان و درصد هم نسخه‌ی فارسی دارند.
خطاهای رایج
- آینه کردن کل صفحه با یک دستور و فراموش کردن استثناها.
- فلش‌هایی که به سمت اشتباه اشاره می‌کنند.
- نوار پیشرفتی که از چپ پر می‌شود.
- علامت نگارشی سرگردان کنار واژه‌ی لاتین.
- عدد لاتین وسط متن فارسی.
- انیمیشن ورودی که از سمت اشتباه می‌آید.
- آزمایش نکردن با متن واقعی؛ متن فارسی معمولاً طول متفاوتی با انگلیسی دارد.
آزمون
رابط راست‌به‌چپ را باید با محتوای واقعی دید، نه با متن ساختگی:
- واژه‌های بلند و کوتاه.
- خط‌هایی که واژه‌ی لاتین و عدد دارند.
- حالت‌های خطا و خالی.
- هر دو زبان، اگر محصول دوزبانه است.
جمع‌بندی
طراحی راست‌به‌چپ خوب دیده نمی‌شود؛ فقط حس درستی می‌دهد. جهت منطقی، تایپوگرافی مناسب فارسی، ایزوله‌سازی متن لاتین و نمایش درست ارقام، محصولی می‌سازند که کاربر فارسی‌زبان حس می‌کند برای خودش ساخته شده است.
مطلب مرتبط: سیستم طراحی برای تیم‌های کوچک.