Typography

В состав входят компоненты, реализующие типографическую систему. Они заменяют обычные HTML-теги, такие, как h1, h2, h3, h4, p, etc.

Установка шрифта​

Компоненты типографики используют фирменный шрифт SB Sans Text.

<html>
    <head>
        <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css" />
        <link
            rel="stylesheet"
            href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css"
        />
        <link
            rel="stylesheet"
            href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansTextMono.0.2.0.css"
        />
    </head>
</html>

Отступы​

По умолчанию типографика поддерживает стандартные отступы.

Переносы​

По умолчанию в типографике слова переносятся по слогам. Чтобы отключить данный функционал, необходимо установить свойство breakWord в значении false.

Пробелы​

По умолчанию в типографике если текст превышает ширину элемента, то слова будут переноситься по пробелам. Чтобы запретить перенос по пробелам, необходимо установить свойство noWrap в значении true.

Типографская обработка текста​

Компоненты типографики сами текст не обрабатывают. Чтобы включить правила, оберните нужный компонент в withTypograph:

  • прямые кавычки заменяются на «ёлочки» и вложенные „лапки“;
  • после коротких кириллических слов (1–2 буквы) ставится неразрывный пробел, чтобы предлоги не висели в конце строки;
  • длинное и среднее тире прижимается к предыдущему слову и не переносится на новую строку.

Обрабатывается только строка. Смешанные дети (текст <Link /> ещё) не меняются. URL на время обработки прячутся: схемы с :// (https://, http://, gigachat://), адреса www.* и голые домены вроде example.com, чтобы не портить кавычки в query-параметрах. Расширения файлов (node.js, file.ts) ссылками не считаются.

Live Editor
Result
Open in CodeSandbox

По умолчанию обёрнутый компонент берёт правила из модульного реестра: базовый набор плюс то, что добавили через addTypographRule. typograph={false} отключает обработку у конкретного инстанса. Массив на пропе — полный пайплайн только этого инстанса, реестр не читается.

Менять реестр нужно один раз на старте приложения — уже смонтированные инстансы сами не пересчитаются.

addTypographRule дописывает правило в конец текущего набора:

import { addTypographRule } from '@salutejs/plasma-giga';

// bootstrap приложения, не внутри компонента
addTypographRule((text) => text.replace(/\(c\)/gi, '©'));

После этого любой компонент с withTypograph подхватит новое правило:

const Text = withTypograph(TextM);

<Text>в лесу — "цитата" (c)</Text>

setTypographLocale выбирает готовый пресет по языку: en и en-* — без висячих предлогов, остальные — кириллический набор.

import { setTypographLocale } from '@salutejs/plasma-giga';

// bootstrap приложения, не внутри компонента
setTypographLocale(locale);

Текущую локаль можно прочитать через getTypographLocale. cyrillicTypographRules совпадает с defaultTypographRules.

setTypographRules полностью заменяет базовый набор и сбрасывает правила из addTypographRule. Если нужен свой пайплайн, а не пресет по языку:

import { setTypographRules, quotes, dash, defaultTypographRules } from '@salutejs/plasma-giga';

// bootstrap приложения, не внутри компонента
setTypographRules([quotes, dash]);

// вернуть дефолт
setTypographRules(defaultTypographRules);

afterShortWord в дефолтном наборе клеит только кириллицу: at home не меняется, в лесу — меняется.

Локальные правила для отдельного инстанса:

import { TextM, withTypograph, latinTypographRules } from '@salutejs/plasma-giga';

const Text = withTypograph(TextM);

<Text typograph={latinTypographRules}>in the woods — "hi"</Text>

Если строка режется на токены (стрим, markdown), typograph() каждый раз начинает кавычки с нуля. Прокидывайте глубину и последний символ куска через applyQuotes:

import { applyQuotes } from '@salutejs/plasma-giga';

let depth = 0;
let prev: string | undefined;
for (const token of tokens) {
    const next = applyQuotes(token, prev, depth);
    depth = next.depth;
    prev = next.prev;
    // next.text
}

quotes(text, prev?, depth?) по-прежнему возвращает строку. typograph() рассчитан на целую строку и состояние между кусками не прокидывает.

Чтобы снять типографику перед копированием (NBSP и ёлочки/лапки), есть detypograph:

import { typograph, detypograph } from '@salutejs/plasma-giga';

const pretty = typograph('он сказал "привет"');
navigator.clipboard.writeText(detypograph(pretty));

Тире не откатывается: дефис в — мы не конвертируем.

Та же функция typograph() доступна отдельно — например, для markdown-рендерера.

Смена тега​

Если при использовании компонентов необходимо сменить тег, то можно использовать свойство as:

Live Editor
Result
Open in CodeSandbox

Управление насыщенностью шрифта​

info

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

За это отвечают свойства: medium, bold, extraBold

Live Editor
Result
Open in CodeSandbox

Курсивное начертание текста​

Задается свойством isItalic.

Live Editor
Result
Open in CodeSandbox

Моноширинные числа (группа Numbers)​

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

<TextM isNumeric={true} />

Состав​

Hero unit​

Live Editor
Result
Open in CodeSandbox

Заголовки​

Live Editor
Result
Open in CodeSandbox

Интерфейсы​

Типографика для таких частей интерфейса, как button, label, подписи, и т.п.

Live Editor
Result
Open in CodeSandbox

Текст​

Типографические элементы для описаний к статьям, дополнительной информации и т.д.

Live Editor
Result
Open in CodeSandbox