日期、數字同名

點樣顯示日期、數字、金額、名同地址，同埋邊啲會俾人搞亂。

每個例子都真係用得，不過入面啲連結唔會帶你去邊度。

日期同時間

將日期放入 <time> 標籤，並附上一個電腦讀得到嘅寫法。顯示嘅日期就照你讀者習慣嘅樣去寫。rastrillo 唔會幫你格式化。

桌面手機 HTML

<section rst-box>
  <dl rst-detail>
    <dt>已發佈</dt>
    <dd>
      <time datetime="2026-08-02">2026年8月2日</time>
    </dd>
  </dl>
</section>

件事用咗幾耐

時間長度都係用 <time>。機器讀嘅寫法睇落有啲怪：PT2H30M 即係 2 個鐘 30 分鐘。

桌面手機 HTML

<section rst-box>
  <dl rst-detail>
    <dt>建置時間</dt>
    <dd>
      <time datetime="PT2H30M">2小時30分</time>
    </dd>
  </dl>
</section>

數字

長數字要分開，等人一眼睇得出：英文寫 54,173，德文寫 54.173，阿拉伯文寫 ٥٤٬١٧٣。唔好將長數字就咁一串咁顯示。喺表格入面用等寬嘅數字，咁啲欄先會對得齊。

桌面手機 HTML

<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` 顯示佢，佢會跟讀者嘅語言寫法去寫。貨幣永遠嚟自你嘅數據，唔會嚟自讀者。

桌面手機 HTML

<section rst-box>
  <dl rst-detail>
    <dt>EUR</dt>
    <dd>€1,284.50</dd>
    <dt>JPY</dt>
    <dd>¥1,285</dd>
    <dt>KWD</dt>
    <dd>KWD 1,284.500</dd>
  </dl>
</section>

百分比同進度條

想顯示樣嘢有幾滿就用 <meter>，想顯示件工作做到邊就用 <progress>。個數字一定要寫喺條 bar 旁邊。淨係一條 bar，對睇唔到嘅讀者嚟講咩都冇講到。

桌面手機 HTML

<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> 標籤。螢幕閱讀器讀嘅係螢幕上嘅嘢，會略過個標籤，所以個約數本身就要夠用。

桌面手機 HTML

<section rst-box>
  <dl rst-detail>
    <dt>匯出檔案</dt>
    <dd>
      <data value="4194304">4 MB</data>
    </dd>
  </dl>
</section>

參考編號同代碼

呢啲唔好分開。係訂單 4471，唔係訂單 4,471。年份、版本號同埠號都一樣。用 rst-mono 令佢哋睇落似代碼，而且永遠唔好放入 <time> 標籤，就算佢似日期都唔好。

桌面手機 HTML

<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。

桌面手機 HTML

<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> 標籤唔係用嚟寫郵寄地址。佢係用嚟講呢版係邊個寫。送貨地址就係普通文字。員工名單就係一個列表。

桌面手機 HTML

<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> 標籤喺你把滑鼠移上去嗰陣會顯示完整寫法。喺手機度冇用，螢幕閱讀器亦成日會略過。第一次出現嗰陣，都要將啲字完整咁寫出嚟。

桌面手機 HTML

<section rst-box>
  <p>呢度每一頁都符合《網頁內容無障礙指引》（<abbr title="網頁內容無障礙指引">WCAG</abbr>）2.2 嘅 AA 級。</p>
</section>

你個版計出嚟嘅數字

當你個版加埋一啲嘢，就將個答案放入 <output> 標籤。例如累計總數、換算完嘅價錢、倒數。

桌面手機 HTML

<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>