При разработке чатов, интеграций с мессенджерами или систем оповещения в 1С программисты часто сталкиваются с неприятной особенностью: современные смайлики (эмодзи) отображаются в поле HTML-документа в виде пустых квадратов. Это происходит даже тогда, когда в обычных строковых полях или внешних браузерах те же самые символы выглядят корректно. Проблема кажется критичной, так как в современной коммуникации смайлы несут важную смысловую нагрузку.
В этой статье мы подробно разберем, почему возникают «квадраты», как движок отображения 1С взаимодействует с Unicode и какие конкретные шаги нужно предпринять, чтобы вернуть смайликам их нормальный вид. Мы рассмотрим решения на уровне HTML-разметки, CSS-стилей и программного кода на языке 1С.
Для начала проанализируем ситуацию с точки зрения архитектуры платформы. Поле HTML-документа в 1С — это не просто окно браузера, а встроенный компонент рендеринга. Долгое время в ОС Windows платформа использовала движок Internet Explorer (Trident), который по умолчанию работал в режиме совместимости со старыми версиями. Начиная с версии 8.3.14, 1С перешла на использование WebKit (начиная с 8.3.22 и выше — на движок на базе Chromium в некоторых режимах), однако проблемы с отображением символов высокой плоскости Unicode сохраняются.
Основная причина кроется в том, как 1С работает с кодировкой UTF-16. Большинство привычных нам символов (буквы, цифры) имеют коды до 65535. Современные эмодзи имеют гораздо более высокие порядковые номера (например, 128511 и выше). Платформа 1С не всегда может корректно интерпретировать такие символы как единое целое при передаче в объектную модель HTML-документа.
Первым делом нам необходимо убедиться, что движок HTML не пытается имитировать старый Internet Explorer 7. Хотя в новых версиях платформы используется WebKit, добавление метатега совместимости является «хорошим тоном» и помогает избежать проблем с отображением шрифтов.
Рассмотрим, как правильно сформировать заголовок HTML-текста. Обязательно добавим указание кодировки utf-8 и инструкции для совместимости. Проанализируем следующий пример формирования строки для поля HTML:
ТекстHTML =
"<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
</head>
<body>" + СообщениеКлиента + "</body>
</html>";
Использование meta charset='utf-8' критически важно, так как без этого браузер может неправильно интерпретировать байтовую последовательность эмодзи, превращая их в набор непонятных символов или квадратов.
Даже если движок понимает код символа, он может не найти для него соответствующую картинку (глиф) в стандартном шрифте (например, в Arial или Times New Roman). В операционной системе Windows за отображение цветных эмодзи отвечает специальный шрифт Segoe UI Emoji.
Разберем, как принудительно заставить поле HTML использовать нужный шрифт. Мы добавим блок стилей в наш HTML-текст. Это гарантирует, что система обратится к правильной библиотеке символов:
СтилиCSS = "
<style>
body {
font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
font-size: 14px;
}
</style>";
ТекстHTML = СтрЗаменить(ТекстHTML, "</head>", СтилиCSS + "</head>");
В этом примере мы указываем приоритетный порядок шрифтов. Если в системе есть Segoe UI Emoji (стандарт для Windows 10/11), он будет использован в первую очередь. Если его нет, система попробует Segoe UI Symbol или Noto Color Emoji.
Это самый сложный и технически глубокий момент. Внутренняя логика 1С работает с 16-битными символами. Поскольку коды эмодзи выходят за пределы 16 бит (больше 65535), они представляются в виде так называемых суррогатных пар — комбинации двух специальных 16-битных кодов.
Если вы пытаетесь программно собрать строку со смайлом, используя функцию Символ(), вам нельзя просто передать туда большой код. Проанализируем ситуацию: код смайлика «лицо в солнечных очках» — 128526. Если мы напишем Символ(128526), платформа может выдать ошибку или некорректный результат.
Вместо этого мы должны использовать два кода. Посмотрим на пример формирования такого символа:
// Формируем смайл через суррогатную пару
СмайлОчки = Символ(55357) + Символ(56846);
ТекстСообщения = "Привет! " + СмайлОчки;
Если данные приходят к вам из внешнего источника (например, через HTTP-запрос из Telegram или WhatsApp), они уже приходят в правильной кодировке. Однако при манипуляциях внутри 1С важно не «разрезать» эти пары и передавать их в HTML-поле как единую UTF-8 строку.
Если вышеперечисленные методы не помогают (например, если пользователи работают на старых версиях Windows 7, где шрифт Segoe UI Emoji отсутствует или ограничен), рассмотрим наиболее надежный кроссплатформенный способ — замену символов на графические изображения.
Существуют библиотеки, такие как Twemoji (от Twitter). Принцип их работы прост: скрипт сканирует текст внутри поля HTML, находит коды эмодзи и заменяет их на теги <img>, ведущие на красивые SVG или PNG картинки на сервере.
Разберем по шагам, как подключить такую библиотеку в ваше поле HTML-документа:
&head>.
ТекстHTML = "
<html>
<head>
<script src='https://twemoji.maxcdn.com/v/latest/twemoji.min.js' crossorigin='anonymous'></script>
</head>
<body onload='twemoji.parse(document.body)'>"
+ Сообщение +
"</body>
</html>";
Важный момент: Этот метод требует наличия интернет-соединения у клиента, чтобы браузер внутри 1С мог загрузить скрипт и картинки смайлов. Если работа ведется в закрытой сети, файлы библиотеки и картинки нужно будет разместить внутри вашей сети или внедрить их прямо в конфигурацию как макеты.
Проанализируем влияние версии платформы на решение задачи. В версии 8.3.17, которая упоминалась в обсуждении, движок WebKit уже присутствует, но он может иметь внутренние баги отрисовки. Если вы видите квадраты, которые исчезают при наведении мышки или изменении размера окна, это баг прорисовки графического контекста.
Рассмотрим рекомендации по обновлению:
Мы рассмотрели комплексный подход к решению проблемы отображения смайликов в 1С. Подведем итоги нашей совместной работы:
Следуя этим инструкциям, вы сможете превратить нечитаемые квадраты в полноценные эмодзи, сделав интерфейс вашей программы современным и удобным для пользователей.