মূল বিষয়ে যান
মেনু
ভাষা, এখন বাংলা
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

rastrillo ডিজাইন সিস্টেম

ডিজাইন সিস্টেম যা কিছু দেয়, তার সংক্ষিপ্ত পরিচয়। থিম: plain। ভাষা: বাংলা

তারিখ, সংখ্যা আর নাম

তারিখ, সংখ্যা, টাকা, নাম আর ঠিকানা কীভাবে দেখাবেন, আর কোনগুলি মানুষ গুলিয়ে ফেলে।

তারিখ আর সময়

তারিখটি <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 মানে ২ ঘণ্টা ৩০ মিনিট।

প্রিভিউ
<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>