{"id":"l-css-3-2","courseId":"css-mastery","lang":"ar","kind":"lesson","summary":"استبدل الخصائص الفيزيائية بالخصائص المنطقية لتعمل صفحة الجدول في اللغات التي تُكتب من اليمين إلى اليسار مثل العربية، وتعامل مع الأشياء القليلة التي لا تنعكس من تلقاء نفسها.","html":"

تضيف Waypoint نسخة عربية من الجدول لفعاليتها الفرعية في القاهرة. التغيير في الـ HTML سمة واحدة، <html lang="ar" dir="rtl">، وجاء التحميل الأول صحيحًا نصفه فقط. قائمة الجلسات انعكست كما ينبغي، لأنها صف flex. لكن كل بطاقة ظهر حدّها الملوّن على اليسار، وهو في العربية نهاية السطر لا بدايته، وعمود الوقت جاءت مسافته في الجهة الخاطئة، وسهم «Details →» أشار إلى الوراء.

\n

كان التخطيط مكتوبًا بالاتجاهات الفيزيائية: يسار ويمين وأعلى وأسفل. لكن النص لا يجري في اتجاهات فيزيائية؛ إنه يجري من بداية إلى نهاية. وأنت تقرأ هذا الدرس الآن من اليمين إلى اليسار، فالبداية عندك على اليمين، بينما هي على اليسار عند قارئ النسخة الإنجليزية.

\n

محورا الـ inline والـ block

\n

الخصائص المنطقية (logical properties) تسمّي الجهات بحسب سير النص:

\n\n
\n بطاقتان. في البطاقة من اليسار إلى اليمين تقع inline-start على اليسار وinline-end على اليمين. وفي البطاقة من اليمين إلى اليسار تقع inline-start على اليمين وinline-end على اليسار. وفي الحالتين تقع block-start في الأعلى وblock-end في الأسفل.\n dir=\"ltr\"\n \n \n inline-start\n inline-end\n block-start\n block-end\n dir=\"rtl\"\n \n \n inline-end\n inline-start\n block-start\n block-end\n الحدّ border-inline-start في بداية السطر في الحالتين\n
البطاقة نفسها في LTR وRTL: inline-start تنتقل من جهة إلى أخرى، وblock-start تبقى في الأعلى
\n

لكل خاصية فيزيائية توأم منطقي:

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
فيزيائيةمنطقية
margin-left، margin-rightmargin-inline-start، margin-inline-end
padding-top، padding-bottompadding-block-start، padding-block-end
border-leftborder-inline-start
left، right، topinset-inline-start، inset-inline-end، inset-block-start
width، heightinline-size، block-size
text-align: lefttext-align: start

وهناك اختصارات أيضًا: margin-inline: 1rem 2rem تضبط البداية والنهاية، وpadding-block: 1rem تضبط جهتي الـ block معًا، وinset-inline: 0 تحلّ محلّ left: 0; right: 0.

\n

تحويل بطاقة الجلسة

\n
session-card.css
/* Before: physical */\n.session-card {\n  border-left: 6px solid var(--track-color);\n  padding: 12px 8px 12px 20px;\n  text-align: left;\n}\n.session-card .time { margin-right: 12px; }\n\n/* After: logical */\n.session-card {\n  border-inline-start: 6px solid var(--track-color);\n  padding-block: 12px;\n  padding-inline: 20px 8px;\n  text-align: start;\n}\n.session-card .time { margin-inline-end: 12px; }
\n

في الإنجليزية النتيجة مطابقة حتى آخر بكسل. وفي العربية ينتقل الحدّ إلى اليمين، حيث تبدأ الأسطر، وتتبعه المسافات. تكتب البطاقة مرة واحدة.

\n

flexbox وgrid يفكّران بهذه الطريقة أصلًا. flex-direction: row وjustify-content: flex-start والعمود 1 في grid كلها تتبع اتجاه السطر، لذا ينعكس صف flex في RTL دون أيّ CSS إضافية. ولهذا عملت قائمة Waypoint من المحاولة الأولى.

\n\n

الأحجام منطقية أيضًا

\n

inline-size وblock-size هما الاسمان المنطقيان للعرض والارتفاع، وmax-inline-size: 40ch هي النسخة المنطقية من سقف عرض القراءة المريح الذي رأيته في درس التحجيم الذاتي. في العربية والإنجليزية تتصرّفان تمامًا مثل width وheight، لأن الخطّين يُكتبان أفقيًا. ولا تختلفان إلا في أنماط الكتابة الرأسية، مثل writing-mode: vertical-rl لليابانية أو لعنوان جدول مُدار، حيث يمتدّ محور الـ inline من الأعلى إلى الأسفل. استخدامهما لا يكلّف شيئًا اليوم، ويعني أن الـ component سيصمد إن تغيّر نمط الكتابة لاحقًا. وقاعدة معقولة للفريق: الخصائص المنطقية لكل ما يتعلّق بسير النص، والفيزيائية فقط لما هو فيزيائي بطبيعته، كظلّ يجب أن يسقط إلى الأسفل دائمًا.

\n

ما لا ينعكس من تلقاء نفسه

\n

بعض الأشياء فيزيائية بطبيعتها وتحتاج إلى قاعدة RTL صريحة:

\n\n

الـ pseudo-class :dir() تطابق الاتجاه المحسوب للعنصر، الموروث من أقرب سمة dir:

\n
CSS
.more .arrow {\n  display: inline-block;\n  margin-inline-start: 4px;\n}\n.more .arrow:dir(rtl) {\n  scale: -1 1;   /* mirror horizontally */\n}
\n

:dir(rtl) أفضل من [dir="rtl"] .arrow لأنها لا تهتم بمكان السمة، ولا بما إذا كان عنصر متداخل قد عاد إلى LTR. وهي ضمن Baseline منذ ديسمبر 2023، ومتاحة على نطاق واسع منذ منتصف 2026.

\n

ليست كل أيقونة بحاجة إلى الانعكاس. زر التشغيل والساعة وعلامة الصح تعني الشيء نفسه في الاتجاهين؛ أما سهم «رجوع» أو اتجاه المنزلق (slider) فلا. اسأل أحد الناطقين باللغة حين لا تكون متأكّدًا.

\n

الخط العربي في قاعدتين

\n

الأولى: لا تطبّق letter-spacing على العربية أبدًا. الحروف العربية تتّصل بما يجاورها؛ وتبعيدها يقطع هذا الوصل ويجعل الكلمات صعبة القراءة. إن كان نظام التصميم لديك يضيف تباعدًا للتسميات بالأحرف الكبيرة، فأعده إلى الصفر بـ :lang(ar) { letter-spacing: 0; }. والثانية: كثيرًا ما تحتاج العربية إلى حجم خط وارتفاع سطر أكبر قليلًا من النص اللاتيني لتظهر بالوزن البصري نفسه. اضبط ذلك لكل لغة بـ :lang(ar) لا لكل component.

\n\n

دورك الآن

\n

بطاقة التمرين مكتوبة بخصائص فيزيائية. حوّلها إلى خصائص منطقية واعكس السهم في RTL. تعرض الفحوصات البطاقة في الاتجاهين. وبعدها ستستبدل الألوان السداسية (hex) في البطاقة بـ oklch()، وتبني لوحات ألوان المسارات بـ color-mix().

\n","toc":[{"id":"sec-1","text":"محورا الـ inline والـ block","level":2},{"id":"sec-2","text":"تحويل بطاقة الجلسة","level":2},{"id":"sec-3","text":"الأحجام منطقية أيضًا","level":2},{"id":"sec-4","text":"ما لا ينعكس من تلقاء نفسه","level":2},{"id":"sec-5","text":"الخط العربي في قاعدتين","level":2},{"id":"sec-6","text":"دورك الآن","level":2}],"takeaways":["الخصائص المنطقية تصف التخطيط نسبةً إلى اتجاه النص: margin-inline-start هي الـ margin اليسرى في الإنجليزية واليمنى في العربية.","ضبط dir="rtl" على الجذر يعكس flexbox وgrid والخصائص المنطقية تلقائيًا؛ أما الخصائص الفيزيائية مثل padding-left فتبقى حيث هي.","الـ transforms ومواضع الخلفيات والظلال والأيقونات الاتجاهية لا تنعكس، لذا تعامل معها صراحةً بـ :dir(rtl).","لا تضف letter-spacing إلى النص العربي أبدًا؛ فهي تقطع الوصل بين الحروف."],"further":[{"title":"Basic concepts of logical properties and values (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Logical_properties_and_values/Basic_concepts"},{"title":"Logical properties (web.dev Learn CSS)","url":"https://web.dev/learn/css/logical-properties"},{"title":"Structural markup and right-to-left text in HTML (W3C)","url":"https://www.w3.org/International/questions/qa-html-dir"}],"quiz":[{"q":"

لبطاقة padding-left: 20px; border-left: 6px solid. ضبطت dir="rtl" على <html>. أين أصبح الـ padding والحدّ الآن؟

","options":[{"text":"على اليمين، لأن المتصفّح يعكس التخطيط كله.","why":"المتصفّح يعكس التخطيط الواعي بالاتجاه (flex وgrid والخصائص المنطقية)، لكن left تعني دائمًا اليسار الفيزيائي."},{"text":"ما زالا على اليسار، الذي أصبح الآن نهاية كل سطر.","why":"صحيح. الخصائص الفيزيائية تتجاهل الاتجاه. استخدم padding-inline-start وborder-inline-start لتتبع النص."},{"text":"أُزيلا، لأن الخصائص الفيزيائية تُتجاهل في RTL.","why":"ما زالت تنطبق؛ لكنها تنطبق على الجهة الفيزيائية التي سمّيتها."}],"answer":1},{"q":"

في صف flex له justify-content: flex-start داخل صفحة dir="rtl"، من أين تبدأ العناصر؟

","options":[{"text":"من اليسار، لأن flex-start هي الحافة اليسرى.","why":"بداية flexbox تتبع اتجاه السطر (inline)، لذا فالبداية في RTL هي الحافة اليمنى."},{"text":"من المنتصف، لأن flexbox لا يستطيع أن يقرّر.","why":"يحسم flexbox البداية والنهاية دائمًا من اتجاه الكتابة؛ ولا يلجأ إلى التوسيط أبدًا."},{"text":"يعتمد على ضبط flex-direction: row-reverse من عدمه.","why":"row-reverse ستبادلهما من جديد، لكن مع القيمة الافتراضية row الجواب محسوم أصلًا."},{"text":"من اليمين، لأن flex-start تتبع اتجاه السطر.","why":"صحيح. flexbox وgrid واعيان بالاتجاه من الأساس؛ ولهذا ينعكس معظم تخطيط flex مجانًا."}],"answer":3},{"q":"

لرابط «Details →» أيقونة سهم يجب أن تشير إلى الاتجاه المعاكس في العربية. أيّ قاعدة تحقّق ذلك؟

","options":[{"text":".arrow:dir(rtl) { scale: -1 1; }","why":"صحيح. :dir(rtl) تطابق العناصر التي اتجاهها المحسوب RTL، والتحجيم الأفقي السالب يعكس الأيقونة."},{"text":".arrow { margin-inline-start: 4px; }","why":"هذا ينقل المسافة إلى الجهة الصحيحة، وهذا جيد، لكنه لا يغيّر الاتجاه الذي يشير إليه السهم."},{"text":".arrow { direction: rtl; }","why":"direction تغيّر اتجاه النص والتخطيط، لا طريقة رسم الحرف أو الأيقونة."}],"answer":0},{"q":"

أيّ تصريح يضبط عرض بطاقة الجلسة بطريقة تعمل أيضًا في أنماط الكتابة الرأسية؟

","options":[{"text":"width: 20rem","why":"width أفقية دائمًا؛ وفي نمط الكتابة الرأسي يمتدّ محور الـ inline من الأعلى إلى الأسفل."},{"text":"block-size: 20rem","why":"حجم الـ block هو الارتفاع في الكتابة الأفقية، أي البُعد العابر للأسطر لا الممتدّ على طولها."},{"text":"inline-size: 20rem","why":"صحيح. inline-size هو الحجم على امتداد سير النص، فهو العرض في الإنجليزية والعربية، والارتفاع في النص الرأسي."}],"answer":2}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n
\n 09:30\n

Logical Properties for Real Products

\n Details →\n
\n
","css":".wrap { width: 360px; }\n.session-card {\n padding-top: 12px;\n padding-bottom: 12px;\n border-radius: 12px;\n background: #f8fafc;\n}\n.session-card h3 { margin: 8px 0; }\n\n.session-card {\n border-left: 6px solid #6d28d9;\n padding-left: 20px;\n padding-right: 8px;\n text-align: left;\n}\n.time {\n display: inline-block;\n margin-right: 12px;\n color: #6b7280;\n}\n.more {\n display: block;\n text-align: right;\n}\n.arrow {\n display: inline-block;\n margin-left: 4px;\n}\n"},"solution":{"html":"
\n
\n 09:30\n

Logical Properties for Real Products

\n Details →\n
\n
","css":".wrap { width: 360px; }\n.session-card {\n padding-top: 12px;\n padding-bottom: 12px;\n border-radius: 12px;\n background: #f8fafc;\n}\n.session-card h3 { margin: 8px 0; }\n\n.session-card {\n border-inline-start: 6px solid #6d28d9;\n padding-inline: 20px 8px;\n text-align: start;\n}\n.time {\n display: inline-block;\n margin-inline-end: 12px;\n color: #6b7280;\n}\n.more {\n display: block;\n text-align: end;\n}\n.arrow {\n display: inline-block;\n margin-inline-start: 4px;\n}\n.arrow:dir(rtl) {\n scale: -1 1;\n}\n"},"checks":[{"id":"ltr-unchanged","test":"const setDir = async (d) => { $('.wrap').setAttribute('dir', d); await tick(16); }; const px = (sel, p) => parseFloat(style(sel, p)); const flipped = () => style('.arrow', 'scale') === '-1 1' || style('.arrow', 'transform').startsWith('matrix(-1'); await setDir('ltr'); return px('.session-card', 'border-left-width') === 6 && px('.session-card', 'border-right-width') === 0 && px('.session-card', 'padding-left') === 20 && px('.time', 'margin-right') === 12 && !flipped();"},{"id":"rtl-border","test":"const setDir = async (d) => { $('.wrap').setAttribute('dir', d); await tick(16); }; const px = (sel, p) => parseFloat(style(sel, p)); const flipped = () => style('.arrow', 'scale') === '-1 1' || style('.arrow', 'transform').startsWith('matrix(-1'); await setDir('rtl'); let ok = false; try { ok = (px('.session-card', 'border-right-width') === 6 && px('.session-card', 'border-left-width') === 0 && style('.session-card', 'border-right-color') === 'rgb(109, 40, 217)'); } finally { await setDir('ltr'); } return ok;"},{"id":"rtl-padding","test":"const setDir = async (d) => { $('.wrap').setAttribute('dir', d); await tick(16); }; const px = (sel, p) => parseFloat(style(sel, p)); const flipped = () => style('.arrow', 'scale') === '-1 1' || style('.arrow', 'transform').startsWith('matrix(-1'); await setDir('rtl'); let ok = false; try { ok = (px('.session-card', 'padding-right') === 20 && px('.session-card', 'padding-left') === 8); } finally { await setDir('ltr'); } return ok;"},{"id":"rtl-time-gap","test":"const setDir = async (d) => { $('.wrap').setAttribute('dir', d); await tick(16); }; const px = (sel, p) => parseFloat(style(sel, p)); const flipped = () => style('.arrow', 'scale') === '-1 1' || style('.arrow', 'transform').startsWith('matrix(-1'); await setDir('rtl'); let ok = false; try { ok = (px('.time', 'margin-left') === 12 && px('.time', 'margin-right') === 0); } finally { await setDir('ltr'); } return ok;"},{"id":"rtl-link-aligned","test":"const setDir = async (d) => { $('.wrap').setAttribute('dir', d); await tick(16); }; const px = (sel, p) => parseFloat(style(sel, p)); const flipped = () => style('.arrow', 'scale') === '-1 1' || style('.arrow', 'transform').startsWith('matrix(-1'); await setDir('rtl'); let ok = false; try { ok = (['end', 'left'].includes(style('.more', 'text-align')) && px('.arrow', 'margin-right') === 4); } finally { await setDir('ltr'); } return ok;"},{"id":"rtl-arrow-flips","test":"const setDir = async (d) => { $('.wrap').setAttribute('dir', d); await tick(16); }; const px = (sel, p) => parseFloat(style(sel, p)); const flipped = () => style('.arrow', 'scale') === '-1 1' || style('.arrow', 'transform').startsWith('matrix(-1'); await setDir('rtl'); let ok = false; try { ok = (flipped()); } finally { await setDir('ltr'); } return ok;"}],"title":"اجعل البطاقة تعمل من اليمين إلى اليسار","prompt":"

البطاقة مكتوبة بخصائص فيزيائية، لذا تنكسر حين يتحوّل الغلاف إلى dir="rtl". دون تغيير الـ HTML:

\n\n

تعرض الفحوصات البطاقة في الاتجاهين.

\n","hints":["border-left تصبح border-inline-start؛ وmargin-right تصبح margin-inline-end.","text-align: left تصبح start وright تصبح end. وpadding-inline تأخذ قيمة للبداية وأخرى للنهاية.","للأيقونة: .arrow:dir(rtl) { scale: -1 1; } (أو transform: scaleX(-1))."],"explanation":"

الخصائص المنطقية تُحسم بحسب اتجاه العنصر، فتكون border-inline-start هي الحدّ الأيسر في الإنجليزية والأيمن في العربية، والأمر نفسه مع padding-inline وmargin-inline-end وtext-align: start/end. يبقى العرض الإنجليزي كما هو، وتبديل dir يعكس البطاقة دون أيّ قواعد إضافية. والأيقونات الاتجاهية هي الاستثناء: الرسم لا يعرف إلى أين يجب أن يشير، لذا تطابق :dir(rtl) السهم حين يكون اتجاهه الموروث من اليمين إلى اليسار، وscale: -1 1 تعكسه.

\n","checkLabels":{"ltr-unchanged":"في الإنجليزية تبدو البطاقة تمامًا كما كانت","rtl-border":"في RTL يقع الحدّ الملوّن على اليمين","rtl-padding":"في RTL يتبع الـ padding اتجاه النص","rtl-time-gap":"في RTL تقع المسافة التي تلي الوقت على يساره","rtl-link-aligned":"في RTL يُحاذى الرابط إلى النهاية وتنعكس مسافة السهم","rtl-arrow-flips":"في RTL يُعكس السهم"}},"words":721,"readMinutes":4}