Paragraph и форматирование текста

Paragraph — это компонент библиотеки Carbon Components Svelte, предназначенный для отображения текста с соблюдением типографических стандартов системы Carbon Design. Он обеспечивает единообразие шрифтов, размеров, межстрочного интервала и цветовой схемы в приложении.

Основные свойства Paragraph

  • size — определяет размер текста. Допустимые значения: sm, md, lg.

    • sm — используется для вспомогательных или второстепенных текстов.
    • md — стандартный размер для основного текста.
    • lg — применяется для выделенных абзацев, заголовков или описаний.

  • color — задает цвет текста в соответствии с темами Carbon (text-primary, text-secondary, text-inverse).

  • as — позволяет рендерить абзац как другой HTML-элемент, например <p>, <div>, <span>. Это полезно для семантической разметки или интеграции с другими компонентами.

<script>
  import { Paragraph } from 'carbon-components-svelte';
</script>

<Paragraph size="md" color="text-primary">
  Это пример абзаца среднего размера с основным цветом текста.
</Paragraph>

Управление типографикой

Компонент Paragraph автоматически применяет следующие стили, соответствующие стандартам Carbon:

  • Межстрочный интервал (line-height): обеспечивает читаемость текста на всех устройствах.
  • Отступы между абзацами (margin-bottom): соблюдает визуальную иерархию и структурирование контента.
  • Шрифты и начертания: по умолчанию используется системный шрифт Carbon (IBM Plex Sans) с корректным набором весов (Regular, SemiBold, Bold).

Встроенное форматирование текста

Paragraph поддерживает базовое форматирование текста через HTML-разметку внутри компонента:

<Paragraph size="md">
  Текст может содержать <strong>жирное начертание</strong>, 
  <em>курсив</em> и <a href="#">ссылки</a> без нарушения типографики.
</Paragraph>
  • <strong> — выделение важного текста жирным шрифтом.
  • <em> — курсив для акцентов или цитат.
  • <a> — стандартные ссылки, наследующие стили текста и цветовую тему компонента.

Работа с длинными текстами и переносами

Paragraph корректно обрабатывает перенос строк и длинные тексты. Используются CSS-свойства:

  • word-wrap: break-word; — перенос слов при переполнении контейнера.
  • overflow-wrap: anywhere; — предотвращение горизонтального скролла.
  • white-space: pre-line; — поддержка переносов строк, заданных вручную в исходном коде.

Пример использования:

<Paragraph size="md">
  Длинный текст автоматически переносится, чтобы не выходить за пределы контейнера.
  Можно вставлять переносы
  вручную.
</Paragraph>

Адаптивное форматирование

Размер и отступы абзацев автоматически подстраиваются под размеры экрана при использовании Carbon Grid или Flex-сеток. Это обеспечивает консистентный вид текста на десктопах и мобильных устройствах.

<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--col-md-8">
      <Paragraph size="lg">Адаптивный абзац, который меняет ширину и отступы вместе с сеткой.</Paragraph>
    </div>
  </div>
</div>

Интеграция с темами

Paragraph полностью поддерживает темы Carbon (g100, g90, white), автоматически изменяя цвет текста в зависимости от выбранной темы. Например:

<Paragraph size="md" color="text-inverse">
  Текст для тёмной темы.
</Paragraph>
  • text-primary — основной текст для светлой темы.
  • text-secondary — вспомогательные подписи и пояснения.
  • text-inverse — текст для тёмной или контрастной темы.

Настройка через CSS-переменные

Все ключевые параметры Paragraph можно переопределять через CSS-переменные Carbon:

  • --cds-paragraph-font-size — размер шрифта.
  • --cds-paragraph-line-height — межстрочный интервал.
  • --cds-paragraph-margin-bottom — отступ снизу.
  • --cds-paragraph-color — цвет текста.

Пример переопределения стиля:

<style>
  :global(.custom-paragraph) {
    --cds-paragraph-font-size: 18px;
    --cds-paragraph-line-height: 1.6;
    --cds-paragraph-color: #0f62fe;
  }
</style>

<Paragraph class="custom-paragraph">Абзац с кастомными стилями через CSS-переменные.</Paragraph>

Важные рекомендации

  • Использовать Paragraph для основного текстового контента и кратких описаний.
  • Не злоупотреблять большими размерами шрифта — для крупных заголовков применяются компоненты Heading.
  • Для списков и таблиц использовать специализированные компоненты Carbon, а не абзацы с ручной разметкой.
  • Следить за семантикой — предпочтительно оставлять as="p" для абзацев текста, чтобы не нарушать доступность.

Paragraph является ключевым элементом типографической системы Carbon Components Svelte, обеспечивая консистентный, адаптивный и легко настраиваемый текстовый контент для любых интерфейсов.

Оглавление