При разработке интерфейсов в 1С часто возникает задача органичного встраивания HTML-контента в формы приложения. Одной из наиболее острых проблем является визуальное несовпадение текста: когда шрифт с размером 8 в 1С выглядит значительно крупнее или мельче, чем текст с аналогичным параметром font-size: 8pt или 8px в поле HTML. В этой статье мы подробно разберем физику процесса, проанализируем математические модели пересчета и выясним, как добиться визуального единообразия.
Для начала проанализируем, в чем именно измеряет шрифт платформа 1С. В свойствах шрифта (объект Шрифт) числовое значение (например, 8) — это не пиксели, а типографские пункты (кегли). Согласно международным стандартам:
В веб-технологиях ситуация сложнее. Рассмотрим спецификацию CSS. Единица px (пиксель) в вебе является "логической" единицей. На современных экранах с высокой плотностью пикселей (HiDPI/Retina) один логический пиксель может состоять из нескольких физических пикселей матрицы. При этом единица pt в CSS также жестко зафиксирована относительно пикселей: 1pt = 1.333px. Это соотношение базируется на классическом разрешении Windows — 96 DPI (96 точек на дюйм / 72 пункта = 1.333).
Проблема заключается в том, что 1С при отрисовке нативных элементов (кнопок, надписей) обращается к системным настройкам Windows (GDI/DirectWrite), которые учитывают текущий масштаб экрана (DPI), а поле HTML использует движок браузера, который может интерпретировать эти значения иначе.
Разберем ситуацию, почему 8pt в 1С и 8pt в HTML на одном мониторе могут выглядеть по-разному. Выясним причину: 1С запрашивает у операционной системы отрисовку шрифта, исходя из реального системного DPI. Если у пользователя установлен масштаб 125% (120 DPI), 1С пересчитает размер следующим образом:
Формула для 1С: Размер в пикселях = Пункты * (Системный DPI / 72)
Проанализируем пример для шрифта размером 8 при разном масштабе системы:
В то же время, внутри поля HTML (особенно если это современный движок WebKit/Chromium в последних версиях платформы 8.3), фиксированное указание font-size: 8pt может быть принудительно приведено к 10.66px (8 * 1.333), игнорируя системный коэффициент масштабирования, если он уже применен к самому контейнеру поля HTML.
Чтобы добиться максимального сходства, мы рекомендуем использовать пиксели в CSS, предварительно вычислив их на стороне 1С. Рассмотрим, как программно задать стиль для HTML-текста, чтобы он соответствовал стандартному шрифту 1С.
Если мы берем за основу стандартный шрифт 1С (обычно это Arial или MS Shell Dlg размером 8), то для стандартного монитора (96 DPI) наиболее близким значением в CSS будет 11px. Однако, чтобы решение было универсальным, рассмотрим пример формирования строки HTML:
ТекстСтиля = "
|body {
| font-family: Arial, sans-serif;
| font-size: 11px;
| margin: 0;
| padding: 5px;
| -webkit-font-smoothing: none;
|}";
HTMLТекст = "<html><head><style>" + ТекстСтиля + "</style></head>
|<body>Ваш текст, который будет похож на шрифт 1С</body></html>";
Обратите внимание на свойство -webkit-font-smoothing: none;. Оно крайне важно, так как браузеры по умолчанию используют агрессивное сглаживание (антиалиасинг), которое делает шрифт визуально "толще" или "размытее", чем в нативном интерфейсе 1С. Отключение сглаживания приближает отрисовку к классическому виду GDI.
Существует еще один профессиональный подход — использование системных идентификаторов шрифтов в CSS. Вместо указания конкретного размера, мы можем заставить браузер использовать настройки операционной системы для интерфейсных элементов. Рассмотрим следующий CSS:
.system-font {
font: message-box;
}
Значение message-box указывает браузеру использовать шрифт и размер, которые установлены в Windows для диалоговых окон. Поскольку 1С также ориентируется на эти настройки, это зачастую дает самое точное попадание "пиксель в пиксель".
Разберем еще одну важную ситуацию: пользователь внутри 1С нажимает Ctrl + Колесо мыши, изменяя масштаб всей формы. К сожалению, содержимое объекта ПолеHTMLДокумента не всегда автоматически и корректно масштабируется вместе с элементами формы 1С.
Проанализируем решение этой проблемы. Чтобы шрифт в HTML менялся синхронно с формой, можно использовать свойство zoom или CSS-трансформацию. Если вы знаете текущий коэффициент масштабирования (его можно получить через настройки платформы или вычислить), примените его к родительскому элементу в HTML:
// Пример динамической подстановки масштаба в код HTML
ТекущийМасштаб = 1.25; // Например, 125%
ТекстМасштаба = "body { zoom: " + Формат(ТекущийМасштаб, "ЧГ=0") + "; }";
Однако помните, что свойство zoom является нестандартным, хотя и поддерживается большинством движков, используемых в 1С. Более современным способом будет transform: scale(1.25); transform-origin: 0 0;.
Подводя итог нашему анализу, выделим пошаговый алгоритм для разработчика:
font-family явно (например, Arial), так как стандартный serif в браузере — это обычно Times New Roman, который сильно отличается по ширине знаков от интерфейсных шрифтов.-webkit-font-smoothing: none;.px в формируемую строку HTML.font: caption; или font: message-box; для автоматического подбора параметров под стиль ОС.Соблюдение этих правил позволит вам создавать бесшовные интерфейсы, где пользователь не будет замечать перехода между нативными полями ввода 1С и сложными визуализациями в формате HTML.