Обзор всего, что даёт дизайн-система. Тема: signal. Язык: Русский.
Как показывать даты, числа, деньги, имена и адреса — и какие из них путают друг с другом.
Поместите дату в тег <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 — это 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 МБ, а точное число байт кладите в тег <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>Тег <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>