لعرض مسارات أقسام كاملة مثل 1.2.1، أنشئ قوائم مرتبة متداخلة واستخدم CSS counters() لدمج مستوياتها. ينشئ هذا الدليل ملف HTML محليًا على جهاز Mac، ويحافظ على ترتيب المخطط، ويوضح كيفية التحقق من الترقيم بعد التعديلات.

كيف يعمل الترقيم بمسارات كاملة؟

يسجل مسار القسم الكامل موضع العنصر في كل مستوى. على سبيل المثال، يعني 1.2.1 العنصر الأول داخل العنصر الفرعي الثاني للعنصر الأول في المستوى الأعلى. يوفر CSS الدالة counters() تحديدًا لدمج قيم العدادات المتداخلة، بدءًا من العداد الخارجي وصولًا إلى الداخلي، مع إدراج الفاصل الذي تختاره. MDN: دالة counters() في CSS

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

يستخدم المثال ثلاث قواعد: إنشاء عداد في كل قائمة مشاركة، وزيادته لكل عنصر، وعرض المسار المدمج قبل تسمية العنصر. يتبع ذلك نمط العدادات المتداخلة الموثق في MDN، مع حصر المحددات في هذا المخطط. MDN: استخدام عدادات CSS

أنشئ ملف المخطط على جهاز Mac

ستحتاج إلى TextEdit ومتصفح مثل Safari. يتضمن المثال الكامل ورقة الأنماط الخاصة به ومحتوى تجريبيًا افتراضيًا؛ ولا يحتاج إلى حزم أو أدوات بناء أو JavaScript.

  1. افتح TextEdit واختر File > New.
  2. اختر Format > Make Plain Text.
  3. الصق المثال الكامل أدناه.
  4. اختر File > Save، وسمِّ الملف outline.html، واحفظه في مكان مناسب، مثل سطح المكتب.
  5. إذا سألك TextEdit عن الامتداد المطلوب، فاختر Use .html.

توثق Apple سير العمل هذا باستخدام النص العادي لإنشاء ملفات HTML في TextEdit. Apple: العمل مع مستندات HTML في TextEdit على Mac

