الانتقال إلى المحتوى
الأقسام
اللغة، حاليًا العربية
نظام تصميم Rastrillo

التواريخ والأرقام والأسماء

كيف تعرض التواريخ والأرقام والمبالغ والأسماء والعناوين، وأيّها يختلط على الناس.

كل مثال يعمل فعلًا، لكن روابطه لا تؤدي إلى أي مكان.

التواريخ والأوقات

ضع التاريخ في وسم <time>، مع صيغة يستطيع الحاسوب قراءتها. أما التاريخ الظاهر فاكتبه كما يتوقّعه قُرّاؤك. ولن يتولّى rastrillo تنسيقه عنك.

معاينة
<section rst-box>
  <dl rst-detail>
    <dt>منشور</dt>
    <dd>
      <time datetime="2026-08-02">2 أغسطس 2026</time>
    </dd>
  </dl>
</section>

كم استغرق الأمر

استخدم <time> للمدة أيضًا. والصيغة التي تقرأها الآلة تبدو غريبة: PT2H30M تعني ساعتين و30 دقيقة.

معاينة
<section rst-box>
  <dl rst-detail>
    <dt>مدة البناء</dt>
    <dd>
      <time datetime="PT2H30M">2 س 30 د</time>
    </dd>
  </dl>
</section>

الأرقام

افصل الأرقام الطويلة لتُقرأ بلمحة: 54,173 بالإنجليزية، و54.173 بالألمانية، و٥٤٬١٧٣ بالعربية. ولا تعرض رقمًا طويلًا كأرقام متتابعة دون فصل. وفي الجداول استخدم أرقامًا متساوية العرض حتى تستقيم الأعمدة.

معاينة
<div rst-stats>
  <div rst-stat>
    <span rst-stat-label>الأعضاء</span>
    <span rst-stat-num>54,173</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>الرسائل</span>
    <span rst-stat-num>1,284,902</span>
  </div>
</div>

المبالغ

خزّن كل مبلغ كعدد صحيح من أصغر وحدة في العملة، مثل السنتات، مع رمز العملة بجانبه. أظهره باستخدام `money`، التي تكتبه بالطريقة التي تكتب بها لغة القارئ. تأتي العملة دائمًا من بياناتك، لا من القارئ أبدًا.

معاينة
<section rst-box>
  <dl rst-detail>
    <dt>EUR</dt>
    <dd>‏1,284.50 €</dd>
    <dt>JPY</dt>
    <dd>‏1,285 JP¥</dd>
    <dt>KWD</dt>
    <dd>‏1,284.500 د.ك.‏</dd>
  </dl>
</section>

النِّسب والأشرطة

استخدم <meter> لبيان مدى امتلاء شيء ما، و<progress> لبيان ما بلغته مهمة. واطبع الرقم دائمًا بجوار الشريط. فالشريط وحده لا يقول شيئًا لقارئ لا يبصره.

معاينة
<div rst-box-head>
  <h2>مساحة تخزين الصور</h2>
</div>
<section rst-box>
  <span rst-meter>
    <meter rst-meter-bar value="82" min="0" max="100" aria-hidden="true"></meter>
    <span rst-meter-num>412 / 500</span>
  </span>
</section>
<div rst-box-head>
  <h2>الاستيراد</h2>
</div>
<section rst-box>
  <div rst-job>
    <span rst-spin aria-hidden="true"></span> <strong>الاستيراد</strong> قيد التشغيل: 128 من 400…<progress rst-job-bar value="32" min="0" max="100" aria-hidden="true"></progress>
  </div>
</section>

أحجام الملفات

اعرض حجمًا مقرَّبًا مثل 4 ميغابايت، وضع عدد البايتات الدقيق في وسم <data>. قارئات الشاشة تقرأ ما يظهر وتتجاهل الوسم، لذا يجب أن يكون الحجم المقرَّب مفيدًا بذاته.

معاينة
<section rst-box>
  <dl rst-detail>
    <dt>ملف التصدير</dt>
    <dd>
      <data value="4194304">4 MB</data>
    </dd>
  </dl>
</section>

الأرقام المرجعية والرموز

لا تفصل هذه. الطلب 4471، لا الطلب 4,471. والسنوات وأرقام الإصدارات وأرقام المنافذ مثلها. استخدم rst-mono لتبدو كرموز، ولا تضع واحدًا منها في وسم <time> أبدًا، ولو بدا تاريخًا.

معاينة
<section rst-box>
  <dl rst-detail>
    <dt>المرجع</dt>
    <dd class="rst-mono">post_01H9ZQ</dd>
    <dt>الطلب</dt>
    <dd class="rst-mono">4471</dd>
  </dl>
</section>

أسماء الأشخاص

قد يكون الاسم بأي لغة، بما فيها ما يُقرأ من اليمين إلى اليسار. وحين يقع الاسم في وسط سطر، لُفَّه بـ<bdi>، وإلا بعثر ترتيب الكلمات حوله. واستخدم person لعرض اسم بجواره صورة.

معاينة
<div rst-card style="--rst-cols: minmax(0, 1fr) 120px">
  <div rst-lrow>
    <a class="rst-nm" href="/people/1"><bdi>Grace Hopper</bdi>
      <small>
        <bdi>grace@example.com</bdi> · 09:12</small>
    </a>
    <span class="rst-cell-mut rst-m-hide">مسؤول</span>
  </div>
</div>

العناوين

وسم <address> ليس للعناوين البريدية. بل ليقول من كتب الصفحة. وعنوان التوصيل نصٌّ عادي. وقائمة الموظفين قائمة.

معاينة
<section rst-box>
  <address>كتبته <bdi>Grace Hopper</bdi> · <a href="mailto:grace@example.com">grace@example.com</a></address>
</section>
<section rst-box>
  <dl rst-detail>
    <dt>التوصيل إلى</dt>
    <dd>42 Wharf Road, Dublin 2</dd>
  </dl>
</section>

الاختصارات مثل WCAG

يُظهر وسم <abbr> الصيغة الكاملة عند تمرير المؤشر. وهذا لا يعمل على الهاتف، وكثيرًا ما تتخطّاه قارئات الشاشة. فاكتب الكلمات كاملة في أول مرة أيضًا.

معاينة
<section rst-box>
  <p>كل صفحة هنا تستوفي إرشادات الوصول إلى محتوى الويب (<abbr title="إرشادات الوصول إلى محتوى الويب">WCAG</abbr>) 2.2 عند المستوى AA.</p>
</section>

أرقام تحسبها صفحتك

حين تجمع صفحتك شيئًا، ضع الناتج في وسم <output>. مجموع جارٍ، أو سعر محوَّل، أو عدّ تنازلي.

معاينة
<section rst-box>
  <form rst-form>
    <div rst-field>
      <label rst-field-label for="seats">المقاعد</label>
      <input rst-input="short" id="seats" name="seats" type="number" value="12">
    </div>
    <p>الإجمالي <output for="seats" name="total">$144.00</output></p>
  </form>
</section>