Многострочный текст и форматирование

В основе текстового вывода в Lottie лежат текстовые слои, экспортируемые из Adobe After Effects через Bodymovin. Каждый текстовый слой в итоговом JSON описывается набором параметров, которые определяют не только содержимое строки, но и способ её рендеринга, включая переносы, выравнивание, межстрочные интервалы и привязку к ограничивающей области.

Ключевая структура текстового слоя обычно находится в поле t:

{
  "ty": "tp",
  "t": {
    "d": {
      "k": [
        {
          "s": {
            "sz": [300, 100],
            "ps": [0, 0],
            "t": "Первая строка\nВторая строка"
          }
        }
      ]
    }
  }
}

Поле t.d.k[0].s.t содержит сам текст, где символ переноса строки кодируется как \n. Именно этот механизм является базовым способом формирования многострочного текста в Lottie.

Переносы строк и символ \n

Многострочность в Lottie не является результатом «умного» текстового движка в браузере. Это заранее заложенная структура из After Effects.

Основной способ задать перенос строки:

"Hello\nWorld"

При этом важно учитывать:

  • \n не интерпретируется как HTML
  • не поддерживаются <br> или аналогичные теги
  • перенос всегда фиксирован и определяется данными JSON
  • браузерный рендерер Lottie лишь воспроизводит уже рассчитанную структуру

Пример многострочного текста:

"t": "Lottie Web\nMultiline Text\nRendering"

Результат всегда будет разбит на строки строго по \n, без дополнительной логики переразбиения.

Ограничивающие области и автоперенос

В After Effects текст может быть двух типов:

  • Point Text (точечный текст)
  • Paragraph Text (текст в области)

Для многострочного форматирования принципиально важен второй тип.

В Lottie это отражается через свойства bounding box:

"sz": [400, 200]

Где:

  • sz[0] — ширина области
  • sz[1] — высота области

При использовании Paragraph Text переносы могут быть частично автоматическими ещё на этапе экспорта, но в Lottie Web:

  • автоматический reflow отсутствует
  • браузер не перерасчитывает строки
  • изменение контейнера не влияет на разбиение текста

Таким образом, многострочность всегда «запечена» в JSON.

Выравнивание текста и многострочные блоки

Lottie поддерживает параметры выравнивания, которые особенно важны для многострочных текстов.

Основные варианты:

  • левое выравнивание
  • центрирование
  • правое выравнивание

В JSON это может отражаться через параметры параграфа:

"j": 0

Где значение определяет alignment:

  • 0 — left
  • 1 — right
  • 2 — center

При многострочном тексте выравнивание применяется к каждой строке независимо, а не ко всему блоку как единому HTML-элементу.

Пример:

"t": "Line 1\nLine 2\nLine 3"

Каждая строка будет выровнена согласно параметру j, без дополнительной логики «блочного контейнера».

Межстрочные интервалы и типографика

Многострочный текст в Lottie зависит от параметра leading (межстрочный интервал), который наследуется из After Effects.

Он может быть представлен как часть стиля текста:

"lh": 48

или внутри текстового стиля:

  • lh — line height
  • ls — letter spacing (tracking)

Особенности:

  • Lottie Web не пересчитывает leading динамически
  • изменения масштаба не корректируют межстрочный интервал пропорционально
  • каждая строка позиционируется как отдельный текстовый сегмент

Это означает, что визуальная плотность многострочного блока всегда фиксирована.

Разбиение текста на строки на уровне JSON

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

"t": {
  "d": {
    "k": [
      {
        "s": {
          "t": "Line 1"
        }
      },
      {
        "s": {
          "t": "Line 2"
        }
      }
    ]
  }
}

В таких случаях:

  • каждая строка является отдельной сущностью
  • анимация может применяться к строкам независимо
  • трансформации (opacity, position) могут быть разнесены по keyframes

Это важно для сложных титров и кинетической типографики.

Особенности рендеринга в Lottie Web

Рендерер Lottie Web может работать в трёх режимах:

  • SVG
  • Canvas
  • HTML

Поведение многострочного текста различается.

SVG-рендеринг

  • текст рендерится через <text> и <tspan>
  • переносы строк часто преобразуются в отдельные <tspan>
  • лучшее качество типографики
  • ограничения при динамическом изменении DOM

Canvas-рендеринг

  • каждая строка отрисовывается вручную
  • текст превращается в пиксельный слой
  • возможны расхождения в метриках шрифтов

HTML-рендеринг

  • текст может использовать DOM-элементы
  • проще управлять масштабированием
  • но ограничена точность совпадения с After Effects

Проблемы многострочного текста при масштабировании

Одной из ключевых проблем Lottie является отсутствие полноценного reflow-механизма.

При изменении:

  • размера контейнера
  • масштабирования композиции
  • DPR устройства

происходит следующее:

  • строки не перерасчитываются
  • переносы остаются фиксированными
  • возможны обрезания текста

Типичный сценарий:

"Очень длинный заголовок\nв две строки"

При уменьшении ширины контейнера:

  • строка не переносится дальше
  • текст может выйти за границы bounding box

Встроенные ограничения текстового движка

Lottie Web не поддерживает:

  • автоматический перенос слов
  • CSS-like word-wrap
  • HTML форматирование
  • жирные/курсивные части внутри строки
  • динамическую перестройку строк

Всё многострочное поведение определяется только:

  • экспортом из After Effects
  • ручным использованием \n
  • структурой текстового слоя

Практика формирования многострочного текста в JSON

При ручной генерации или модификации JSON чаще всего используется явное кодирование строк:

{
  "t": "Заголовок\nПодзаголовок\nОписание"
}

Для более управляемого варианта применяются массивы строк (на уровне логики генерации):

[
  "Заголовок",
  "Подзаголовок",
  "Описание"
]

которые затем объединяются:

textArray.join("\n")

Динамическая подмена текста и многострочность

Lottie Web позволяет загружать анимации и изменять текстовые поля через API рендерера (в зависимости от реализации и версии):

  • обновление текста может требовать пересоздания анимации
  • изменения часто не триггерят перерасчёт композиции
  • многострочные значения должны передаваться сразу в финальном виде

Пример подхода:

const text = "Первая строка\nВторая строка\nТретья строка";

Передача без предварительного парсинга:

  • не требуется ручной split внутри Lottie
  • переносы должны быть уже сформированы

Ошибки при работе с многострочным текстом

На практике часто возникают типичные проблемы:

1. Потеря переносов

  • замена \n на пробел при сериализации JSON
  • неправильная экранизация строк

2. Сломанная типографика

  • несоответствие шрифта After Effects и web-font
  • разные метрики glyph’ов

3. Съезд строк

  • различия в SVG и Canvas рендере
  • округление координат

4. Обрезание текста

  • фиксированный bounding box
  • отсутствие адаптивной высоты

Поведение при разных шрифтах

Многострочный текст сильно зависит от шрифтовых метрик.

Если шрифт в браузере отличается от оригинального:

  • меняется высота строки
  • нарушается вертикальное выравнивание
  • строки могут налезать друг на друга

Lottie не включает полноценную систему font fallback синхронизации с After Effects, поэтому визуальная идентичность достигается только при точном совпадении шрифтов.

Итоговые особенности архитектуры многострочного текста

Многострочный текст в Lottie Web строится на трёх фундаментальных принципах:

  • фиксированные переносы через \n
  • отсутствие динамического перерасчёта текста
  • зависимость от экспортированной структуры After Effects

Эта модель делает рендеринг предсказуемым, но ограничивает гибкость при работе с адаптивными интерфейсами и динамическим контентом

Оглавление