CSS منطقی خصوصیات کیا ہیں اور بین الاقوامی کاری کے لیے وہ کیوں اہم ہیں؟

Question

Accepted Answer

**منطقی خصوصیات** layout کو **مواد کے بہاؤ کی سمت** (شروع/اختتام، inline/block) کی بنیاد پر بیان کرتی ہیں، بجائے فزیکل سمتوں (بائیں/دائیں/اوپر/نیچے) کے۔ یہ ایک ہی stylesheet کو خودکار طور پر ان زبانوں کے لیے موافقت کرتا ہے جو دائیں سے بائیں (عربی، عبرانی) یا اوپر سے نیچے لکھی جاتی ہیں۔ ## فزیکل بمقابلہ منطقی ```css /* ❌ physical — hard-codes "left", breaks in RTL languages */ .card { margin-left: 1rem; padding-right: 2rem; text-align: left; border-left: 2px solid; } /* ✅ logical — follows the writing direction */ .card { margin-inline-start: 1rem; /* "start" = left in LTR, RIGHT in RTL */ padding-inline-end: 2rem; text-align: start; border-inline-start: 2px solid; } ``` ## دونوں محور - **inline** — وہ سمت جس میں متن بہتا ہے (انگریزی میں افقی؛ "پڑھنے" کی محور)۔ - **block** — وہ سمت جس میں لائنیں جمع ہوتی ہیں (انگریزی میں عمودی؛ "پیراگراف" کی محور)۔ ```css margin-inline: 1rem; /* left + right in LTR (both inline sides) */ margin-block: 2rem; /* top + bottom */ margin-inline-start: 1rem; /* the "start" inline edge (left LTR / right RTL) */ padding-block-end: 1rem; /* bottom in horizontal writing */ inset-inline-start: 0; /* logical version of left/right for positioning */ ``` ## بین الاقوامی کاری کے لیے یہ کیوں اہم ہے فزیکل خصوصیات کے ساتھ، عربی کی معاونت کا مطلب ہے `[dir="rtl"]` کے پیچھے آئینے دار انداز کا ایک مکمل دوسرا سیٹ لکھنا (`margin-left` → `margin-right`, وغیرہ)۔ منطقی خصوصیات کے ساتھ، **ایک جیسی CSS صرف کام کرتی ہے** — html پر `dir="rtl"` سیٹ کریں اور `margin-inline-start` خود بخود دائیں سمت میں تبدیل ہوتی ہے: ```html ``` ## RTL کے علاوہ منطقی خصوصیات عمودی لکھنے کی شکلوں (مثال کے طور پر کچھ ایشیائی ٹائپ سیٹنگ) کو بھی سنبھالتی ہیں اور `margin-inline: auto` کو سمت سے قطع نظر مرکز میں رکھنے کا ایک صاف طریقہ بناتی ہیں۔ ## اہم کیوں ہے کسی بھی مصنوعہ کے لیے جو متعدد زبانوں میں آتی ہے، منطقی خصوصیات آئینے دار RTL stylesheets برقرار رکھنے کی ضرورت کو ختم کرتی ہیں — قواعد کا ایک سیٹ لکھنے کی سمت کے مطابق ڈھل جاتا ہے۔ LTR صرف سائٹس کے لیے بھی یہ ایک صاف ذہنی ماڈل (شروع/اختتام، inline/block) ہے، اور وہ جدید CSS میں تیزی سے سفارش شدہ ڈیفالٹ ہیں۔