[ فرانت‌اند ]

راست‌چین کردن یک طراحی، فقط آینه کردن نیست

۶ دقیقه مطالعه

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

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

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

همین برای text-align: start به‌جای left، و inset-inline-start به‌جای left در موقعیت‌دهی صادق است.

چیزی که با ویژگی منطقی درست نمی‌شود

transform: translateX جهت‌آگاه نیست. مقدار مثبت همیشه به راست جابه‌جا می‌کند، فارغ از جهت صفحه. هر انیمیشنی که با آن ساخته شده باید برای حالت راست‌چین علامتش عوض شود.

نشانهٔ این باگ: نوار متحرک یا اسلایدری که محتوا را به سمتی می‌برد که از آن سمت چیزی برای جایگزینی نمی‌آید، و کم‌کم فضای خالی باز می‌شود.

چه چیزی نباید آینه شود

آیکون‌هایی که معنای ذاتی دارند: دکمهٔ پخش، لوگوها، نمادهای علمی، و اعداد. فلش «بعدی» باید بچرخد چون به جهت حرکت اشاره دارد؛ آیکون پخش نباید، چون قرارداد جهانی است.

نمودار زمانی هم معمولاً نباید برعکس شود، مگر اینکه محورش را هم برچسب‌گذاری مجدد کنید.

اعداد و متن لاتین

عدد و واژهٔ انگلیسی داخل جملهٔ فارسی چپ‌به‌راست خوانده می‌شوند و مرورگر باید این را تشخیص بدهد. وقتی علامت یا پرانتز به آن‌ها می‌چسبد، تشخیص گاهی اشتباه می‌شود و ترتیب نمایش به هم می‌ریزد. بسته‌بندی در عنصری با جهت مشخص، مطمئن‌ترین راه است.

اسکرول افقی

در حالت راست‌چین، مقدار scrollLeft در مرورگرهای مختلف رفتار یکسانی نداشته است. اگر روی آن حساب باز می‌کنید، در هر سه موتور اصلی تست کنید.

تست معنادار

با متن واقعی فارسی تست کنید، نه با متن انگلیسی در صفحهٔ راست‌چین. طول کلمات، ارتفاع خط و شکستن خط در فارسی متفاوت است و بسیاری از مشکلات چیدمان فقط با محتوای واقعی خودشان را نشان می‌دهند.