सामग्री पर जाएँ
अनुभाग
भाषा, अभी हिन्दी
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 का मतलब है 2 घंटे 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>JP¥1,285</dd>
    <dt>KWD</dt>
    <dd>KWD 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> चल रहा है: 400 में से 128…<progress rst-job-bar value="32" min="0" max="100" aria-hidden="true"></progress>
  </div>
</section>

फ़ाइल के आकार

4 MB जैसा गोल किया हुआ आकार दिखाएँ, और बाइट्स की सटीक संख्या <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>