استخدم HTML dir لتعيين اتجاه النص الأساسي، واستخدم CSS flex-direction: row-reverse لعكس تدفق صف flex. عند ترتيب البطاقات على صفحة عامة من جهاز Mac، حدد أولًا ما إذا كنت بحاجة إلى تغيير اتجاه النص أو تسلسل العناصر أو المحاذاة.

يفترض هذا الدليل أنك تحرر HTML وCSS لصفحة في محرر نصوص وتعاينها في متصفح على كمبيوتر مكتبي. تتمثل المهمة في ترتيب ثلاثة مربعات محايدة—Alpha وBeta وGamma—مع إبقاء سلوك النص وترتيب المستند مقصودين.

ما الذي يغيّره كل إعداد للاتجاه فعليًا؟

تصف السمة dir في HTML الاتجاه الأساسي لنص العنصر. وقيمها الصريحة هي ltr وrtl؛ أما auto فتطلب من المتصفح تحديد الاتجاه استنادًا إلى المحتوى. تشجع WHATWG المؤلفين على تحديد اتجاه النص عبر HTML كي تظل هذه المعلومة متاحة من دون CSS. معيار HTML: السمة dir.

تتحكم CSS direction أيضًا في اتجاه النص الأساسي وتؤثر في سلوك التخطيط. وهي موروثة، لذا يمكن أن يؤثر تعيين direction: rtl على حاوية في عناصرها التابعة. توصي MDN باستخدام HTML dir متى أمكن. تعامل مع تجاوز الاتجاه عبر CSS بوصفه قرارًا مقصودًا بشأن اتجاه النص، لا وسيلة ملائمة لتحريك الصناديق. MDN: direction.

تتحكم CSS flex-direction في المحور الرئيسي لحاوية flex. ويتبع row المحور المضمّن لنمط الكتابة الحالي؛ أما row-reverse فيبدّل اتجاهي بداية المحور الرئيسي ونهايته. وهي تغيّر اتجاه تخطيط العناصر مع الحفاظ على تسلسلها في المصدر. W3C: اتجاه تدفق Flex.

تتفاعل هذه الآليات فيما بينها. في نمط الكتابة الأفقي، يبدأ صف flex ذي ltr من اليسار، بينما يبدأ صف flex ذي rtl من اليمين. تؤدي إضافة row-reverse إلى عكس أي من اتجاهي البداية. لذلك، لا تعني row-reverse دائمًا أن العنصر الأول سيظهر على اليمين. MDN: flex-direction.

أي إعداد يطابق النتيجة التي تريدها؟

قبل التحرير، دوّن النتيجة المطلوبة بعبارات ملموسة: «أبقِ التسميات الإنجليزية كما هي، واعرض المربعات بترتيب مرئي معكوس، وأبقِ المجموعة إلى اليمين». تحدد هذه العبارة قرارات منفصلة تتعلق بالنص وتدفق العناصر والمحاذاة.

النتيجة المطلوبة نقطة بداية مناسبة ما ينبغي التحقق منه
تعيين اتجاه النص الأساسي للمحتوى HTML dir="ltr" أو dir="rtl" طبّقه على النطاق الذي يحتاج نصه إلى ذلك الاتجاه.
عكس التتابع المرئي لكل العناصر في صف flex flex-direction: row-reverse تحقق أولًا من الاتجاه الحالي للحاوية.
نقل صف لم يتغير إلى جهة نهاية محوره الرئيسي justify-content: flex-end تأكد من وجود مساحة فارغة للمحاذاة.
تغيير التسلسل المقصود في كل المواضع إعادة ترتيب عناصر المصدر تأكد من أن تسلسل القراءة الناتج منطقي.
إعادة تموضع عناصر محددة بصريًا قيم order الفردية راجع الفرق بين الترتيب المرئي وترتيب المصدر.

التمييز بين العكس والمحاذاة مهم. ففي صف ltr، يمكن لـ justify-content: flex-end جمع Alpha وBeta وGamma إلى اليمين من دون عكس تسلسلها. توزّع المحاذاة المساحة المتاحة على المحور الرئيسي؛ وتشير flex-end إلى جهة نهاية المحور الرئيسي لحاوية flex. وقد يختفي تأثيرها عندما تستهلك العناصر المرنة تلك المساحة. MDN: justify-content.

