جمع‌بندی عملی: Logical Properties در طراحی چندزبانه و RTL

در طول این فصل، تک‌تک اجزای Logical Properties رو دیدیم: مفهوم پایه، دو محور Block و Inline، Propertyهای واقعی Margin/Padding/Border، و در نهایت Writing Modes. حالا وقتشه همه این‌ها رو در یک بستر کاملاً عملی ببینیم: چطور یک طراحی رو، از ابتدا، به‌گونه‌ای بسازیم که بین زبان‌های RTL (مثل فارسی) و LTR (مثل انگلیسی)، بدون نیاز به بازنویسی، به‌درستی کار کنه.

سناریوی واقعی: یک وب‌سایت دوزبانه

فرض کن قراره یک وب‌سایت بسازیم که هم نسخه فارسی داره (RTL) و هم نسخه انگلیسی (LTR). چطور باید CSS رو بنویسیم که هر دو نسخه، بدون دوبار نوشتن استایل، به‌درستی نمایش داده بشن؟

<html lang="fa" dir="rtl">
  ...
</html>

<html lang="en" dir="ltr">
  ...
</html>

نقطه شروع، همیشه ویژگی dir روی تگ htmlه (یا هر عنصر دیگه‌ای که نیاز به جهت متفاوت داره). این ویژگی، دقیقاً همون چیزیه که مرورگر برای تشخیص جهت Inline Axis، بهش نگاه می‌کنه.

گام اول: جایگزینی کامل Propertyهای فیزیکی

/* اشتباه: فقط برای LTR درست کار می‌کند */
.sidebar {
  float: left;
  margin-right: 20px;
  border-left: 1px solid #ddd;
}

/* درست: با هر دو جهت هماهنگ است */
.sidebar {
  float: inline-start;
  margin-inline-end: 20px;
  border-inline-start: 1px solid #ddd;
}

همون‌طور که در درس‌های قبل دیدیم، اولین و مهم‌ترین قدم، جایگزینی تمام Propertyهای فیزیکی (left، right، margin-left، border-right و مشابه‌ها) با معادل منطقی‌شونه. توجه کن که حتی float (که در فصل‌های قبل به‌طور محدود بهش اشاره کردیم) هم نسخه منطقی داره: float: inline-start به‌جای float: left.

گام دوم: استفاده از inset به‌جای top/left/right/bottom

/* اشتباه */
.tooltip {
  position: absolute;
  top: 0;
  left: 100%;
}

/* درست */
.tooltip {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 100%;
}

در فصل ۱۰، با Offset Properties (یعنی top، right، bottom، left) آشنا شدیم. این Propertyها هم معادل منطقی خودشون رو دارن: inset-block-start (معادل top)، inset-block-end (معادل bottom)، inset-inline-start و inset-inline-end. این مجموعه Property، با پیشوند inset، دقیقاً همون الگوی آشنای block/inline و start/end رو دنبال می‌کنه که در سراسر این فصل دیدیم.

گام سوم: text-align با start و end

/* اشتباه */
p {
  text-align: left;
}

/* درست */
p {
  text-align: start;
}

همون‌طور که در فصل ۸ به‌طور خلاصه اشاره کردیم، text-align: start به‌جای left، به‌طور خودکار در حالت RTL به راست، و در حالت LTR به چپ، چیده می‌شه؛ دقیقاً همون منطق منطقی‌ای که در این فصل دنبال کردیم.

یک کامپوننت کامل: کارت اعلان با پشتیبانی دوزبانه

.notification-card {
  display: flex;
  align-items: center;
  padding-block: 12px;
  padding-inline: 16px;
  border-inline-start: 4px solid crimson;
  margin-block-end: 12px;
  text-align: start;
}

.notification-card__icon {
  margin-inline-end: 10px;
}
<div class="notification-card" dir="rtl">
  <span class="notification-card__icon">⚠️</span>
  <p>این یک پیام هشدار است.</p>
</div>

