# **کدهای کاربردی CSS Logical Properties برای مدیریت همزمان سایت‌های RTL و LTR (ویژگی های منطقی در CSS)**

رفیق برنامه‌نویس، اگه تا الان سر مدیریت جهت‌دهی سایتت (راست به چپ یا چپ به راست) وقت و انرژی زیادی رو هدر دادی، این مقاله دقیقاً برای خودته. دیگه لازم نیست برای هر زبان و جهتی کلی کد تکراری بزنی یا استایل‌های عجیب و غریب بنویسی. دنیای CSS با `Logical Properties` یه راه حل شیک و هوشمندانه آورده که قراره کارتو حسابی راحت کنه. با این ویژگی‌ها، کدهات تمیزتر، منعطف‌تر و آینده‌نگرتر می‌شن و می‌تونی با یه تیر دو نشون بزنی، هم RTL رو هندل کنی هم LTR رو، بدون دردسر!

پیشنهاد می‌کنم همین الان یه سر به **فروشگاه ابزارهای حرفه‌ای ما بزن و بهترین ابزارهای توسعه وب رو کشف کن! ابزارهایی که کارتو چند برابر سریع‌تر می‌کنن: [ابزارهای توسعه وب](https://fa-tools.ir/shop/)** و اگر سوالی پیش اومد، می‌تونی همین الان با تیم فنی ما تماس بگیری: **[09202232789](tel:09202232789)**.

—

—

کدهای کاربردی CSS Logical Properties برای مدیریت همزمان سایت‌های RTL و LTR (ویژگی های منطقی در CSS)

در دنیای امروز وب، که هر روز بیشتر جهانی می‌شود، طراحی و توسعه سایت‌هایی که بتوانند به درستی در زبان‌های مختلف با جهت‌دهی‌های متفاوت (مانند فارسی و عربی که از راست به چپ (RTL) هستند و انگلیسی و اکثر زبان‌های دیگر که از چپ به راست (LTR) هستند) نمایش داده شوند، یک چالش اساسی است. اغلب توسعه‌دهندگان برای مدیریت این تفاوت‌ها به کدهای شرطی زیاد، تکرار استایل‌ها و یا استفاده از فریم‌ورک‌های پیچیده روی می‌آورند که نه تنها حجم کد را افزایش می‌دهد، بلکه نگهداری آن را نیز دشوار می‌سازد.

اما نگران نباشید، CSS برای این مشکل یک راه حل زیبا و قدرتمند ارائه کرده است: `CSS Logical Properties`. این ویژگی‌ها به جای اشاره به جهات فیزیکی (مثل بالا، پایین، چپ، راست)، به جهات منطقی (مثل شروع، پایان، بلاک، اینلاین) اشاره می‌کنند که مستقل از جهت نوشتاری سند (writing mode) عمل می‌کنند. نتیجه؟ کدهایی که یک بار نوشته می‌شوند و در هر دو حالت RTL و LTR به درستی کار می‌کنند.

مفهوم ویژگی‌های منطقی در CSS

قبل از اینکه غرق در جزئیات کدنویسی شویم، بیایید ببینیم اصلاً این ویژگی‌های منطقی چه هستند و چرا به آن‌ها نیاز داریم. در CSS سنتی، ما از ویژگی‌هایی مانند `margin-left`, `padding-right`, `border-top` و `width` استفاده می‌کنیم. این ویژگی‌ها به جهات فیزیکی ثابت اشاره می‌کنند. مثلاً `margin-left` همیشه حاشیه سمت چپ یک عنصر را تنظیم می‌کند، فارغ از اینکه زبان سند LTR باشد یا RTL.

اینجاست که مشکل شروع می‌شود. در یک سند LTR، “شروع” به معنی “چپ” و “پایان” به معنی “راست” است. اما در یک سند RTL، “شروع” به معنی “راست” و “پایان” به معنی “چپ” است. اگر ما بخواهیم یک دکمه همیشه در “شروع” یک عنصر والد قرار بگیرد، با ویژگی‌های فیزیکی مجبوریم برای LTR از `float: left` و برای RTL از `float: right` استفاده کنیم. این یعنی تکرار کد و پیچیدگی!

`Logical Properties` این مشکل را حل می‌کنند. آن‌ها به جای استفاده از `left`, `right`, `top`, `bottom`، از مفاهیم `start`, `end`, `inline`, `block` استفاده می‌کنند که وابسته به “جهت جریان متن” (text flow) هستند. این یعنی:

* **`start`**: همیشه به شروع جهت نوشتار اشاره دارد (در LTR: چپ، در RTL: راست).
* **`end`**: همیشه به پایان جهت نوشتار اشاره دارد (در LTR: راست، در RTL: چپ).
* **`inline`**: به جهت خطی متن اشاره دارد (جهت افقی در اکثر زبان‌ها).
* **`block`**: به جهت بلاکی متن اشاره دارد (جهت عمودی در اکثر زبان‌ها).

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

تفاوت با ویژگی‌های فیزیکی (Physical Properties)

برای درک بهتر، این جدول مقایسه‌ای را با هم ببینیم:

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

ویژگی‌های منطقی کلیدی و کاربرد آن‌ها

حالا بیایید کمی عمیق‌تر شویم و مهم‌ترین `Logical Properties` را با مثال‌های کاربردی بررسی کنیم.

ابعاد منطقی (Logical Dimensions): inline-size و block-size

این ویژگی‌ها جایگزین `width` و `height` می‌شوند و ابعاد یک عنصر را بر اساس جهت جریان متن تنظیم می‌کنند.

* `inline-size`: معادل `width` در حالت افقی (LTR/RTL) و `height` در حالت عمودی (vertical writing mode).
* `block-size`: معادل `height` در حالت افقی و `width` در حالت عمودی.

.my-box {
  inline-size: 200px; /* معادل width: 200px; در حالت عادی */
  block-size: 150px;  /* معادل height: 150px; در حالت عادی */
  background-color: #a7d9f7;
  border: 1px solid #3faee5;
  text-align: center;
  padding: 10px;
}

حاشیه‌های منطقی (Logical Margins): margin-inline و margin-block

این ویژگی‌ها برای تنظیم حاشیه‌های بیرونی (margin) به صورت منطقی استفاده می‌شوند.

* `margin-inline-start`: معادل `margin-left` در LTR و `margin-right` در RTL.
* `margin-inline-end`: معادل `margin-right` در LTR و `margin-left` در RTL.
* `margin-block-start`: معادل `margin-top`.
* `margin-block-end`: معادل `margin-bottom`.
* کوتاه‌نویسی‌ها: `margin-inline` (برای `start` و `end` اینلاین) و `margin-block` (برای `start` و `end` بلاک).

.my-element {
  margin-inline-start: 20px; /* حاشیه از سمت شروع خط */
  margin-block-end: 15px;    /* حاشیه از پایین بلاک */
  margin-inline: 10px 20px;  /* 10px از شروع اینلاین، 20px از پایان اینلاین */
  background-color: #e3f2fd;
  border: 1px solid #90caf9;
  padding: 10px;
}

بالشتک‌های منطقی (Logical Paddings): padding-inline و padding-block

کاملاً مشابه حاشیه‌های منطقی، اما برای تنظیم فضای داخلی (padding) یک عنصر.

* `padding-inline-start`
* `padding-inline-end`
* `padding-block-start`
* `padding-block-end`
* کوتاه‌نویسی‌ها: `padding-inline`, `padding-block`.

.my-button {
  padding-inline: 20px;    /* padding-left و padding-right منطقی */
  padding-block: 10px;     /* padding-top و padding-bottom منطقی */
  background-color: #26a69a;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
}

مرزهای منطقی (Logical Borders): border-inline و border-block

برای تنظیم حاشیه‌های داخلی (border) به صورت منطقی استفاده می‌شوند.

* `border-inline-start`
* `border-inline-end`
* `border-block-start`
* `border-block-end`
* کوتاه‌نویسی‌ها: `border-inline`, `border-block`.

.card {
  border-block-start: 2px solid #ffb74d; /* border-top منطقی */
  border-inline-end: 1px dashed #ff9800; /* border-right/left منطقی */
  background-color: #fff3e0;
  padding: 15px;
  border-radius: 8px;
}

موقعیت‌یابی منطقی (Logical Positioning): inset، start، end

برای عناصر با `position: absolute`, `relative`, `fixed`, `sticky`، می‌توانیم از ویژگی‌های منطقی برای موقعیت‌یابی استفاده کنیم.

* `inset-inline-start`: معادل `left` در LTR و `right` در RTL.
* `inset-inline-end`: معادل `right` در LTR و `left` در RTL.
* `inset-block-start`: معادل `top`.
* `inset-block-end`: معادل `bottom`.
* کوتاه‌نویسی: `inset` که هر چهار جهت را پوشش می‌دهد، یا `inset-inline` و `inset-block`.

.overlay-message {
  position: absolute;
  inset-block-start: 10px;   /* معادل top: 10px; */
  inset-inline-end: 10px;    /* معادل right: 10px; در LTR، left: 10px; در RTL */
  background-color: rgba(0,0,0,0.7);
  color: white;
  padding: 8px 12px;
  border-radius: 5px;
}

/* کوتاه‌نویسی */
.full-width-element {
  position: absolute;
  inset: 0; /* معادل top: 0; right: 0; bottom: 0; left: 0; */
}

جریان متن (Flow Relative Properties): float، clear

حتی ویژگی‌هایی مانند `float` و `clear` هم نسخه‌های منطقی دارند:

* `float: inline-start`: معادل `float: left` در LTR و `float: right` در RTL.
* `float: inline-end`: معادل `float: right` در LTR و `float: left` در RTL.
* `clear: inline-start`
* `clear: inline-end`

.profile-picture {
  float: inline-start; /* عکس در ابتدای خط (چپ در LTR، راست در RTL) */
  margin-inline-end: 15px;
  border-radius: 50%;
  block-size: 80px;
  inline-size: 80px;
  object-fit: cover;
}

.content-after-float {
  clear: inline-start; /* پاک کردن فلوت از سمت شروع */
}

چطور Logical Properties را در عمل پیاده‌سازی کنیم؟ (مثال‌های کاربردی)

حالا که با مفاهیم آشنا شدی، بیایید چند سناریوی رایج را با هم بررسی کنیم تا ببینی چقدر این ویژگی‌ها می‌تونن کارتو آسون کنن. در اینجا ما فرض می‌کنیم جهت نوشتار سند با استفاده از ویژگی `dir=”rtl”` یا `dir=”ltr”` در HTML تنظیم شده است. اگر درمورد پیاده‌سازی صحیح آن سوالی داری، می‌تونی به [صفحه اصلی ما](https://fa-tools.ir/) مراجعه کنی.

1. ناوبری (Navigation Menu)

فرض کن یک منوی ناوبری داری که آیتم‌هایش باید به ترتیب از “شروع” صفحه قرار بگیرند و آخرین آیتم (مثلاً دکمه ورود/ثبت‌نام) باید همیشه در “پایان” باشد.

<nav class="main-nav">
  <ul>
    <li><a href="#">خانه</a></li>
    <li><a href="#">محصولات</a></li>
    <li><a href="#">درباره ما</a></li>
    <li><a href="#">تماس</a></li>
  </ul>
  <a href="#" class="auth-button">ورود / ثبت نام</a>
</nav>

.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 20px; /* padding-left/right منطقی */
  background-color: #3f51b5;
  color: white;
}

.main-nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav ul li {
  margin-inline-end: 15px; /* فاصله بین آیتم‌ها: right در LTR، left در RTL */
}

.main-nav ul li:last-child {
  margin-inline-end: 0;
}

.main-nav a {
  color: white;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.main-nav a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.auth-button {
  background-color: #ff9800;
}

2. سایدبار (Sidebar)

یک سایدبار که همیشه در “شروع” صفحه (چپ در LTR، راست در RTL) قرار می‌گیرد و با یک حاشیه از محتوای اصلی جدا می‌شود.

<div class="page-layout">
  <aside class="sidebar">
    <h3>منوی جانبی</h3>
    <ul>
      <li>دسته ۱</li>
      <li>دسته ۲</li>
      <li>دسته ۳</li>
    </ul>
  </aside>
  <main class="main-content">
    <h1>محتوای اصلی سایت</h1>
    <p>این بخش حاوی اطلاعات اصلی صفحه است. همه چیز اینجا به صورت منظم چیده شده و برای هر دو حالت RTL و LTR به درستی نمایش داده می‌شود.</p>
  </main>
</div>

.page-layout {
  display: flex;
  flex-direction: row; /* در LTR، سایدبار در چپ. در RTL، سایدبار در راست */
}

html[dir="rtl"] .page-layout {
  flex-direction: row-reverse; /* برای RTL، سایدبار را به راست می‌برد اگر نیازی به تغییر دستی بود */
  /* اما با logical properties اغلب نیازی به این نیست! */
}

.sidebar {
  inline-size: 250px; /* width منطقی */
  padding-block: 20px; /* padding-top/bottom منطقی */
  padding-inline: 15px; /* padding-left/right منطقی */
  background-color: #e8f5e9;
  border-inline-end: 1px solid #c8e6c9; /* border-right در LTR، border-left در RTL */
  margin-inline-end: 20px; /* margin-right در LTR، margin-left در RTL */
  flex-shrink: 0;
}

.main-content {
  flex-grow: 1;
  padding-block: 20px;
  padding-inline: 15px;
}

**نکته:** در مثال بالا، با `flex-direction: row` و `margin-inline-end`، مرورگر خودش جهت‌دهی را انجام می‌دهد. خط `html[dir=”rtl”] .page-layout { flex-direction: row-reverse; }` فقط برای نشان دادن این است که اگر بخواهی رفتار پیش‌فرض Flexbox را override کنی، چطور باید انجام دهی، اما با `Logical Properties` معمولاً کمتر به آن نیاز پیدا خواهی کرد.

مزایا و اهمیت استفاده از Logical Properties

استفاده از `Logical Properties` فقط یک روش جدید برای نوشتن CSS نیست؛ بلکه یک تغییر رویکرد اساسی در توسعه وب چندزبانه و چندجهته است.

* **ساده‌سازی مدیریت RTL/LTR:** این بزرگترین مزیت است. دیگر نیازی به نوشتن دو مجموعه کد جداگانه برای هر جهت (مانند استفاده از `[dir=”rtl”]` در CSS) نیست. یک بار کد می‌نویسی و مرورگر خودش بر اساس `writing-mode` و `direction` سند، آن را تفسیر می‌کند.
* **کد تمیزتر و کمتر:** حذف کدهای تکراری و شرطی به معنای فایل‌های CSS کوچکتر و خوانایی بیشتر است.
* **افزایش قابلیت نگهداری:** وقتی کدهای کمتری داری که مسئولیت‌های مشابهی دارند، نگهداری، رفع اشکال و توسعه آن‌ها بسیار آسان‌تر می‌شود.
* **بهبود تجربه کاربری:** نمایش صحیح و یکپارچه UI در زبان‌های مختلف، تجربه کاربری را به شکل چشمگیری بهبود می‌بخشد و حس حرفه‌ای بودن به سایت تو می‌دهد.
* **آماده‌سازی برای آینده:** `Logical Properties` بخشی از استانداردهای مدرن CSS هستند و با ظهور `vertical writing modes` (حالت‌های نوشتاری عمودی) در آینده، استفاده از این ویژگی‌ها اهمیت بیشتری پیدا خواهد کرد.
* **رسپانسیو برای هر جهتی:** نه فقط برای موبایل و تبلت و لپتاب، حتی برای تلویزیون‌های هوشمند، این ویژگی‌ها باعث می‌شوند سایت شما در هر جهتی به درستی نمایش داده شود. این به معنای یک طراحی واقعاً جهانی و آینده‌نگر است. همینطور می‌تونی با مراجعه به [کدهای آماده و اسنیپت‌های ما](https://fa-tools.ir/category/code-snippets/)، ایده‌های بیشتری برای رسپانسیو بودن دریافت کنی.

نکات مهم در استفاده از Logical Properties

درست مثل هر تکنولوژی جدیدی، `Logical Properties` هم نکاتی دارند که باید به آن‌ها توجه کنی:

* **پشتیبانی مرورگرها:** خوشبختانه، پشتیبانی از `Logical Properties` در مرورگرهای مدرن (Chrome, Firefox, Safari, Edge) بسیار خوب است. اما همیشه برای اطمینان می‌توانی `Can I use…` را چک کنی، مخصوصاً اگر کاربران تو از مرورگرهای قدیمی‌تر استفاده می‌کنند. در موارد نادر، fallback (برگشت به حالت فیزیکی) را در نظر بگیر.
* **یادگیری تدریجی:** لازم نیست یک شبه تمام کدهای CSS خود را به `Logical Properties` تبدیل کنی. می‌توانی از پروژه‌های جدید شروع کنی یا بخش‌های مشخصی از سایت را که نیاز به انعطاف‌پذیری RTL/LTR دارند، با این روش بازنویسی کنی.
* **ترکیب با سایر ویژگی‌ها:** `Logical Properties` به خوبی با `Flexbox` و `CSS Grid` ترکیب می‌شوند. در واقع، Flexbox و Grid خودشان بر پایه مفاهیم منطقی (start, end) طراحی شده‌اند و استفاده همزمان از آن‌ها قدرت کدنویسی تو را به شکل شگفت‌انگیزی افزایش می‌دهد.
* **اولویت‌بندی:** اگر هم ویژگی فیزیکی و هم ویژگی منطقی را برای یک عنصر تعریف کنی، ویژگی منطقی معمولاً ارجحیت دارد، به خصوص در مواردی که تداخل واضحی وجود داشته باشد.

عیب‌یابی سریع (Troubleshooting)

با اینکه `Logical Properties` فوق‌العاده هستند، ممکن است گاهی با چالش‌هایی روبرو شوی. نگران نباش، این راهنمای سریع بهت کمک می‌کنه:

1. **مشکل: استایل‌ها در حالت RTL/LTR به درستی اعمال نمی‌شوند.**
* **راه حل:**
* مطمئن شو که `dir=”rtl”` یا `dir=”ltr”` را روی تگ “ یا حداقل روی عنصر والد مربوطه به درستی تنظیم کرده‌ای. این ویژگی برای مرورگر مشخص می‌کند که کدام `writing mode` را اعمال کند.
* تداخل با استایل‌های فیزیکی: اگر هم `margin-left` و هم `margin-inline-start` را تعریف کرده‌ای، ممکن است یکی بر دیگری غلبه کند. همیشه بهتر است فقط از `Logical Properties` استفاده کنی تا از تداخل جلوگیری شود.
* پشتیبانی مرورگر: آیا مرورگری که استفاده می‌کنی از این ویژگی‌ها پشتیبانی می‌کند؟ برای اطمینان بیشتر، همیشه آخرین نسخه‌های مرورگرها را تست کن.
2. **مشکل: برخی از عناصر حتی با Logical Properties هم به جهت درست نمی‌روند.**
* **راه حل:**
* `Flexbox` و `Grid` را بررسی کن: اگر از Flexbox یا Grid استفاده می‌کنی، مطمئن شو که `flex-direction` یا `grid-auto-flow` به درستی تنظیم شده‌اند. این‌ها هم مفاهیم `start`/`end` منطقی دارند. مثلاً `justify-content: flex-start` همیشه عناصر را در شروع جهت خطی قرار می‌دهد.
* `text-align`: اگر برای تراز کردن متن از `text-align: left` یا `text-align: right` استفاده می‌کنی، آن را به `text-align: start` یا `text-align: end` تغییر بده.
3. **مشکل: کدنویسی طولانی برای هر جهت خاص (مثلاً RTL) همچنان لازم است.**
* **راه حل:**
* این یعنی در جایی از طراحی یا کدنویسی خود هنوز به `Logical Properties` کامل مهاجرت نکرده‌ای یا ویژگی‌های فیزیکی‌ای وجود دارند که برای آن بخش مناسب‌ترند (که بسیار نادر است). دوباره نگاهی به جدول مقایسه بنداز و ببین آیا جایگزین منطقی برای ویژگی فیزیکی‌ای که استفاده کرده‌ای وجود دارد یا نه.
* گاهی اوقات، برای `background-position` یا `border-radius`هایی که گوشه‌های خاصی را هدف قرار می‌دهند (مثلاً `border-top-left-radius`)، هنوز هم باید از ویژگی‌های فیزیکی استفاده کنی، چون `Logical Properties` برای آن‌ها تعریف نشده‌اند. این‌ها موارد استثنا هستند.

سؤالات متداول (FAQ)

—

با `CSS Logical Properties`، نه تنها کار خودت را آسان می‌کنی، بلکه به استانداردهای وب مدرن نزدیک‌تر می‌شوی و سایت‌هایی می‌سازی که واقعاً جهانی هستند. این یک سرمایه‌گذاری کوچک در یادگیری است که سود بزرگی در کارایی و نگهداری کدهایت خواهد داشت. پس رفیق، از همین امروز شروع کن و از قدرت این ویژگی‌های هوشمند بهره ببر!

کدهای کاربردی CSS Logical Properties برای مدیریت همزمان سایت‌های RTL و LTR (ویژگی های منطقی در CSS)

طراحی قالب دو زبانه یا چند زبانه که هم‌زمان از زبان‌های راست‌به‌چپ (RTL) مثل فارسی و عربی، و زبان‌های چپ‌به‌راست (LTR) مثل انگلیسی پشتیبانی کند، همیشه یکی از چالش‌های بزرگ طراحان وب بوده است. در گذشته برای این کار ناچار بودیم دو فایل استایل مجزا بنویسیم یا با کلاس‌های کمکی مثل `.rtl` مدام ویژگی‌ها را بازنویسی کنیم. این روش نه‌تنها حجم فایل‌های CSS را افزایش می‌داد، بلکه نگهداری و توسعه پروژه را هم سخت‌تر می‌کرد.

اما با ورود **CSS Logical Properties (ویژگی‌های منطقی در CSS)**، این مشکل برای همیشه حل شده است. در این مقاله جامع، یاد می‌گیرید که چطور با استفاده از این ویژگی‌های مدرن، فقط با یک‌بار کدنویسی، سایتی کاملاً واکنش‌گرا و منعطف برای هر دو جهت طراحی کنید.

ویژگی‌های منطقی (Logical) در برابر فیزیکی (Physical)

پیش از این، تمام استایل‌های ما بر اساس صفحه نمایش (موقعیت فیزیکی) تعریف می‌شدند. برای مثال، وقتی می‌گفتیم `margin-left: 20px`، مرورگر بدون توجه به زبان صفحه، فاصله را در سمت چپ عنصر اعمال می‌کرد. در نتیجه وقتی زبان سایت به فارسی تغییر می‌کرد، مجبور بودیم بنویسیم:

“`css
/* استایل پیش‌فرض برای انگلیسی LTR */
.card-meta {
margin-left: 20px;
}

/* استایل مخصوص برای فارسی RTL */
html[dir=”rtl”] .card-meta {
margin-left: 0;
margin-right: 20px;
}
“`

این روش نه‌تنها کثیف بود، بلکه حجم کار را دو برابر می‌کرد. برای حل این مشکل، ویژگی های منطقی در CSS به وجود آمدند. ویژگی‌های منطقی به جای اشاره به جهت‌های فیزیکی (راست، چپ، بالا، پایین)، بر اساس **جهت جریان متن (Writing Mode)** عمل می‌کنند.

اگر به دنبال کدهای آماده برای توسعه پروژه‌های خود هستید، آرشیو کامل سنیپت‌ها مرجع بسیار خوبی برای شما خواهد بود.

در سیستم منطقی دو محور اصلی داریم:
1. **محور درون‌خطی (Inline Axis):** سمتی که متن در آن جریان دارد. در زبان فارسی از راست به چپ و در انگلیسی از چپ به راست است. شروع این جهت را `start` و پایان آن را `end` می‌نامند.
2. **محور بلوکی (Block Axis):** سمتی که بلوک‌های متنی زیر هم قرار می‌گیرند (معمولاً از بالا به پایین). شروع آن `start` (بالا) و پایان آن `end` (پایین) است.

بنابراین، با استفتده از کدهای منطقی، دیگر نیازی به نوشتن کدهای تکراری برای خنثی‌سازی استایل‌ها نخواهید داشت.

جدول مقایسه‌ای کدهای فیزیکی و منطقی در CSS

برای درک بهتر و سریع‌تر معادل‌ها، جدول زیر به شما نشان می‌دهد که هر یک از ویژگی‌های سنتی و فیزیکی، با کدام ویژگی مدرن منطقی جایگزین می‌شوند:

کدهای کاربردی برای Margin و Padding منطقی

بیشترین تغییراتی که در زمان دو زبانه کردن سایت رخ می‌دهد مربوط به فاصله‌های داخلی (Padding) و فاصله‌های خارجی (Margin) است. با استفاده از کدهای منطقی زیر، فاصله بر اساس جهتِ شروعِ خوانش متن تنظیم می‌شود. برای مثال، اگر زبان فارسی باشد، استارت از سمت راست خواهد بود و اگر انگلیسی باشد، استارت از سمت چپ.

کدهای آماده و ترفندهای حرفه‌ای‌تر را می‌توانید در بخش تخصصی سنیپت‌های CSS مطالعه و استفاده کنید.

### نمونه کد Margin منطقی:
“`css
/* اعمال فاصله در سمت شروع متن (راست در فارسی، چپ در انگلیسی) */
.element {
margin-inline-start: 1.5rem;
}

/* اعمال فاصله در سمت پایان متن (چپ در فارسی، راست در انگلیسی) */
.element {
margin-inline-end: 2rem;
}

/* اعمال فاصله همزمان در بالا و پایین (Block) */
.element {
margin-block: 10px 15px; /* بالا 10px و پایین 15px */
}

/* اعمال فاصله همزمان در طرفین راست و چپ (Inline) */
.element {
margin-inline: auto; /* برای وسط‌چین کردن هوشمند المان‌ها */
}
“`

### نمونه کد Padding منطقی:
“`css
/* ایجاد فاصله داخلی هوشمند در سمت شروع */
.button {
padding-inline-start: 20px;
padding-inline-end: 20px;
padding-block-start: 10px;
padding-block-end: 10px;
}

/* نگارش خلاصه شده و بسیار بهینه */
.button-compact {
padding-inline: 20px; /* طرفین */
padding-block: 10px; /* بالا و پایین */
}
“`

مدیریت حاشیه‌ها (Border) و گوشه‌های گرد (Border Radius)

یکی از عذاب‌آورترین کارها در طراحی LTR و RTL، قرینه‌سازی حاشیه‌ها و خمیدگی لبه‌ها بود. مثلاً یک دکمه که فقط در سمت راست خود حاشیه دارد، یا کارت‌هایی که فقط گوشه‌های سمت چپ آن‌ها گرد شده است. ویژگی های منطقی در CSS این بخش را هم به شکلی فوق‌العاده پوشش می‌دهند.

در ساختار کلی و بدنه قالب، استفاده از تگ‌های استاندارد ارائه شده در سنیپت‌های HTML روند پردازش کدهای منطقی را برای مرورگرها بسیار آسان‌تر می‌کند.

### کد نویسی حاشیه‌های کناری به صورت منطقی:
“`css
/* حاشیه در سمت شروع (راست در فارسی، چپ در انگلیسی) */
.box {
border-inline-start: 4px solid #4f46e5;
}

/* حذف حاشیه در سمت پایان */
.box {
border-inline-end: none;
}
“`

### گوشه‌های گرد هوشمند (Border Radius):
گوشه‌های گرد فیزیکی شامل بالا-چپ، بالا-راست، پایین-راست و پایین-چپ بودند. اما در حالت منطقی، ما از ترکیب کلمات کلیدی `start` و `end` در دو محور `block` (بالا/پایین) و `inline` (چپ/راست) استفاده می‌کنیم:

“`css
/* گرد کردن گوشه بالا-شروع (بالا-راست در فارسی، بالا-چپ در انگلیسی) */
.card {
border-start-start-radius: 12px;
}

/* گرد کردن گوشه بالا-پایان (بالا-چپ در فارسی، بالا-راست در انگلیسی) */
.card {
border-start-end-radius: 12px;
}

/* گرد کردن گوشه پایین-شروع (پایین-راست در فارسی، پایین-چپ در انگلیسی) */
.card {
border-end-start-radius: 8px;
}
“`

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

موقعیت‌دهی منطقی (Absolute Positioning)

یکی دیگر از کابوس‌های قدیمی، جابجایی عناصر با `position: absolute` بود. به عنوان مثال، آیکون ضربدر دکمه بستن پاپ‌آپ باید در انگلیسی در بالا سمت راست و در فارسی در بالا سمت چپ قرار می‌گرفت. در حالت سنتی باید با بازنویسی `left: auto` و `right: 10px` جهت‌ها را عوض می‌کردیم.

امروزه با کمک ویژگی‌های موقعیت‌دهی منطقی، این دغدغه کاملاً رفع شده است:

“`css
/* موقعیت‌دهی مطلق کاملا پویا و منعطف */
.close-button {
position: absolute;
inset-block-start: 15px; /* معادل top فیزیکی */
inset-inline-end: 15px; /* در فارسی چپ، در انگلیسی راست قرار می‌گیرد */
}
“`

اگر نیاز دارید جهت و پوزیشن‌ها را بر اساس سناریوهای پویاتر با جاوا اسکریپت کنترل کنید، پیشنهاد می‌کنیم به بخش سنیپت‌های جاوا اسکریپت نگاهی بیندازید تا نمونه‌های خلاقانه‌ای در این زمینه بیابید.

همچنین، صفت کاربردی `inset` نیز کار ما را برای مقداردهی به هر ۴ جهت آسان کرده است:
“`css
/* پر کردن کل صفحه به شکل منطقی */
.overlay {
position: fixed;
inset: 0; /* تمام جهت‌ها را 0 می‌کند */
}
“`

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

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

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

### کد قدیمی (نیازمند استایل جداگانه برای RTL):
“`css
/* نسخه LTR */
.author-card {
display: flex;
padding: 20px;
border-left: 5px solid #6366f1;
}
.author-avatar {
margin-right: 15px;
border-radius: 8px 0 0 8px;
}
.author-meta {
text-align: left;
}

/* نسخه RTL که باید اضافه می‌کردیم */
html[dir=”rtl”] .author-card {
border-left: none;
border-right: 5px solid #6366f1;
}
html[dir=”rtl”] .author-avatar {
margin-right: 0;
margin-left: 15px;
border-radius: 0 8px 8px 0;
}
html[dir=”rtl”] .author-meta {
text-align: right;
}
“`

### کد مدرن با CSS Logical Properties (فقط یک‌بار نوشتن!):
“`css
.author-card {
display: flex;
padding: 20px;
/* حاشیه در سمت شروع به طور هوشمند */
border-inline-start: 5px solid #6366f1;
}
.author-avatar {
/* فاصله در سمت پایان آواتار */
margin-inline-end: 15px;
/* گرد کردن گوشه های سمت شروع به صورت منطقی */
border-start-start-radius: 8px;
border-end-start-radius: 8px;
}
.author-meta {
/* تراز متن بر اساس جهت زبان صفحه */
text-align: start;
}
“`

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

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

عیب‌یابی سریع و رفع مشکلات رایج

هر چند که ویژگی‌های منطقی امروزه توسط تمامی مرورگرهای مدرن (بالای ۹۶ درصد سهم بازار) کاملاً پشتیبانی می‌شوند، اما ممکن است در پروژه‌های بزرگ با مشکلاتی مواجه شوید. در ادامه، جدول عیب‌یابی سریع را برای حل این چالش‌ها قرار داده‌ایم:

سوالات متداول (FAQ)

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