日期和时间
把日期放进 <time> 标签，并附上一份计算机能读的写法。日期本身按你的读者习惯的样子写。rastrillo 不会替你格式化。
<section rst-box>
<dl rst-detail>
<dt>Published</dt>
<dd><time datetime="2026-08-02">2 August 2026</time></dd>
</dl>
</section>rastrillo 设计系统
设计系统所提供内容的总览。主题：signal。语言：简体中文。
日期、数字和名字
如何显示日期、数字、金额、名字和地址，以及哪些容易被搞混。
某件事花了多久
时长也用 <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>