При разработке интерфейсов в 1С с использованием поля HTML документа программисты часто сталкиваются с неприятной особенностью: на разных компьютерах содержимое отображается с разным масштабом. Особенно остро эта проблема проявляется при попытке вывести сложную графику, например, схемы в формате SVG, экспортированные из Microsoft Visio или других редакторов. Причина кроется в том, что движок рендеринга (часто это Internet Explorer в версиях платформы до 8.3.14) ориентируется на системные настройки масштабирования Windows (DPI), которые у каждого пользователя могут быть своими.
В этой статье мы подробно разберем, как привести отображение страницы к единому стандарту, избавиться от лишних полос прокрутки и заставить SVG-схему корректно вписываться в границы элемента формы. Мы проанализируем технические нюансы работы с контейнерами и рассмотрим несколько способов управления визуальным представлением данных.
Рассмотрим типичную ситуацию: у нас есть SVG-код, полученный в результате экспорта. В таком коде часто жестко прописаны размеры в физических единицах измерения, например, в дюймах (in) или пунктах (pt). Проанализируем пример кода, с которым возникла проблема:
<svg xmlns="http://www.w3.org/2000/svg"
width="11.6929in" height="8.26772in"
viewBox="0 0 841.89 595.276">
...
</svg>
Когда 1С открывает такой документ, браузерный движок пересчитывает width="11.6929in" в пиксели в зависимости от текущего экранного разрешения и DPI. Если у одного пользователя стоит масштаб 100%, а у другого 150%, картинка будет выглядеть совершенно по-разному. Наша задача — абстрагироваться от физических размеров и заставить графику подстраиваться под размер ПоляHTMLДокумента.
Как показывает практика обсуждений на форумах, иногда самым простым и быстрым решением оказывается использование тега form. Это кажется странным, но в старых движках рендеринга наличие тега формы заставляет браузер пересчитать границы блочной модели. Разберем по шагам, как правильно подготовить текст для вывода в 1С:
body и form.Посмотрим на пример реализации:
ТекстHTML = "<html>
|<body style='margin:0; padding:0; overflow:hidden;'>
| <form id='svgForm' style='width:100%; height:100%;'>
| " + ИсходныйТекстSVG + "
| </form>
|</body>
|</html>";
Элементы.ПолеHTML.УстановитьТекст(ТекстHTML);
Этот метод часто "взлетает" сразу, однако он не является самым надежным, так как не решает проблему DPI в корне. Рассмотрим более профессиональные подходы.
Чтобы графика была по-настоящему адаптивной, нам необходимо изменить свойства самого тега <svg>. Самым важным атрибутом здесь является viewBox. Он определяет внутреннюю систему координат изображения. А вот жесткие значения width и height в дюймах лучше заменить на проценты или вовсе удалить.
Проанализируем, как должен выглядеть заголовок SVG для корректной работы:
<svg xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="0 0 841.89 595.276"
preserveAspectRatio="xMidYMid meet">
Что мы здесь сделали:
width="100%" и height="100%" — теперь изображение будет стремиться занять все доступное пространство контейнера в 1С.viewBox — это позволяет сохранять пропорции всех элементов внутри схемы при масштабировании.preserveAspectRatio="xMidYMid meet" — это гарантирует, что изображение будет масштабироваться равномерно, центрируясь внутри поля, без обрезки краев.Если нам нужно зафиксировать масштаб независимо от настроек Windows, мы можем прибегнуть к свойству zoom или transform в стилях CSS. Это особенно актуально для платформы 8.3.10 и выше, где используется встроенный браузер. Рассмотрим, как принудительно установить 100% масштаб в коде страницы:
<style>
body {
zoom: 100%; /* Устанавливаем базовый масштаб */
-ms-content-zooming: none; /* Отключаем пользовательское зумирование в IE-движке */
margin: 0;
padding: 0;
overflow: hidden; /* Убираем полосы прокрутки */
}
</style>
Если же мы хотим программно управлять масштабом из кода 1С (например, по нажатию кнопки на форме), мы можем использовать метод execScript для обращения к DOM документа:
// Пример для изменения масштаба из 1С
МасштабЗначение = "0.8"; // 80%
Элементы.ПолеHTML.Документ.parentWindow.execScript("document.body.style.zoom = '" + МасштабЗначение + "';", "javascript");
Часто ПолеHTMLДокумента работает в режиме эмуляции старых версий Internet Explorer (например, IE7), в которых поддержка SVG либо отсутствует, либо реализована с ошибками. Чтобы включить современный режим рендеринга (Edge mode), обязательно добавляйте в секцию <head> соответствующий мета-тег.
Разберем итоговую структуру идеального HTML-документа для вывода схем в 1С:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* Решаем проблему "длинной простыни" и прокрутки */
}
svg {
display: block; /* Убираем микро-отступы снизу */
}
</style>
</head>
<body>
<!-- Здесь размещается ваш SVG с width="100%" -->
</body>
</html>
Пользователи часто жалуются на появление боковой прокрутки, даже если изображение визуально помещается в поле. Выясним причину: по умолчанию тег body имеет свои внутренние отступы, а строчные элементы (к которым относится svg) добавляют небольшое пустое пространство под собой (дескрипторы шрифта).
Для решения этой проблемы мы применили два приема в коде выше:
margin и padding для html, body.overflow: hidden, что жестко обрезает любые попытки отрисовать скроллбары.svg блочным элементом через display: block.Для того чтобы ваша страница или схема всегда выглядела одинаково на всех компьютерах в 1С, придерживайтесь следующих правил. Во-первых, всегда оборачивайте "сырой" код (будь то SVG или фрагмент текста) в полноценный HTML-каркас с указанием режима IE=edge. Во-вторых, избавляйтесь от фиксированных размеров в дюймах или пикселях в заголовках изображений, заменяя их на относительные 100%. В-третьих, используйте CSS-свойство zoom, если хотите программно контролировать степень приближения объектов. Проанализировав эти подходы, вы сможете создавать стабильные и профессиональные интерфейсы на базе HTML внутри платформы 1С.