Prose
Prose оформляет блок авторского текста, например вывод markdown или CMS, без класса на каждом элементе. Подключается классом .tk-prose или элементом tk-prose.
Getting paid
Payouts arrive within two business days. See payout settings.
- Bank transfer
- Card, with a 1% fee
<div class="tk-prose">
<h3>Getting paid</h3>
<p>Payouts arrive within <strong>two business days</strong>. See <a href="/payouts">payout settings</a>.</p>
<ul>
<li>Bank transfer</li>
<li>Card, with a 1% fee</li>
</ul>
</div>Класс или элемент
Shipping
Orders over $50 ship free. Use FREESHIP at checkout.
<tk-prose> <h3>Shipping</h3> <p>Orders over $50 ship free. Use <code>FREESHIP</code> at checkout.</p> </tk-prose>
- Класс
.tk-prose: для текста в DOM самой страницы, например вывода markdown. Библиотека сама добавляет стили на страницу, так что класс работает, как только загрузилсяthykes.js. - Элемент
<tk-prose>: когда стили страницы не должны влиять на текст, а стили Prose не должны выходить наружу. При подключении он переносит дочерние элементы в свой shadow root, поэтому задайте содержимое один раз и не перерисовывайте его потом из фреймворка.
Выглядят они одинаково: правила общие.
Что оформляется
| Элемент | Оформление |
|---|---|
h1 |
Title Large (32/40, 600) |
h2 |
Title Medium (28/32, 600) |
h3 |
Title Small (24/28, 600) |
h4 |
Heading Medium (20/24, 600) |
h5 |
Heading Small (18/24, 600) |
h6 |
16/24, 600 |
p |
Body Medium (16/24, 400) |
ul / ol |
круг, затем окружность, затем квадрат по мере вложенности; цифры для ol |
blockquote |
полоса 4px в начале строки и вспомогательный цвет текста |
code |
моноширинный шрифт на светлой плашке с тонкой рамкой |
kbd |
та же плашка без рамки |
mark |
выделение цветом предупреждения |
a |
вид |
strong / em |
полужирный / курсив |
hr, small, del, sub, sup |
тонкая линия, мелкий текст, зачёркивание, нижний и верхний индекс |
- Над заголовками отступ больше, чем под ними, а отступы соседних блоков схлопываются.
- Снаружи блок отступов не добавляет: у первого элемента нет верхнего отступа, у последнего — нижнего. Расстояние вокруг задаёте вы.
codeиkbdразличаются только тонкой рамкой. Если меняете вид одного, сохраните разницу.- Изображения, подписи к ним и списки определений (
dl) пока не оформляются.
Код и таблицы
npm install thykes| Plan | Price |
|---|---|
| Starter | $0 |
<div class="tk-prose">
<pre><code>npm install thykes</code></pre>
<table>
<tr><th>Plan</th><th>Price</th></tr>
<tr><td>Starter</td><td>$0</td></tr>
</table>
</div>preполучает моноширинный шрифт, светлую подложку и горизонтальную прокрутку. Для подсветки синтаксиса, номеров строк и копирования беритеCode block .tableполучает рамки, полужирную строку заголовков и горизонтальную прокрутку. Для сортировки и закреплённой шапки беритеTable .
Строчные пометки вне Prose
Set --font-family-mono, press Esc, and the matching row highlights.
<p>Set <code class="tk-code">--font-family-mono</code>, press <kbd class="tk-kbd">Esc</kbd>, and the <mark class="tk-mark">matching row</mark> highlights.</p>
.tk-code, .tk-kbd и .tk-mark дают отдельному фрагменту кода, клавише или выделению
вид из Prose в любом месте страницы.
- Ставьте класс на настоящий элемент:
<code>,<kbd>,<mark>. Класс только оформляет. - Они выглядят ровно как плашки в Prose и легко переопределяются.
- Для сочетания из нескольких клавиш берите
Kbd . Он называет клавиши-символы для скринридеров и меняет ⌘ на Ctrl в зависимости от платформы.
Когда использовать
- Prose — для текста, который вы не собираете поэлементно: статей, справки, заметок о выпуске, всего, что приходит из markdown.
- Для отдельных строк текста в интерфейсе берите
Text . - Не ставьте классы на элементы внутри Prose. Если блоку нужен свой вид, возьмите
компонент, например
Section message илиTable .
Можно / нельзя
| ✅ Можно | ❌ Нельзя |
|---|---|
| Обернуть блок текста один раз | Ставить класс на каждый элемент внутри |
.tk-prose для markdown |
Перерисовывать содержимое <tk-prose> после подключения |
| Заголовки по порядку | Ждать, что Prose исправит пропущенные уровни |
| Code block для кода с подсветкой | Ждать подсветки от простого pre |
| Компонент для выноски | Изображать выноску вручную оформленным текстом |
Связанные
Text : отдельная строка текста; те же типографские роли.Link : так выглядят ссылки в Prose.Kbd : сочетания из нескольких клавиш.Code block иTable : полные версииpreиtable.
API
Атрибутов, слотов и событий нет. Содержимое — дочерние элементы.
| Способ | Как |
|---|---|
класс .tk-prose |
<div class="tk-prose"> вокруг текста |
элемент <tk-prose> |
текст внутри <tk-prose> |
.tk-code, .tk-kbd, .tk-mark |
на отдельном <code>, <kbd> или <mark> |
CSS
::part(prose): контейнер внутри<tk-prose>, в котором лежит текст.
Токены
Заголовки и абзацы берут роли из space-*.
| Элемент | Токены |
|---|---|
| основной текст | text/default |
blockquote, маркеры списков |
text/secondary; полоса цитаты border/default |
code, kbd, pre |
surface/subtle; рамка у code и pre border/subtle |
mark |
surface/warning + text/default |
a |
text/accent, text/accent/hover; рамка фокуса border/accent/focus |
hr, рамки таблиц |
border/subtle; строка заголовков surface/subtle |
Значения по темам:
Доступность
Встроено:
- Prose только оформляет. Заголовки сохраняют уровни, списки остаются списками, ссылки —
ссылками. Внутри
<tk-prose>тоже. - Ссылки подчёркнуты, поэтому различимы не только по цвету, и показывают рамку фокуса.
- Цвета текста — читаемые роли;
markвыделяет фоном, а не цветом текста.
На вашей стороне:
- Стройте заголовки по порядку: один
h1на документ, без пропуска уровней. Prose это не исправит. - Используйте
<code>,<kbd>и<mark>по смыслу, а не ради вида.