Как реализовать динамический размер шрифта для разных частей числа на ценнике в 1С?

Программист 1С v8.3 (Управляемые формы) Торговля и дистрибуция
← На главную

При оформлении ценников в 1С часто возникает задача сделать их визуально привлекательными и информативными. Одной из популярных техник является выделение разных частей цены разным шрифтом: например, тысячи отображаются крупно, единицы — стандартным размером, а копейки — мелким шрифтом в верхней части строки (суперскрипт). В этой статье мы разберем по шагам несколько способов реализации этой задачи, от простых манипуляций с макетом до использования современной векторной графики.

Метод 1. Использование SVG-графики для формирования изображения цены

Этот метод является одним из наиболее гибких и современных. Начиная с версии платформы 8.3.15, 1С умеет работать с форматом SVG напрямую через объект Картинка. Нам не нужно сохранять временные файлы на диск — мы можем сформировать строку SVG в памяти и сразу передать её в макет.

Рассмотрим ситуацию: нам нужно вывести число, где рубли будут большими, а копейки — маленькими и смещенными вверх. Для этого мы будем использовать теги text и tspan. Тег tspan позволяет внутри одной строки текста задавать разные стили и смещения для отдельных сегментов.

Проанализируем пример кода для формирования такой картинки:


Функция СформироватьКартинкуЦеныSVG(Цена)
    // Разбиваем цену на целую часть и копейки
    ЦелаяЧасть = Цел(Цена);
    Копейки = Формат((Цена - ЦелаяЧасть) * 100, "ЧЦ=2; ЧВН=");
    
    // Определяем параметры шрифта
    РазмерРублей = 40;
    РазмерКопеек = 20;
    
    // Формируем SVG-строку
    ТекстSVG = 
    "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='60'>" +
    "  <text x='10' y='45' font-family='Arial' font-weight='bold' font-size='" + РазмерРублей + "' fill='black'>" +
         ЦелаяЧасть +
    "    <tspan font-size='" + РазмерКопеек + "' dy='-15'>" + Копейки + "</tspan>" +
    "  </text>" +
    "</svg>";
    
    ДвоичныеДанные = ПолучитьДвоичныеДанныеИзСтроки(ТекстSVG);
    Возврат Новый Картинка(ДвоичныеДанные);
КонецФункции

В данном коде атрибут dy='-15' отвечает за поднятие копеек вверх относительно базовой линии основного текста. Это позволяет добиться эффекта верхнего индекса без сложных вычислений координат. Полученную картинку можно вставить в область макета, где предварительно размещен объект типа "Рисунок".

Метод 2. Разделение ячейки макета на несколько колонок

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

Выясним преимущества этого метода:

  1. Простота настройки: визуальный редактор макета позволяет сразу видеть результат.
  2. Масштабируемость: шрифты в ячейках ведут себя предсказуемо при печати на разных принтерах.
  3. Отсутствие внешних зависимостей: не требуется поддержка SVG или HTML движков.

Для реализации этого метода в макете создаются три именованные ячейки, расположенные вплотную друг к другу (без рамок). Программно мы проверяем условие цены и устанавливаем соответствующие значения:


Если Цена >= 1000 Тогда
    Область.Параметры.Тысячи = Цел(Цена / 1000);
    Область.Параметры.Остаток = Формат(Цена % 1000, "ЧГ=0");
Иначе
    Область.Параметры.Тысячи = "";
    Область.Параметры.Остаток = Формат(Цена, "ЧГ=0");
КонецЕсли;

Важно помнить, что при таком подходе необходимо настроить выравнивание: для тысяч — по правому краю, для единиц — по левому, чтобы число выглядело единым целым.

Метод 3. Использование нескольких макетов

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

В коде это реализуется через выбор нужной области макета:


Если Цена < 1000 Тогда
    Область = Макет.ПолучитьОбласть("ЦенникСтандарт");
Иначе
    Область = Макет.ПолучитьОбласть("ЦенникКомпакт");
КонецЕсли;
Область.Параметры.Цена = Цена;
ТабДок.Вывести(Область);

Этот метод избавляет от необходимости динамически менять свойства шрифта Шрифт объекта ОбластьТабличногоДокумента, что иногда может приводить к искажению сетки макета.

Метод 4. Программное управление объектами "Рисунок"

Еще один интересный способ — использование прозрачных текстовых блоков поверх основной сетки макета. В табличном документе 1С можно создать объект типа РисунокТабличногоДокумента с типом ТипРисункаТабличногоДокумента.Текст.

Разберем по шагам, как это работает:

  1. В макете резервируется пустое место (несколько ячеек).
  2. Программно создаются два рисунка: один для рублей, другой для копеек.
  3. Для каждого рисунка устанавливается свой шрифт через свойство Шрифт.
  4. Рисунки позиционируются программно, что позволяет "прижать" копейки к верхнему углу основной цены.

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

Метод 5. Специализированные шрифты (нестандартный подход)

Существуют шрифты, разработанные специально для ритейла. В таких шрифтах символы цифр на определенных позициях (например, если использовать строчные буквы вместо прописных) уже имеют уменьшенный размер или подняты вверх. Посмотрим на пример: программист преобразует копейки в строку и заменяет символы "0-9" на специфические символы шрифта. В 1С это будет выглядеть как обычная строка, но на печати получится профессиональный ценник.

Заключение

Мы рассмотрели различные подходы к форматированию цен. Для современных конфигураций на управляемых формах наиболее рекомендуемым является Метод 1 (SVG), так как он обеспечивает высочайшую точность позиционирования и "дизайнерский" вид. Если же требуется быстрое решение без погружения в код графики, Метод 2 (Разбиение ячеек) остается самым надежным и проверенным временем инструментом разработчика 1С.

← На главную