Tổng quan mọi thứ hệ thống thiết kế cung cấp. Chủ đề: signal. Ngôn ngữ: Tiếng Việt.
Cách hiển thị ngày tháng, con số, tiền, tên và địa chỉ, và những thứ hay bị nhầm lẫn.
Đặt ngày vào thẻ <time>, kèm một dạng mà máy đọc được. Phần ngày hiển thị thì viết theo cách người đọc của bạn quen nhìn. rastrillo sẽ không định dạng hộ bạn.
<section rst-box>
<dl rst-detail>
<dt>Published</dt>
<dd><time datetime="2026-08-02">2 August 2026</time></dd>
</dl>
</section>Khoảng thời gian cũng dùng <time>. Dạng máy đọc trông lạ mắt: PT2H30M nghĩa là 2 giờ 30 phút.
<section rst-box>
<dl rst-detail>
<dt>Build time</dt>
<dd><time datetime="PT2H30M">2h 30m</time></dd>
</dl>
</section>Hãy tách nhóm những con số dài để đọc được trong một cái liếc: 54,173 trong tiếng Anh, 54.173 trong tiếng Đức, ٥٤٬١٧٣ trong tiếng Ả Rập. Đừng bao giờ hiển thị số dài dưới dạng chữ số trần. Trong bảng, hãy dùng chữ số có cùng bề rộng để các cột thẳng hàng.
<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 chỉ biết viết đô-la Mỹ. Với mọi thứ khác, bạn hãy tự định dạng số tiền. Dù thế nào, hãy lưu tiền dưới dạng số nguyên xu, đừng bao giờ lưu dạng thập phân.
<section rst-box>
<dl rst-detail>
<dt>Payout</dt>
<dd>$1,284.50</dd>
</dl>
</section>Dùng <meter> để cho biết một thứ đầy đến đâu. Dùng <progress> để cho biết một công việc đã đi được bao xa. Luôn in con số bên cạnh thanh. Một cái thanh trơ trọi chẳng nói gì với người không nhìn thấy nó.
<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>Hãy hiển thị kích thước đã làm tròn như 4 MB, và đặt số byte chính xác vào thẻ <data>. Trình đọc màn hình đọc phần hiển thị và bỏ qua thẻ, nên con số đã làm tròn phải tự nó đủ dùng.
<section rst-box>
<dl rst-detail>
<dt>Export</dt>
<dd><data value="4194304">4 MB</data></dd>
</dl>
</section>Đừng tách nhóm những thứ này. Đơn hàng 4471, không phải đơn hàng 4,471. Năm, số phiên bản và số cổng cũng vậy. Dùng rst-mono để chúng trông như mã, và đừng bao giờ đặt chúng vào thẻ <time>, kể cả khi trông giống ngày tháng.
<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>Tên có thể ở bất kỳ ngôn ngữ nào, kể cả những ngôn ngữ đọc từ phải sang trái. Khi một cái tên nằm giữa dòng, hãy bọc nó trong <bdi>, nếu không nó sẽ làm xáo trộn các từ xung quanh. Dùng person để hiển thị tên kèm một ảnh bên cạnh.
<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>Thẻ <address> không dùng cho địa chỉ bưu chính. Nó dùng để cho biết ai đã viết trang này. Địa chỉ giao hàng là văn bản thường. Danh sách nhân sự là một danh sách.
<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>Thẻ <abbr> hiện cách viết đầy đủ khi bạn rê chuột. Điều đó không hoạt động trên điện thoại, và trình đọc màn hình thường bỏ qua. Lần đầu tiên, hãy viết đầy đủ các từ ra luôn.
<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>Khi trang của bạn cộng một thứ gì đó, hãy đặt kết quả vào thẻ <output>. Một tổng đang chạy, một mức giá đã quy đổi, một đồng hồ đếm ngược.
<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>