لإعطاء العناصر الملتفة والمفصولة بوسوم <br> مسافة بادئة معلّقة، طبّق text-indent: 2em hanging each-line على الحاوية الكتلية الخاصة بها. تحقّق من دعم الكلمتين المفتاحيتين معًا؛ وعندما يكون دعم المتصفحات الأقدم مطلوبًا، اجعل كل عنصر في كتلة مستقلة واستخدم الحشو مع مسافة بادئة سالبة.

هذا الدليل موجّه إلى شخص يحرّر صفحة HTML صغيرة على جهاز Mac ويريد أن يبدأ كل عنصر بمحاذاة الحافة اليسرى، بينما تتراجع أسطره التالية إلى الداخل. تستخدم الأمثلة نصًا اصطناعيًا، ولا تحتاج إلا إلى محرر نصوص عادي أو محرر شيفرة ومتصفح.

لماذا لا تنجح المسافة البادئة المعلّقة العادية بعد وسم فاصل الأسطر

هناك نوعان مختلفان من نهايات الأسطر ينبغي مراعاتهما. ينشئ <br> فاصل أسطر صريحًا. أما الالتفاف التلقائي فيحدث عندما يوزّع المتصفح النص ضمن العرض المتاح. يعامل التخطيط المقصود النوع الأول بوصفه بداية عنصر آخر، والثاني بوصفه سطرًا تابعًا. يعرّف WHATWG العنصر <br> على أنه فاصل أسطر؛ فهو لا ينشئ فقرة جديدة أو حاوية عنصر جديدة. معيار HTML: عنصر br.

تؤثر قيمة text-indent السالبة العادية في أول سطر منسّق في الكتلة. لذلك قد يؤدي إضافة الحشو إلى إنشاء مسافة بادئة معلّقة لتلك الكتلة، لكنه لا يعيد تطبيق الإزاحة إلى الخارج بعد كل <br>. تظل العناصر اللاحقة جزءًا من الكتلة نفسها. MDN: text-indent.

تحدّد مواصفات CSS التركيبة المطلوبة هنا: تشمل each-line السطر الأول والأسطر التي تلي فواصل الأسطر الإجبارية مباشرة؛ وتعكس hanging هذا الاختيار. وبجمعهما، تتراجع أسطر الاستمرار الملتفة تلقائيًا إلى الداخل، بينما تبدأ الأسطر الصريحة بمحاذاة الحافة. W3C: المسافة البادئة للسطر الأول.

يبدو الشكل المستهدف كما يلي. نهايات الأسطر أدناه توضيحية؛ وسيختار المتصفح مواضع الالتفاف الفعلية حسب العرض المتاح ومقاييس الخط.

يبدأ العنصر A عند الحافة الخارجية ويستمر
    إلى الداخل عندما ينفد العرض المتاح.
ويبدأ العنصر B أيضًا عند الحافة الخارجية وله
    سطر استمرار خاص به متراجع إلى الداخل.
العنصر C قصير.

اختر طريقة قبل تغيير الصفحة

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

حالتك النهج الموصى به
فواصل الأسطر الصريحة جزء من مقطع نصي واحد، والمتصفحات المدعومة كافية أبقِ الفواصل واستخدم hanging each-line
العناصر فقرات أو عناصر قائمة منفصلة أضف ترميزًا بنيويًا مناسبًا لكل عنصر
يجب أن تعرض المتصفحات الأقدم المسافة البادئة المعلّقة استخدم كتلة لكل عنصر مع الحشو ومسافة بادئة سالبة
لا يمكنك تعديل سوى CSS، ويفتقر متصفح أقدم إلى الكلمتين المفتاحيتين أبقِ التخطيط مقروءًا ومحاذيًا للحافة، أو اطلب تغيير الترميز

لا تستنتج دعم الكلمتين المفتاحيتين من دعم text-indent الأساسي. تسرد بيانات التوافق الحالية لدى MDN دعم كل من hanging وeach-line ابتداءً من Safari 15 وFirefox 121 وChrome 146. قد تدعم الإصدارات الأقدم المسافة البادئة العادية، لكنها ترفض هذه التركيبة. بيانات توافق المتصفحات لدى MDN: text-indent.

تحقّق أيضًا مما إذا كانت فواصل الأسطر تعبّر عن البنية الصحيحة. يخصّص WHATWG العنصر <br> لفواصل الأسطر التي ينص عليها المحتوى، ويشير إلى أنه يجب ألا يفصل بين مجموعات موضوعية داخل فقرة. مكان الفقرات المنفصلة هو عناصر الفقرات؛ أما مجموعة عناصر القائمة فينبغي أن تستخدم ترميز القوائم. معيار HTML: عنصر br، معيار HTML: تجميع المحتوى.

أبقِ وسوم فواصل الأسطر مع حل CSS الأصلي

