پرش به محتوای اصلی
جغد
فارسی

راست‌به‌چپ یک وارونه‌سازی CSS نیست

چیزهایی که هنگام ساختن یک رابط واقعاً دوجهته یاد گرفتیم: آیکون‌ها، انیمیشن‌ها، قطعه‌کدها و اعداد، هرکدام قاعدهٔ خودشان را دارند.

نوید رحیمی۱ دقیقه مطالعه

افزودن dir="rtl" به تگ html پنج دقیقه طول می‌کشد و حدود هفتاد درصد کار را انجام می‌دهد. سی درصد باقی‌مانده جایی است که رابط‌های «فارسی‌شده» از رابط‌های فارسی جدا می‌شوند.

کدام آیکون‌ها باید وارونه شوند

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

قطعه‌کد و اعداد

کد همیشه چپ‌به‌راست است، حتی وسط یک بند فارسی. اگر جهت را روی بلوک کد تنظیم نکنید، پرانتزها و علائم در جای غلط ظاهر می‌شوند — چیزی که کپی‌کردن دستور را به یک تلهٔ واقعی تبدیل می‌کند.

pre, code, kbd {
  direction: ltr;
  unicode-bidi: embed;
  text-align: left;
}

خصوصیات منطقی

margin-left و padding-right را کنار بگذارید. margin-inline-start و padding-inline-end همان کار را انجام می‌دهند و در هر دو جهت درست‌اند. این تنها تغییری است که بیشترین باگ راست‌به‌چپ را یک‌جا حذف می‌کند.

بازگشت به بلاگ

اولین جغدتان را امشب راه بیندازید

یک منبع دانش وارد کنید، لحن را تنظیم کنید و کد ویجت را بگیرید. کمتر از ده دقیقه.

بدون کارت بانکی · ۵۰ پیام رایگان · راه‌اندازی زیر ۱۰ دقیقه