إذا كان على القراء مواجهة التسلسل بترتيب معين، فحدّد ذلك التسلسل في المستند نفسه. تحذر W3C صراحة من استخدام عكس flex أو order للتعويض عن ترتيب غير صحيح في المصدر. W3C: الترتيب والاتجاه.

توقّع التركيبات الأربع قبل تغيير الصفحة

المقارنة التالية مستنتجة من قواعد المحاور الموثقة. وهي تفترض writing-mode: horizontal-tb، وسطر flex واحدًا، وقيم order متساوية، وترتيب المصدر Alpha ثم Beta ثم Gamma. ويصف «المظهر من اليسار إلى اليمين» مواضع المربعات الفعلية عبر الشاشة.

اتجاه الحاوية اتجاه Flex يبدأ العنصر الأول من المظهر من اليسار إلى اليمين
ltr row اليسار Alpha، Beta، Gamma
ltr row-reverse اليمين Gamma، Beta، Alpha
rtl row اليمين Gamma، Beta، Alpha
rtl row-reverse اليسار Alpha، Beta، Gamma

قد يبدو الصفان الثاني والثالث متشابهين عندما يكون محتواهما مجرد مستطيلات بسيطة، لكن إعدادَي اتجاه النص فيهما مختلفان. وتفسر التركيبة الرابعة مفاجأة شائعة: تطبيق rtl وrow-reverse معًا ينتج تتابعًا للعناصر من اليسار إلى اليمين. توثق MDN هذا السلوك المعتمد على الاتجاه. MDN: flex-direction.

يؤثر اتجاه النص الأساسي أيضًا في علامات الترقيم وترتيب مقاطع النص ذات الاتجاهات المختلفة. لا يؤدي تعيين rtl ببساطة إلى عكس كل حرف في كلمة إنجليزية. فقد تظل التسمية مقروءة، بينما تظهر علامة الترقيم في موضع غير متوقع. لذلك تفيد المربعات البسيطة في فحص مواضع الصناديق، لكنها لا تكفي لتقييم سلوك النص. MDN: ملاحظات استخدام dir.

جرّب صفحة مقارنة كاملة على جهاز Mac

احفظ المستند الكامل التالي باسم direction-demo.html باستخدام محرر نصوص عادي، ثم افتح الملف في متصفحك. يستخدم المستند تسميات اصطناعية ومستطيلات CSS، ولا يعتمد على أي موارد خارجية. تستند النتائج المتوقعة إلى القواعد الموثقة؛ ولا يُقدَّم المثال على أنه نتيجة اختُبرت في متصفح.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Direction and flex comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      margin: 24px;
      color: #202020;
      background: #fff;
    }
    .row {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      writing-mode: horizontal-tb;
      justify-content: flex-start;
      gap: 12px;
      max-width: 448px;
      padding: 12px;
      border: 1px solid #777;
      margin-bottom: 20px;
    }
    .reverse { flex-direction: row-reverse; }
    .tile {
      flex: 0 0 64px;
      padding: 16px 0;
      text-align: center;
      background: #e2ecf4;
    }
  </style>
</head>
<body>
  <h1>Direction and flex comparison</h1>
  <p>LTR with row</p>
  <div class="row" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>LTR with row-reverse</p>
  <div class="row reverse" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row</p>
  <div class="row" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row-reverse</p>
  <div class="row reverse" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
</body>
</html>

قارن الصفوف الأربعة بجدول التوقعات. يتضمن كل صف تسلسل المصدر نفسه. ولا يختلف بينها سوى اتجاه الحاوية وفئة العكس. ويُبقي نمط الكتابة الأفقي الصريح هذا العرض محصورًا في الحالة الأفقية المعتادة على كمبيوتر مكتبي.

بعد ذلك، غيّر justify-content: flex-start فقط إلى justify-content: flex-end، واحفظ الصفحة وأعد تحميلها. ينبغي أن تنتقل المجموعات إلى الجهة المقابلة من المحور الرئيسي مع احتفاظ كل صف بتتابع عناصره. يفصل ذلك بين الموضع والعكس من دون إدخال إعداد آخر لاتجاه النص. MDN: justify-content.

أخيرًا، أعد إعداد المحاذاة وأضف نقطة بعد Alpha في كل صف. قارن علامات الترقيم ومواضع المربعات. هذا اختبار توضيحي لاتجاه النص، وليس توصية بتعيين rtl للتسميات الإنجليزية العادية. يوضح شرح MDN للاتجاه الأساسي سبب ضرورة التحقق من علامات الترقيم عند حدود النص. MDN: dir.

