الانتقال إلى المحتوى
القائمة
اللغة، حاليًا العربية
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

نظام تصميم rastrillo

نظرة عامة على كل ما يوفّره نظام التصميم. السمة: day. اللغة: العربية.

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

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

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

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

معاينة
<section rst-box>
  <dl rst-detail>
    <dt>Published</dt>
    <dd><time datetime="2026-08-02">2 August 2026</time></dd>
  </dl>
</section>

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

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

معاينة
<section rst-box>
  <dl rst-detail>
    <dt>Build time</dt>
    <dd><time datetime="PT2H30M">2h 30m</time></dd>
  </dl>
</section>

الأرقام

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

معاينة
<div rst-stats>
  <div rst-stat><span rst-stat-label>Members</span><span rst-stat-num>54,173</span></div>
  <div rst-stat><span rst-stat-label>Messages</span><span rst-stat-num>1,284,902</span></div>
</div>

المبالغ

لا يعرف rastrillo سوى كتابة الدولار الأمريكي. ولأي شيء آخر، نسّق المبلغ بنفسك. وفي الحالتين، خزّن المال كعدد صحيح من السنتات، لا كعدد عشري.

معاينة
<section rst-box>
  <dl rst-detail>
    <dt>Payout</dt>
    <dd>$1,284.50</dd>
  </dl>
</section>

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

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

معاينة
<div rst-box-head><h2>Photo storage</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>Import</h2></div>
<section rst-box>
  <div rst-job><span rst-spin aria-hidden="true"></span> <strong>Import</strong> is running — 128 of 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>Export</dt>
    <dd><data value="4194304">4 MB</data></dd>
  </dl>
</section>

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

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

معاينة
<section rst-box>
  <dl rst-detail>
    <dt>Reference</dt>
    <dd class="rst-mono">post_01H9ZQ</dd>
    <dt>Order</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">Admin</span>
  </div>
</div>

العناوين

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

معاينة
<section rst-box>
  <address>Written by <bdi>Grace Hopper</bdi> · <a href="mailto:grace@example.com">grace@example.com</a></address>
</section>
<section rst-box>
  <dl rst-detail>
    <dt>Deliver to</dt>
    <dd>42 Wharf Road, Dublin 2</dd>
  </dl>
</section>

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

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

معاينة
<section rst-box>
  <p>Every page here meets the Web Content Accessibility Guidelines
  (<abbr title="Web Content Accessibility Guidelines">WCAG</abbr>) 2.2 at level AA.</p>
</section>

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

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

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