این کامپوننت، بدون هیچ تغییری در CSS، در هر دو حالت dir="rtl" و dir="ltr"، به‌درستی نمایش داده می‌شه: نوار رنگی همیشه سمت شروع متنه، فاصله آیکون همیشه در جهت درست قرار می‌گیره، و متن همیشه از سمت درست چیده می‌شه.

چه زمانی هنوز از Propertyهای فیزیکی استفاده می‌کنیم؟

مهمه بدونیم Logical Properties، جایگزین همیشگی و اجباری هر Property فیزیکی نیستن. بعضی مفاهیم، ذاتاً به یک جهت فیزیکی خاص وابسته‌ان و معنایی «منطقی» ندارن؛ مثلاً وقتی می‌خوایم یک المان رو دقیقاً روی محور عمودی صفحه (صرف‌نظر از جهت متن) وسط‌چین کنیم، یا وقتی با مفاهیمی مثل گرانش بصری (مثلاً یک سایه که همیشه باید به سمت پایین بیفته، صرف‌نظر از جهت متن) کار می‌کنیم، همچنان از مقادیر فیزیکی (مثل box-shadow با افست ثابت) استفاده می‌کنیم؛ چون اون جلوه بصری، ربطی به جهت نوشتار نداره.

یک جدول مرجع سریع برای کل فصل

دسته فیزیکی منطقی
Margin margin-top/right/bottom/left margin-block-start/inline-end/block-end/inline-start
Padding padding-top/right/bottom/left padding-block-start/inline-end/block-end/inline-start
Border border-top/right/bottom/left border-block-start/inline-end/block-end/inline-start
Position Offset top/right/bottom/left inset-block-start/inline-end/block-end/inline-start
Text Align left/right start/end
Float left/right inline-start/inline-end

سازگاری مرورگرها

Logical Properties امروزه در تمام مرورگرهای مدرن پشتیبانی می‌شن. با این حال، برخی از مقادیر جدیدتر و ترکیبی‌تر (مثل بعضی شورت‌هندهای پیچیده‌تر inset) ممکنه در مرورگرهای قدیمی‌تر پشتیبانی نشن؛ همیشه پیش از استفاده گسترده در یک پروژه واقعی، بررسی وضعیت پشتیبانی مرورگرهای هدف پروژه توصیه می‌شه.

نکات مهم

  • برای طراحی چندزبانه و RTL، تمام Propertyهای فیزیکی مرتبط با جهت (margin، padding، border، inset، text-align، float) باید با معادل منطقی جایگزین شوند.
  • ویژگی dir روی تگ html (یا هر عنصر دیگر)، مبنای تشخیص جهت Inline Axis برای مرورگر است.
  • Logical Properties جایگزین اجباری همه‌جا نیستند؛ برای جلوه‌های بصری مستقل از جهت متن (مثل سایه‌های ثابت)، همچنان از مقادیر فیزیکی استفاده می‌شود.

اشتباهات رایج

  • فراموش کردن جایگزینی همه Propertyهای فیزیکی مرتبط با جهت در یک کامپوننت، که باعث می‌شود فقط بخشی از آن با RTL هماهنگ شود.
  • استفاده نادرست از Logical Properties برای مفاهیمی که ذاتاً به جهت فیزیکی وابسته‌اند و نباید با تغییر جهت سند تغییر کنند.
  • فراموش کردن تعریف ویژگی dir روی سند یا عنصر، که باعث می‌شود مرورگر نتواند جهت درست را تشخیص دهد.

جمع‌بندی

طراحی موفق برای چندزبانگی و RTL، نیازمند جایگزینی سیستماتیک تمام Propertyهای فیزیکی مرتبط با جهت (margin، padding، border، inset، text-align، float) با معادل منطقی‌شان است. این رویکرد، که در طول این فصل کامل بررسی شد، تضمین می‌کند که یک کامپوننت واحد، بدون نیاز به نوشتن CSS جداگانه، در هر دو جهت LTR و RTL به‌درستی نمایش داده شود؛ و با این جمع‌بندی، فصل یازدهم دوره را به پایان می‌رسانیم.