شخّص النتائج غير المتوقعة في التخطيط الفعلي

تأكد من أن العنصر الأب حاوية flex

تحقق من العنصر الذي يحتوي المربعات. ينطبق flex-direction عندما تكون قيمة display فيه flex أو inline-flex. لن يؤدي إعلان على حاوية كتلية عادية إلى إنشاء تخطيط flex. وتحقق أيضًا مما إذا كانت قاعدة لاحقة تغيّر القيمة الفعلية عند عرض المتصفح الحالي. MDN: وصف flex-direction.

تحقق من الاتجاه الموروث قبل إضافة عكس آخر

افحص الحاوية والعناصر الأبوية بحثًا عن dir، ثم تحقق من إعلانات CSS direction. عندما تُحذف dir، يُورث الاتجاه عمومًا من العنصر الأب؛ وحذفها لا يطلب الكشف التلقائي. إذا بدأ تسلسل المصدر على اليمين على نحو غير متوقع، فقد يفسر ذلك الاتجاه الموروث. MDN: وراثة dir.

تجنب استخدام dir="auto" كمفتاح للتخطيط. تعرّف WHATWG هذه السمة على أنها كشف للاتجاه استنادًا إلى المحتوى، وبخاصة اعتمادًا على أول محرف قوي الاتجاه، وتوصي بقصر استخدامها على النص الذي يكون اتجاهه مجهولًا فعلًا. يجب ألا يعتمد متطلب التخطيط على التسمية التي تظهر أولًا. معيار HTML: السمة dir.

افصل بين عكس العناصر وعكس الأسطر

إذا ظهرت المشكلة فقط بعد تضييق النافذة، فتحقق من التفاف العناصر. يغيّر row-reverse تتابع المحور الرئيسي؛ أما wrap-reverse فيغيّر اتجاه تراص أسطر flex. ويحافظ الإعداد الافتراضي nowrap على سطر واحد وقد يسمح بحدوث تجاوز. هذان إعدادان منفصلان، لذا اختبر نافذة ضيقة إلى جانب عرض الكمبيوتر المكتبي الأولي. MDN: flex-wrap.

ابحث عن قواعد الترتيب الفردية

تحقق مما إذا كانت لأي مربع قيمة order. يجمع تخطيط flex العناصر وفق هذه الأعداد الصحيحة، من الأصغر أولًا، ويحافظ على ترتيب المصدر بين العناصر ذات القيم المتساوية. ثم يغيّر العكس الاتجاه الذي يُرتب منه ذلك التسلسل الناتج. أعد ضبط أي ترتيب غير متوقع على مستوى العنصر قبل أن تقرر أن اتجاه الحاوية خاطئ. MDN: ترتيب عناصر flex.

تحقق من تسلسل القراءة قبل الإبقاء على التغيير

قد يكون العكس المرئي هو المطلوب كله للمربعات الزخرفية المحايدة. أما الروابط وعناصر التحكم، فتحقق من تسلسل المصدر واتبع انتقال التركيز بلوحة المفاتيح عبر المكوّن. لا يغيّر عكس flex بحد ذاته التنقل التسلسلي أو ترتيب النطق. لذلك قد تحتفظ المجموعة المعكوسة بصريًا بتسلسل التفاعل الأصلي. W3C: اتجاه تدفق Flex.

استخدم هذا التحقق لتقرر ما إذا كان ينبغي تغيير المصدر. إذا كان التسلسل المقصود هو Gamma ثم Beta ثم Alpha، فضع العناصر بهذا الترتيب. وإذا ظل Alpha ثم Beta ثم Gamma هو تسلسل القراءة الصحيح وكان المطلوب عكس العرض فقط، فقيّم الترتيب المرئي مع مراعاة هذا الفرق. تعرض MDN سلوك ترتيب المصدر باستخدام روابط قابلة للتركيز. MDN: ترتيب عناصر flex.

اختر الآلية بناءً على المتطلب: HTML dir لاتجاه النص الأساسي، وflex-direction لتدفق محور flex، والمحاذاة لتحديد موضع تسلسل لم يتغير. قبل الإبقاء على النتيجة، قارن مواضع المربعات وعلامات الترقيم والتفاف النص وترتيب المصدر كلًا على حدة. يمنحك ذلك طريقة قابلة للتكرار لحل مشكلة تخطيط يبدو معكوسًا فحسب.

المصادر