सामग्री पर जाएँ
मेनू
भाषा, अभी हिन्दी
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

rastrillo डिज़ाइन सिस्टम

डिज़ाइन सिस्टम जो कुछ देता है, उसका अवलोकन। थीम: signal। भाषा: हिन्दी

तारीखें, संख्याएँ और नाम

तारीखें, संख्याएँ, पैसा, नाम और पते कैसे दिखाएँ, और कौन-से आपस में गड्ड-मड्ड हो जाते हैं।

तारीखें और समय

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