در سایت‌های فارسی، margin-left و padding-right هر بار باید برعکس شوند. ویژگی‌های منطقی (logical properties) به‌جای چپ و راست از «شروع» و «پایان» جهت نوشتار حرف می‌زنند و خودکار با dir سازگار می‌شوند.

معادل‌ها

  • margin-left / margin-right ← margin-inline-start / margin-inline-end
  • padding-top / padding-bottom ← padding-block-start / padding-block-end
  • left / right ← inset-inline-start / inset-inline-end
  • text-align: left ← text-align: start
  • border-left ← border-inline-start

مثال

.alert {
  padding-block: .75rem;
  padding-inline: 1rem;
  border-inline-start: 4px solid #f59e0b;
  margin-inline-end: auto;
}

.icon {
  inset-inline-end: 1rem;
}

با همین کد، اگر صفحه dir="rtl" باشد نوار رنگی در سمت راست و اگر ltr باشد در سمت چپ دیده می‌شود. برای کوتاه‌نویسی هم margin-inline: auto و padding-block را می‌توانید به‌کار ببرید.

یک توصیه: در پروژه‌های جدید از ابتدا همین ویژگی‌ها را عادت کنید؛ نگه‌داری و ترجمهٔ رابط کاربری به زبان‌های دیگر خیلی ساده‌تر می‌شود.