Text-transform и text-letter-spacing

Векторные стили в Mapbox GL JS используют слой типа symbol, в котором текстовые подписи формируются через набор layout-параметров. Среди них ключевую роль в визуальной унификации подписей играют свойства text-transform и text-letter-spacing, отвечающие за преобразование регистра и управление межбуквенным интервалом.

text-transform: управление регистром текста

Свойство text-transform определяет способ преобразования символов перед рендерингом. Оно применяется к результату вычисления text-field, независимо от исходных данных в источнике.

Возможные значения

  • none — текст отображается без изменений
  • uppercase — все символы приводятся к верхнему регистру
  • lowercase — все символы приводятся к нижнему регистру

Поведение в рендере

Трансформация выполняется на этапе подготовки текста к отрисовке в стиле. Это означает, что:

  • исходные данные GeoJSON или vector tile остаются неизменными
  • преобразование не влияет на source properties
  • результат зависит только от стиля слоя

При использовании выражений в text-field трансформация применяется к финальной строке после вычисления выражения.

Пример базовой настройки

map.addLayer({
  id: 'cities-labels',
  type: 'symbol',
  source: 'cities',
  layout: {
    'text-field': ['get', 'name'],
    'text-transform': 'uppercase'
  }
});

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

Взаимодействие с локализацией

При работе с многоязычными данными text-transform может приводить к нежелательным эффектам:

  • в языках без различия регистра (например, китайский, японский) свойство не оказывает влияния
  • в языках с диакритикой возможны визуальные искажения при uppercase
  • некоторые шрифты не поддерживают корректное преобразование символов

В Mapbox GL JS преобразование выполняется на уровне текстового представления, а не через замену символов в исходных данных, однако результат зависит от возможностей выбранного шрифта (text-font).

Использование с выражениями

text-transform может применяться совместно с layout-выражениями:

'text-field': [
  'concat',
  ['get', 'name_en'],
  ' / ',
  ['get', 'name_local']
],
'text-transform': 'uppercase'

В таком случае преобразуется уже объединённая строка.

Практические сценарии

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

text-letter-spacing: контроль межбуквенного интервала

Свойство text-letter-spacing задаёт расстояние между символами текста. Значение измеряется в единицах em, где 1 em соответствует размеру шрифта.

Формат значения

  • тип: число
  • допускаются отрицательные и положительные значения
  • значение по умолчанию: 0

Принцип работы

Межбуквенный интервал применяется после формирования текстовой строки и зависит от:

  • размера шрифта (text-size)
  • масштаба зума
  • выбранного шрифта
  • глобального стиля рендеринга символов

Увеличение значения приводит к разрежению текста, уменьшение — к уплотнению.

Пример увеличенного интервала

map.addLayer({
  id: 'road-labels',
  type: 'symbol',
  source: 'roads',
  layout: {
    'text-field': ['get', 'name'],
    'text-letter-spacing': 0.2,
    'text-size': 14
  }
});

Значение 0.2 создаёт заметное расширение расстояния между символами, что может использоваться для повышения читаемости на загруженных участках карты.

Отрицательные значения

Отрицательный text-letter-spacing используется для компактного размещения текста:

'text-letter-spacing': -0.05

Такой подход применяется в ситуациях, где:

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

Сильные отрицательные значения могут привести к наложению символов и ухудшению читаемости.

Зависимость от масштаба

text-letter-spacing поддерживает интерполяцию по зуму:

'text-letter-spacing': [
  'interpolate',
  ['linear'],
  ['zoom'],
  5, 0.05,
  10, 0.15,
  15, 0.3
]

Такой подход позволяет:

  • сохранять компактность на низких зумах
  • увеличивать разреженность при приближении
  • улучшать визуальную иерархию текста

Влияние на производительность рендеринга

Само по себе изменение межбуквенного интервала не является тяжёлой операцией, однако косвенно влияет на:

  • количество переносов и обрезок текста (text-max-width)
  • частоту перерисовки при анимации зума
  • плотность размещения подписей при collision detection

В слоях с высокой плотностью символов увеличение text-letter-spacing может снижать вероятность коллизий, поскольку увеличивает занимаемую ширину текста.

Совместное использование text-transform и text-letter-spacing

Комбинация этих свойств часто применяется для формирования строгих типографических систем в картографических стилях.

Типичный паттерн административных подписей

layout: {
  'text-field': ['get', 'admin_name'],
  'text-transform': 'uppercase',
  'text-letter-spacing': 0.1,
  'text-size': 12
}

Такое сочетание даёт:

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

Эффекты при плотной карте

В условиях высокой плотности объектов:

  • uppercase увеличивает визуальную «массу» текста
  • положительный letter-spacing снижает слипание символов
  • отрицательный letter-spacing повышает компактность, но увеличивает риск наложений

Баланс этих параметров напрямую влияет на эффективность label placement алгоритма Mapbox GL JS.

Ограничения и особенности реализации

Шрифтовая зависимость

Поведение обоих свойств зависит от:

  • наличия glyphs в загруженном шрифте
  • особенностей рендеринга SDF-шрифтов
  • поддержки Unicode диапазонов

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

Взаимодействие с text-fit и text-max-width

При использовании ограничения ширины:

  • увеличенный text-letter-spacing может ускорять перенос строк
  • uppercase изменяет длину строки, влияя на разбиение

Это особенно заметно при динамическом изменении зума.

Особенности collision detection

Алгоритм размещения подписей учитывает итоговую геометрию текста. Поэтому:

  • увеличение letter-spacing увеличивает bounding box
  • uppercase может изменять ширину строки (особенно в языках с разной формой символов)

Это влияет на приоритет размещения и вероятность скрытия подписей.

Практические комбинации для стилизации карт

Минималистичная типографика

'text-transform': 'uppercase',
'text-letter-spacing': 0.05

Используется для нейтральных картографических стилей с высокой читаемостью.

Плотная информационная карта

'text-transform': 'none',
'text-letter-spacing': -0.02

Подходит для перегруженных слоёв, где критична экономия пространства.

Декоративная стилизация

'text-transform': 'uppercase',
'text-letter-spacing': 0.25

Применяется для выразительных тематических слоёв и титульных подписей.

Поведение при масштабировании и перерисовке

При изменении zoom Mapbox GL JS пересчитывает:

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

text-letter-spacing масштабируется вместе с text-size, поскольку обе величины выражаются в относительных единицах.

Оглавление