إنتقل إلى المحتوى الرئيسي

في هذه الصفحة

ترجمة لـالمواصفات بالإنجليزية. إن اختلفت الترجمة عن الأصل، فالإنجليزية هي المرجع.

أقسام الصفحة، بجانبها، ويُعلَّم القسم الذي يُقرأ أثناء التمرير.

CSS: css/components/toc.css. JS: js/toc.js (initToc()). الأصناف: .al-toc، .al-toc__title.

في صفحته، بالإنجليزية والعربية

البنية​

HTML
<nav class="al-toc" aria-label="في هذه الصفحة">
  <p class="al-toc__title" aria-hidden="true">في هذه الصفحة</p>
  <ul>
    <li><a href="#anatomy">البنية</a></li>
    <li><a href="#keyboard">لوحة المفاتيح</a></li>
  </ul>
</nav>
<script type="module">
  import { initToc } from "./js/toc.js";
  initToc();
</script>

وفي React: OnThisPage (links وtitle).

الأنواع والأحجام​

نوع واحد. بجانب المحتوى، ثابت أثناء التمرير، في عمود بعرض 13rem تقريبًا؛ وفوق المحتوى، غير ثابت، تحت md. لصفحة طويلة فيها أربعة أقسام أو أكثر، كمستند أو مواصفة.

الحالات​

لكل رابط خط في بدايته؛ ويُعلَّم القسم الذي يُقرأ (آخر قسم تجاوز عنوانه الربع الأعلى من النافذة): خطه بلون التمييز، وكلماته بلون النص. التمرير: لون النص.

لوحة المفاتيح​

يصل Tab إلى كل رابط؛ وينتقل Enter إلى قسمه.

ARIA​

عنصر nav باسم «في هذه الصفحة»؛ والعنوان بالكلمات نفسها، فيُخفى عن قارئات الشاشة. وللرابط المعلَّم aria-current="true".

من اليمين إلى اليسار​

الخطوط في بداية كل رابط، على اليمين في العربية.

افعل ولا تفعل​

افعل
  • اربط كل h2، بالترتيب، بكلمات العناوين نفسها.
لا تفعل
  • استخدامه لصفحة قصيرة؛ فالعناوين تكفي.
  • تداخله لأكثر من مستوى واحد.

الرموز​

الرموز التي يستخدمها (9)

--al-color-accent، --al-color-line، --al-color-text، --al-color-text-muted، --al-space-1، --al-space-3، --al-space-6، --al-text-sm، --al-weight-medium