Набор текста

Вы визуализируете уценку и получаете простой HTML без стилей: заголовки, абзацы, списки и таблицы. Таким образом, вы оформляете элементы один за другим: размеры шрифта, высоту строк, интервал.

Примечание. Утилита набора текста основана на shadcn/typeset и адаптирована для интеграции с платформой Reflex.

Вы делаете это для своего блога. Затем вы делаете это снова для документов. И снова о приложении чата. Каждый раз вы сталкиваетесь с одним и тем же: размером и интервалом.

Чтобы исправить это, мы создали buridan/typeset. Это один CSS-файл, который стилизует все внутри контейнера typeset. Файл находится в вашем проекте, поэтому при необходимости вы можете изменить его напрямую.

Набор текста — это всего лишь небольшой предустановленный класс. В вашем приложении может быть несколько наборов шрифтов для разных контекстов.

.typeset-docs {
  --typeset-font-body: var(--font-geist);
  --typeset-font-heading: var(--font-geist);
  --typeset-font-mono: var(--font-geist-mono);
  --typeset-size: 15px;
  --typeset-leading: 1.75;
  --typeset-flow: 1.25em;
}

Хотите построить свой набор визуально? Используйте buridan/typeset для создания собственных заголовков, абзацев, списков и таблиц, настройки размеров шрифта, высоты строк и интервалов, а также создания собственного набора текста.

Принципы

Мы много читаем о шрифтах: масштабных соотношениях, отслеживании, кернинге, оптическом размере, размере, интерлиньяже, пространстве над и под каждым элементом. Мы пытались разоблачить все это, но это было слишком много. Никто не хочет задавать дюжину переменных, чтобы уценка выглядела правильно.

Поэтому мы сели и сгруппировали все в три элемента управления: размер, интерлиньяж и поток. Все остальное, размеры заголовков, отступы списка, пробел под заголовком, пространство вокруг правила, вытекает из них. Три элемента управления. Мы назвали это ритмом.

Особенности

• Он помещается в контейнер. Поместите его в чат, и он будет следовать за меньшим шрифтом вокруг него. Поместите его в статью, и он увеличится вместе со страницей. На экранах меньшего размера он имеет небольшой выступ для удобства чтения.
• Используется ваша тема. Цвета, шрифты и радиус берутся из вашего приложения. Темный режим следует тем же токенам.
• Легко настраивать. Три значения управляют базовым размером, высотой строки и расстоянием между блоками. Измените их в пресете, и весь документ последует за этим.
• Хорошо работает с потоковой передачей. При появлении нового блока Typeset не заставляет предыдущие блоки менять поля, границы или стили.

Создание набора текста

Создайте свой набор в typeset builder. Выберите шрифты и ритм, а затем просмотрите их в документах, чатах, статьях и другом реальном контенте.

На панели вы найдете файл typeset.css, настройку шрифта для вашей платформы, предустановленный класс с вашим выбором и оболочку для добавления вашего контента.

Скопируйте typeset.css рядом с основным файлом CSS и импортируйте его вверху:

@import "./typeset.css";

Затем оберните визуализированную уценку typeset и предустановленным классом:

rx.el.div(
    # ... markdown content ...,
    class_name="typeset typeset-docs"
)

typeset включает стили. typeset-docs — это пресет, созданный вами в конструкторе.

Пользовательские наборы шрифтов

В файле содержатся настройки по умолчанию, поэтому вы можете использовать typeset отдельно. Большая часть ритма чтения исходит из трех значений:

.typeset {
  --typeset-font-body: inherit;
  --typeset-font-heading: var(--font-heading);
  --typeset-font-mono: var(--font-mono);

  --typeset-size: 1em; /* body font-size */
  --typeset-leading: 1.75; /* line-height */
  --typeset-flow: 1.25em; /* space between blocks */
}

• --typeset-size устанавливает базовый размер текста. 1em соответствует окружающему макету. На небольших экранах Typeset немного увеличивает его.
• --typeset-leading устанавливает расстояние между строками.
• --typeset-flow устанавливает пространство между блоками. Заголовки и другие элементы получают от него интервал.

Переменные шрифтов сообщают Typeset, какие семейства использовать. Оставьте их в покое, и они последуют за вашим приложением. Цвета и радиус также взяты из вашей темы.