يوضّح مستند HTML الكامل التالي الطريقة التي تُبقي فواصل الأسطر. على جهاز Mac، الصقه في محرر نصوص عادي أو محرر شيفرة، واحفظه باسم hanging-indent.html، ثم افتح الملف في متصفح. استخدم ملف HTML بدلًا من مستند نص منسّق.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Break-separated hanging indent</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      margin: 0;
      white-space: normal;
      text-align: start;
      text-indent: 0;
    }

    @supports (text-indent: 2em hanging each-line) {
      .entries {
        text-indent: 2em hanging each-line;
      }
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <p class="entries">Entry A: A long sample line describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.<br>
Entry B: Another long sample line describing a circular tile, an open space beneath it, and a row of neutral labels.<br>
Entry C: A short sample line.</p>
</body>
</html>

يتحقق شرط @supports من التصريح كاملًا قبل تطبيقه. وتحتفظ المتصفحات التي لا تدعم هذه التركيبة بالتخطيط المحدد صراحةً والمحاذي للحافة. تطبّق استعلامات الميزات CSS بصورة مشروطة وفقًا لدعم المتصفح. MDN: @supports.

طبّق المسافة البادئة على .entries، أي الكتلة التي تحتوي على النص. تنطبق الخاصية المعنية على الحاويات الكتلية؛ ووضع التصريح على <br> لا يوفر حاوية للعنصر التالي. MDN: text-indent.

القيمة 2em خيار تصميم قابل للتعديل. جرّب قيمة أصغر أو أكبر بعد التحقق من التخطيط الضيق. فهي تنشئ إزاحة ثابتة لأسطر الاستمرار؛ لكنها لا تقيس عرض «العنصر A:» ولا تصف النص تلقائيًا أسفل الكلمة الأولى بعد تسمية متفاوتة الطول.

استخدم كتلًا منفصلة عندما تحتاج كل المتصفحات إلى المسافة البادئة

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Paragraph hanging indents</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      text-indent: 0;
    }

    .entry {
      margin: 0;
      padding-inline-start: 2em;
      text-indent: -2em;
      white-space: normal;
      text-align: start;
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <div class="entries">
    <p class="entry">Entry A: A long sample paragraph describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.</p>
    <p class="entry">Entry B: Another long sample paragraph describing a circular tile, an open space beneath it, and a row of neutral labels.</p>
    <p class="entry">Entry C: A short sample paragraph.</p>
  </div>
</body>
</html>

ينقل الحشو بداية محتوى الفقرة إلى الداخل بمقدار 2em. وتنقل المسافة البادئة السالبة سطرها الأول وحده إلى الخارج بالمقدار نفسه. تحتفظ الأسطر الملتفة بموضع بدايتها المحشو. من الضروري أن تتساوى القيمتان؛ فتغيير إحداهما فقط يغيّر موضع بدء السطر الأول. توثّق MDN المسافة البادئة السالبة، فيما توفّر padding-inline-start حشوًا عند الحافة المنطقية للبداية. MDN: text-indent، MDN: padding-inline-start.

إذا كان حجم الخط التوضيحي 16 بكسلًا، فإن الإزاحة بمقدار 2em تعادل 32 بكسلًا: يبدأ سطر الاستمرار على بعد 32 بكسلًا إلى الداخل، ويكون تعديل السطر الأول −32 بكسلًا. هذا حساب للمثال، وليس نتيجة عرض مقاسة.

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

تحقّق من الالتفاف وتدفق النص قبل الانتهاء

اختبر الصفحة بعرض يجعل العنصرين الطويلين يلتفان. ثم وسّع النافذة حتى يظهرا في سطر واحد. استخدم الفحوص التالية للتمييز بين مشكلة في المسافة البادئة ومشكلة في الالتفاف أو البنية.

  1. تحقّق من بداية كل عنصر. في المثال الذي يُبقي فواصل الأسطر، ينبغي أن يعود النص بعد كل <br> إلى الحافة الخارجية. إذا لم يحدث ذلك، فتحقّق من دعم تركيبة الكلمات المفتاحية كاملة.
  2. تحقّق من كل سطر استمرار. ينبغي أن تلتف العناصر الطويلة إلى الداخل. وينبغي أن تبقى العناصر القصيرة بمحاذاة الحافة من دون مسافات بادئة إضافية.
  3. تحقّق من أضيق عمود مستهدف. قلّل المسافة البادئة إذا كانت تستهلك جزءًا كبيرًا من عرض السطر المتاح.
  4. تحقّق من المحتوى الفعلي. أبقِ كلمات كل عنصر والتأكيد المضمّن فيه وفواصل الأسطر الصريحة المقصودة عند نقله إلى كتلة منفصلة.

إذا لم يلتف شيء، فتحقّق من white-space. يستخدم المثال normal، الذي يدمج المسافات البيضاء في المصدر ويسمح بالالتفاف. أما pre فيحافظ على المسافات البيضاء لكنه يمنع الالتفاف التلقائي العادي؛ ويحافظ pre-wrap على المسافات البيضاء مع السماح بالالتفاف. لا تظهر المسافة البادئة على سطر استمرار لا يتكوّن أصلًا. MDN: white-space.

تجنّب إضافة مسافات لمحاكاة المسافة البادئة. فمع white-space: normal تُدمج سلاسل المسافات. وتجنّب أيضًا إدراج وسوم فواصل أسطر إضافية عند مواضع الالتفاف الحالية للنافذة؛ إذ ستحوّل الاستمرارات التي يختارها المتصفح إلى بدايات صريحة، ما يغيّر طريقة تعامل each-line معها. MDN: white-space، W3C: المسافة البادئة للسطر الأول.

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

أنهِ العمل ببنية تطابق محتواك: أبقِ فواصل الأسطر الصريحة ذات المعنى مع hanging each-line، أو اجعل لكل عنصر مستقل كتلته الخاصة. تأكّد من أن كل عنصر يبدأ بمحاذاة الحافة وأن أسطر الاستمرار التي تلتف طبيعيًا وحدها هي التي تتراجع إلى الداخل عند العروض التي تنوي استخدامها.

المصادر