মূল বিষয়ে যান
বিভাগসমূহ
ভাষা, এখন বাংলা
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 মানে ২ ঘণ্টা ৩০ মিনিট।

প্রিভিউ
<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>১,২৮৪.৫০€</dd>
    <dt>JPY</dt>
    <dd>১,২৮৫ JP¥</dd>
    <dt>KWD</dt>
    <dd>১,২৮৪.৫০০ KWD</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>