Typeset не устанавливает максимальную ширину. Ваш макет владеет этим. Элемент управления Measure в конструкторе добавляет max-width в оболочку вместо того, чтобы скрывать его в таблице стилей.

Вы можете сохранить более одной предустановки в одном приложении. Вот более тесный для чата и более просторный для документов:

.typeset-chat {
  --typeset-flow: 1em;
  --typeset-leading: 1.6;
}

.typeset-docs {
  --typeset-size: 15px;
  --typeset-flow: 1.5em;
}

Для одноразового изменения пропустите предустановку и установите значение в контейнере:

rx.el.div(
  class_name="typeset [--typeset-flow:1.75em]"
)

Пользовательские темы

Предустановка может изменить все ощущение контента, а не только интервалы. Вы можете предоставить читателям режим чтения с засечками, режим компактного пользовательского интерфейса или любой другой стиль, соответствующий вашему продукту.

/* Reading: serif, larger type, roomy rhythm. */
.typeset-reading {
  --typeset-font-body: var(--font-lora);
  --typeset-font-heading: var(--font-lora);
  --typeset-size: 18px;
  --typeset-leading: 1.9;
  --typeset-flow: 2em;
}

/* Compact: sans, smaller type, tighter rhythm. */
.typeset-compact {
  --typeset-font-body: var(--font-geist);
  --typeset-font-heading: var(--font-geist);
  --typeset-size: 14px;
  --typeset-leading: 1.6;
  --typeset-flow: 1em;
}

Доступность и темный режим

Для читателей, которые предпочитают более крупный шрифт и больше места, создайте более просторный набор и выставьте его в качестве декорации:

.typeset-large {
  --typeset-size: 16px;
  --typeset-leading: 2;
  --typeset-flow: 2em;
}

Темный режим уже соответствует цветам вашей темы. Если текст кажется немного тугим на темной поверхности, вы можете ослабить интерлиньяж:

.dark .typeset {
  --typeset-leading: 1.9;
}

Адаптивная таблица

Столы остаются настоящими столами и упаковываются по размеру. Вместо этого, чтобы прокрутить широкий экран по горизонтали, оберните его typeset-scroll:

rx.el.div(
    rx.el.table(...),
    class_name="typeset-scroll"
)

Сделайте это в компоненте таблицы вашего рендерера или в небольшом плагине rehype. Это работает для любого широкого блока, а не только для таблиц.

Переопределения

Typeset находится на слое components и использует :where() для селекторов элементов. Утилиты Tailwind на элементе выигрывают без !important:

rx.el.div(
  rx.el.p(class_name="text-lg"),
  class_name="typeset typeset-docs"
)

Обычный CSS также может переопределить Typeset с помощью обычного селектора.

Отказ от участия

Чтобы исключить компонент из Typeset, добавьте not-typeset или data-not-typeset:

rx.el.div(
  rx.el.p("Styled prose"),
  card.root("Untouched component", class_name="not-typeset"),
  class_name="typeset"
)

Оба варианта охватывают компонент и все, что находится внутри него. Другой контейнер typeset внутри этого поддерева также остается отключенным.

Стриминг

Typeset написан так, что добавление нового блока не меняет стили блоков, уже находящихся на экране.

• Никаких дальновидных селекторов. :last-child, :has() и :empty исключены из правил макета, поскольку их совпадения могут меняться по мере добавления контента.
• Расстояние течет в одном направлении, используя только margin-block-start. Новый блок добавляет свое пространство. — Разделители таблиц располагаются в добавляемых ячейках, поэтому новая строка не изменяет стиль строки над ней.

Текст, который все еще передается в потоковом режиме, может нормально увеличиваться и переноситься. Typeset просто избегает рестайлинга блоков, которые были до него.

Уровень техники

Класс prose из @tailwindcss/typography превосходен в том, для чего он был создан: добавление красивых типографских значений по умолчанию к простому HTML, включая контент, отображаемый с помощью Markdown или CMS.

Typeset использует другой подход: размер с учетом контейнеров, токены тем приложений, предустановки для разных контекстов и стабильность потоковой передачи. Вот чем они отличаются:

Typeset заимствует две лучшие идеи из плагина: шаблон защиты :where() с нулевой специфичностью и класс escape-hatch (not-typeset, в духе not-prose).