HTML-оформление
rtSurvey поддерживает HTML-теги в метках и подсказках, позволяя форматировать текст, добавлять ссылки и применять динамические цветовые темы.
rtSurvey отображает текст в полях label и hint как HTML в веб-формах. Это означает, что можно использовать стандартные HTML-теги для форматирования текста, добавления переносов строк, создания ссылок и применения цветов. Это особенно полезно для полей note, инструкций к разделам и динамических сводок.
HTML в метках отображается в веб-форме и мобильных приложениях rtSurvey. Может не отображаться во всех ODK-совместимых клиентах. Всегда тестируйте на целевой платформе.
Поддерживаемые HTML-теги
Форматирование текста
| Тег | Результат |
|---|---|
<strong>текст</strong> или <b>текст</b> | Жирный текст |
<em>текст</em> или <i>текст</i> | Курсивный текст |
<u>текст</u> | Подчёркнутый текст |
<br> | Перенос строки |
<span style="...">текст</span> | Встроенный стиль |
Ссылки
<a href="https://example.com" target="_blank">Нажмите здесь</a>
Открывается в новой вкладке. Используйте для справочных документов, руководств или внешних ресурсов.
Цвета
Используйте <span> со встроенными стилями:
<span style="color: red;">Предупреждение: значение вне диапазона</span>
<span style="color: #009688;">Раздел завершён</span>
Переменные цветовой темы
rtSurvey поддерживает токены цветовой темы, адаптирующиеся к настроенной теме приложения. Используйте синтаксис __COLOR_THEME_NAME__:
<span style="color: var(--color-theme-primary);">Текст основного цвета</span>
Многоязычные метки
Заключайте содержимое в языковые теги для поддержки нескольких языков в одной ячейке метки:
<en>Enter the household size</en><vi>Nhập quy mô hộ gia đình</vi>
rtSurvey извлекает содержимое, соответствующее текущему языку приложения. Если совпадение не найдено, отображается вся строка.
Примеры в полях note
Инструкция к разделу с жирным шрифтом и переносом строки
| type | name | label |
|---|---|---|
| note | section_intro | <strong>Раздел 3: Использование земли</strong><br>Задайте все вопросы этого раздела только главе домохозяйства. |
Динамическая сводка со ссылкой на вычисление
| type | name | label |
|---|---|---|
| calculate | total | |
| note | summary | Всего членов домохозяйства: <strong>${total}</strong><br><span style="color: gray;">Взрослых: ${adults} · Детей: ${children}</span> |
Предупреждение красным цветом
| type | name | label | relevant |
|---|---|---|---|
| note | age_warning | <span style="color: red;"><strong>Предупреждение:</strong> Введённый возраст (${age}) необычно высок. Пожалуйста, уточните.</span> | ${age} > 100 |
Ссылка на справочный документ
| type | name | label |
|---|---|---|
| note | guidelines_link | Обратитесь к <a href="https://docs.example.com/guidelines" target="_blank">Полевым руководящим принципам</a> перед началом этого раздела. |
Специальные HTML-теги rtSurvey
<webbox src='url' title='title'>...</webbox>
Встраивает кнопку, открывающую URL во всплывающем модальном окне внутри формы. Подробности см. в разделе Webbox.
<delete-repeat-current>метка</delete-repeat-current>
Отображает кнопку внутри группы повторений, удаляющую текущий экземпляр повторения при нажатии.
<delete-repeat-last>метка</delete-repeat-last>
Отображает кнопку, удаляющую последний экземпляр повторения.
Пример использования в группе повторений:
| type | name | label |
|---|---|---|
| note | delete_btn | <delete-repeat-current>Удалить этого члена</delete-repeat-current> |
Лучшие практики
- Используйте HTML экономно — чрезмерное форматирование меток затрудняет чтение.
- Предпочитайте
<strong>для жирного и<em>для курсива вместо устаревших<b>и<i>. - Делайте использование цветов значимым — используйте красный для предупреждений, а не для украшения.
- Всегда тестируйте отображение HTML на мобильном приложении и веб-форме, так как рендеринг может незначительно отличаться.
- Избегайте тегов
<table>внутри меток — они редко хорошо отображаются на мобильных экранах. - Не используйте JavaScript (
<script>) — он будет удалён или вызовет ошибки.
Ограничения
- Сложный HTML (таблицы, формы, скрипты) не поддерживается и может нарушить отображение.
- Некоторые старые мобильные клиенты могут отображать HTML-теги как литеральный текст — тестируйте на всех целевых устройствах.
- Ссылки
<a>открываются в браузере или WebView — перечислитель покидает форму, что может быть неудобно на мобильных устройствах.