HTML-стилізація
rtSurvey підтримує HTML-теги в мітках та підказках, дозволяючи форматування тексту, посилання та динамічне кольорове оформлення.
rtSurvey відображає текст label та hint як HTML у веб-формах. Це означає, що ви можете використовувати стандартні HTML-теги для форматування тексту, додавання переносів рядків, створення посилань та застосування кольорів. Це особливо корисно для полів нотаток, інструкцій для розділів та динамічних підсумків.
HTML у мітках відображається у веб-формі та мобільних додатках rtSurvey. Він може не відображатися у всіх клієнтах, сумісних з ODK. Завжди тестуйте на цільовій платформі.
Підтримувані HTML-теги
Форматування тексту
| Тег | Результат |
|---|---|
<strong>text</strong> або <b>text</b> | Жирний текст |
<em>text</em> або <i>text</i> | Курсивний текст |
<u>text</u> | Підкреслений текст |
<br> | Перенос рядка |
<span style="...">text</span> | Вбудований стиль |
Посилання
<a href="https://example.com" target="_blank">Click here</a>
Кольори
<span style="color: red;">Warning: value is out of range</span>
<span style="color: #009688;">Section completed</span>
Змінні кольорової теми
rtSurvey підтримує токени кольорової теми, що адаптуються до налаштованої теми застосунку:
<span style="color: var(--color-theme-primary);">Primary color text</span>
Багатомовні мітки
Обгортайте вміст у мовні теги для підтримки кількох мов в одній комірці мітки:
<en>Enter the household size</en><vi>Nhập quy mô hộ gia đình</vi>
Приклади в полях нотаток
Інструкція для розділу з жирним шрифтом та переносом рядка
| type | name | label |
|---|---|---|
| note | section_intro | <strong>Section 3: Land Use</strong><br>Ask all questions in this section to the household head only. |
Попередження червоним кольором
| type | name | label | relevant |
|---|---|---|---|
| note | age_warning | <span style="color: red;"><strong>Warning:</strong> Age entered (${age}) is unusually high. Please verify.</span> | ${age} > 100 |
Спеціальні HTML-теги rtSurvey
<webbox src='url' title='title'>...</webbox>
Вбудовує кнопку, що відкриває URL в модальному вікні у формі. Дивіться Webbox для детальної інформації.
<delete-repeat-current>label</delete-repeat-current>
Відображає кнопку всередині групи повторів, що видаляє поточний екземпляр повтору при натисканні.
<delete-repeat-last>label</delete-repeat-last>
Відображає кнопку, що видаляє останній екземпляр повтору.
Найкращі практики
- Використовуйте HTML помірно — надто відформатовані мітки важче читати.
- Зберігайте використання кольорів значущим — червоний для попереджень, а не для декорації.
- Завжди тестуйте HTML-відображення як на мобільному додатку, так і у веб-формі.
- Уникайте тегів
<table>у мітках — вони рідко добре відображаються на мобільних екранах. - Не використовуйте JavaScript (
<script>) — він буде видалений або спричинить помилки.
Обмеження
- Деякі старші мобільні клієнти можуть відображати HTML-теги як буквальний текст.
- Посилання
<a>відкриваються у браузері або WebView — анкетер залишає форму.