المثال التالي مستند كامل. انسخ محتويات كتلة التعليمات البرمجية، مع حذف سطري علامات Markdown المحيطة بها.

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

    .outline,
    .outline ol {
      counter-reset: outline-section;
      list-style-type: none;
      padding-inline-start: 1.5rem;
    }

    .outline li {
      counter-increment: outline-section;
      margin-block: 0.35rem;
    }

    .outline li::before {
      content: counters(outline-section, ".") " ";
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1>Sample document outline</h1>
  <ol class="outline" role="list">
    <li>Node A
      <ol role="list">
        <li>Node B</li>
        <li>Node C
          <ol role="list">
            <li>Node D</li>
            <li>Node E</li>
          </ol>
        </li>
        <li>Node F</li>
      </ol>
    </li>
    <li>Node G
      <ol role="list">
        <li>Node H</li>
      </ol>
    </li>
    <li>Node I</li>
  </ol>
</body>
</html>

افتح Safari، ثم اسحب outline.html من Finder إلى نافذة Safari. استخدم TextEdit لتحرير المصدر وSafari لمعاينة المخطط المعروض. بعد كل تعديل، احفظ الملف وأعد تحميل صفحة المتصفح.

أبقِ TextEdit في وضع تحرير التعليمات البرمجية

عند إعادة فتح الملف، قد ترى محتوى منسقًا بدلًا من التعليمات البرمجية المصدرية. توثق Apple خيارين: استخدام File > Open، والنقر على Show Options، وتحديد Ignore rich text commands؛ أو تفعيل Display HTML files as HTML code instead of formatted text ضمن TextEdit > Settings > Open and Save. Apple: العمل مع مستندات HTML في TextEdit على Mac

تحقّق من المسارات الكاملة بمقارنتها بالعينة

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

1 العقدة A
  1.1 العقدة B
  1.2 العقدة C
    1.2.1 العقدة D
    1.2.2 العقدة E
  1.3 العقدة F
2 العقدة G
  2.1 العقدة H
3 العقدة I

تتحقق هذه العينة من ثلاثة انتقالات مميزة. تبدأ العقدة D مستوى ثالثًا تحت العقدة C. ويعود الترقيم إلى المستوى الثاني عند العقدة F بعد انتهاء ذلك الفرع. ثم يعود إلى المستوى الأعلى عند العقدة G، ويبدأ أول عنصر فرعي لها عند 2.1. أكد اجتياز حتمي لشجرة العينة هذه المسارات المتوقعة؛ ولم يُعرض المثال في متصفح أثناء الإعداد.

أهمية كل قاعدة CSS

ينبغي تطبيق إعادة الضبط على كل من .outline و.outline ol. تحتاج كل قائمة متداخلة إلى مثيل جديد من outline-section؛ فإعادة ضبط القائمة الخارجية وحدها لا تنشئ عدًّا مستقلًا لكل عمق. تؤدي الزيادة عند كل عنصر قائمة إلى تقديم قيمة المثيل الحالي. MDN: استخدام عدادات CSS

تستخدم قاعدة العرض counters(outline-section, "."). تجمع الدالة بصيغة الجمع جميع المثيلات النشطة التي تحمل ذلك الاسم. واستبدالها بصيغة المفرد counter(outline-section) سيعرض قيمة المستوى الحالي فقط، فتظهر تسمية العنصر المتداخل 1 بدلًا من مساره الكامل. MDN: دالة counters() في CSS

يزيل المثال علامات القائمة الأصلية لأنه يضيف بادئاته الخاصة. ولكل قائمة أيضًا role="list": توثق MDN أن Safari قد يحذف القوائم المنسقة باستخدام list-style-type: none من شجرة إمكانية الوصول. أبقِ هذه السمة عند إضافة قائمة متداخلة أخرى. MDN: خاصية list-style-type في CSS

عدّل المخطط دون الإخلال ببنيته

ضع كل <ol> متداخل داخل عنصر <li> الذي يحتوي الفرع. على سبيل المثال، تحتوي العقدة C على قائمة العناصر الفرعية الخاصة بها قبل وسم الإغلاق </li> للعقدة C. ويجب ألا تكون القائمة المتداخلة عنصرًا فرعيًا مباشرًا لقائمة مرتبة أخرى. MDN: عنصر القائمة المرتبة في HTML

لاختبار عملي للتعديل، أضف عنصرًا جديدًا قبل العقدة C مباشرة. ينبغي أن يكون مساره الجديد 1.2؛ وأن تصبح العقدة C 1.3؛ وأن يصبح مسارا العقدتين D وE 1.3.1 و1.3.2. ينبغي أن تبقى العقدة G عند 2. تنبع هذه التغييرات المتوقعة من بنية العينة، وتوفر تحققًا مفيدًا من أن الترقيم يتبع بنية الفروع.

لنقل فرع، انقل عنصر القائمة الحاوي بأكمله، بما في ذلك قوائمه المتداخلة ووسم الإغلاق. نقل التسمية وحدها يُبقي العناصر الفرعية في مكانها. لإنشاء مستوى رابع، كرر بنية القائمة المتداخلة الحالية داخل العنصر المناسب؛ ولا تكتب رقمًا إضافيًا في التسمية.

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

شخّص الترقيم الخاطئ بترتيب مفيد

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

ما تراه ما ينبغي فحصه التصحيح لهذا المثال
يظهر رقم واحد لكل عنصر متداخل الدالة في content استخدم counters() بصيغة الجمع مع الفاصل النقطي.
يبدأ كل عنصر شقيق عند 1 محدد إعادة الضبط أعد ضبط القوائم، لا كل عنصر.
تظهر الأرقام الأصلية بجانب المسارات الكاملة قاعدة نمط القائمة طبّق list-style-type: none على القوائم الخارجية والمتداخلة.
للفرع بادئة غير متوقعة موضع قائمته المتداخلة أبقِ القائمة الفرعية داخل العنصر الحاوي لها.
تكتسب قائمة أخرى في موضع مختلف بادئات نطاق محدد العداد أبقِ البادئة .outline في القواعد.

تحقق أيضًا مما إذا كان أحد العناصر مخفيًا. لا تُنفذ عمليات عدادات CSS على العناصر التي لا تنشئ صندوقًا، بما فيها العناصر ذات display: none. في المقابل، تظل العناصر ذات visibility: hidden منشئة لصندوق، ولذلك قد تؤثر في العد. قرر بعناية ما إذا كان ينبغي لعنصر محذوف من العرض أن يشغل موضعًا. W3C: العدادات في العناصر التي لا تنشئ صناديق

ماذا عن أرقام البداية المخصصة؟

يستخدم هذا المثال عمدًا عدادًا مخصصًا يبدأ من الصفر ويزيد إلى واحد. تتحكم سمات HTML مثل start وreversed وvalue لعنصر القائمة في ترقيم القوائم المرتبة الأصلي؛ أما قواعد outline-section المخصصة المعروضة هنا فلا تقرأ تلك السمات. لذا فإن إضافة start="4" وحدها لا تجعل البادئة المعروضة في هذا المثال تبدأ عند 4. معيار HTML: القوائم المرتبة وعناصرها

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

حدّد ما إذا كانت الأرقام للعرض أم جزءًا من محتوى المستند

البادئات في هذا الدليل محتوى ينشئه CSS. وهي مناسبة لمخطط مرئي، لكن المراجع الأساسية تتطلب مزيدًا من الانتباه: تشير MDN إلى أن قارئات الشاشة لا تتيح المحتوى المضاف عبر ::before بصورة موثوقة. إن إضافة role="list" تحافظ على التعرّف على القائمة؛ لكنها لا تضمن الإعلان عن كل مسار منشأ. MDN: العنصر الزائف ::before في CSS

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

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

المصادر