Вертикальное выравнивание текста SVG: центрирование восстановленной подписи

Для горизонтальной подписи SVG y задаёт положение выбранной базовой линии. Он не размещает верх букв в этой координате. Начните с dominant-baseline="middle", если располагаете короткую латинскую подпись относительно горизонтальной направляющей, и проверьте результат с реальным шрифтом. Используйте text-anchor="middle" для горизонтального центрирования текста вокруг его координаты x.

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

Выберите цель выравнивания

Одинаковое y="100" может дать разные положения букв:

Определения базовых линий W3C различают middle и central. Ни одно определение не обещает центрирования закрашенных контуров каждого слова. Таблицы базовых линий шрифта и эвристики рендерера тоже важны, как объясняет справочник MDN по dominant-baseline.

Для обычного горизонтального текста text-anchor="middle" отвечает за другую ось. Он выравнивает текстовый фрагмент вокруг заданного горизонтального положения; вертикального центрирования он не обеспечивает. См. справочник text-anchor о связи с текстовыми фрагментами.

Сравните эмблему и редактируемую подпись

Сохраните этот полный пример как baseline-example.svg и откройте в браузере. Кольцо — собственная геометрия; Agyp — тестовая строка с верхним и нижними выносными элементами. Красная линия отмечает y=100.

<svg xmlns="http://www.w3.org/2000/svg" width="840" height="400"
     viewBox="0 0 420 200">
  <path fill="#137f74" fill-rule="evenodd"
    d="M55 75A25 25 0 1 1 55 125A25 25 0 1 1 55 75
       M55 86A14 14 0 1 0 55 114A14 14 0 1 0 55 86"/>
  <path d="M20 100H400" fill="none" stroke="#c3594d"/>
  <text id="label" x="250" y="100" font-family="Arial, sans-serif"
        font-size="64" text-anchor="middle" dominant-baseline="middle"
        fill="#193e3a">Agyp</text>
</svg>

Измените только dominant-baseline на alphabetic, затем на central. Сохраните координаты, размер шрифта и текст. Затем сравните второй доступный шрифт. Изменение нескольких настроек одновременно мешает определить, какая из них сдвинула подпись.

Мы отрисовали все три значения с загруженными копиями Arial и Times New Roman. Каждая панель использует одинаковые координаты SVG и исходное кольцо. Зелёные прямоугольники показывают результат браузерного getBBox() для редактируемого текста.

Примеры alphabetic располагаются выше относительно центральной линии кольца. Примеры middle сдвигаются вниз, а central размещает сообщаемые рамки близко к направляющей. Измерения под каждым образцом относятся к этим файлам шрифтов и этой браузерной отрисовке. Это не смещения для копирования в другой дизайн.

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

Центрированная текстовая рамка всё ещё может выглядеть неровно

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

Это различие важно для подписей вроде Agyp: g, y и p опускаются ниже алфавитной базовой линии. Подпись из одних прописных букв имеет другое визуальное распределение. Во время выравнивания должны присутствовать нужный шрифт и реальный текст.

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

Для одной композиции эмблемы с текстом сравните подпись при конечном размере и скорректируйте её визуально после выбора базовой линии. Если макет специально требует выравнивания по контурам букв, используйте копию в контурах в редакторе для проверки геометрии, сохраняя редактируемый текст в основном оригинале. Считайте границы контуров и оптическую коррекцию отдельными решениями.

Центрируйте измеренную текстовую рамку SVG, если это ваша цель

Для простого однострочного элемента без преобразований <text> вычислите смещение от центра сообщаемой рамки до цели. Запустите это в документе с примером после готовности шрифта:

await document.fonts.ready;
 
const label = document.querySelector('#label');
const targetY = 100;
const originalY = label.y.baseVal.getItem(0).value;
const box = label.getBBox();
const shift = targetY - (box.y + box.height / 2);
 
label.setAttribute('y', String(originalY + shift));

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

document.fonts.ready ожидает загрузки шрифтов и связанной работы по размещению. Он не доказывает успешного получения нужного шрифта; также проверьте ресурс шрифта или информацию браузера об отображаемых шрифтах.

Этот фрагмент предполагает одно значение y, отсутствие посимвольных позиций, смещений dy и преобразованной группы текста. getBBox() возвращает локальную рамку SVG. Цель в другой системе координат требует сопоставления; используйте процесс проверки границ SVG, прежде чем смешивать экранные пиксели и единицы SVG.

Устраните конфликтующие настройки перед добавлением смещений

Проверьте текст и его родительские группы. Оставшийся dy, вложенный <tspan> или преобразование могут менять размещение, которое вы диагностируете. Удаляйте по одной подозрительной коррекции в копии и сравнивайте результат.

Проверьте также стили страницы. CSS может переопределить презентационный атрибут dominant-baseline. Если изменение атрибута визуально ничего не меняет, проверьте вычисленное значение перед добавлением второй коррекции.

alignment-baseline отвечает за выравнивание базовой линии элемента с соответствующей линией родителя. Это не общий синоним «центрировать эту подпись в SVG». Справочник MDN по alignment-baseline также отмечает ограничения браузерной поддержки. Для этой отдельной подписи сосредоточьте тест на dominant-baseline, затем проверьте реальное целевое приложение экспорта.

Этот пример рассматривает горизонтальный латинский текст в одном браузере. Изогнутым подписям нужна другая проверка размещения; пошаговое руководство по тексту вдоль контура SVG отделяет буквы от направляющей кривой. Другие письменности и вертикальное письмо требуют собственных решений о базовых линиях.

Храните знак отдельно от букв

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

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

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

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

Частые вопросы

dominant-baseline="middle" — то же самое, что central? Нет. Middle использует базовую линию, связанную с высотой строчной x, а central — центральную базовую линию шрифта, связанную с площадкой em. Их положения могут различаться, и ни одно не гарантирует оптического центрирования каждого слова.

text-anchor="middle" центрирует текст SVG по вертикали? Для обычного горизонтального текста text-anchor управляет горизонтальным размещением вокруг координаты x. Выберите вертикальную базовую линию отдельно через dominant-baseline, затем проверьте результат с нужным шрифтом.

Может ли getBBox точно центрировать видимые буквы? Он может центрировать текстовую рамку SVG, сообщаемую браузером. Границы текста могут включать пространство ячеек глифов за пределами нарисованных букв, поэтому расчёт не гарантирует оптического центрирования или плотного выравнивания контуров.

Источники

1. W3C — SVG baseline alignment — Определяет базовые линии alphabetic, middle и central.
2. MDN — dominant-baseline — Объясняет таблицы базовых линий, эвристики шрифтов и приоритет CSS.
3. MDN — text-anchor — Описывает привязку текстового фрагмента вокруг заданного положения.
4. W3C — SVG bounding boxes — Описывает модель ячеек глифов для границ текста.
5. MDN — FontFaceSet.ready — Определяет момент завершения загрузки шрифтов и размещения.
6. MDN — getBBox — Описывает локальные границы SVG и исключение преобразований.
7. MDN — alignment-baseline — Объясняет выравнивание по родительской базовой линии и ограничения браузерной поддержки.

Если восстановленному логотипу всё ещё нужна редактируемая эмблема, подготовьте вариант SVG с PerfectVector, проверьте восстановленные очертания, затем соедините его с редактируемыми буквами и проверьте выравнивание в конечном приложении.