Estilização HTML
O rtSurvey suporta tags HTML em rótulos e dicas, permitindo formatação de texto rico, links e temas de cores dinâmicos.
O rtSurvey renderiza o texto de label e hint como HTML nos formulários web. Isso significa que você pode usar tags HTML padrão para formatar texto, adicionar quebras de linha, criar links e aplicar cores. Isso é particularmente útil para campos de nota, instruções de seção e resumos dinâmicos.
O HTML em rótulos é renderizado no formulário web e nos aplicativos móveis rtSurvey. Pode não ser renderizado em todos os clientes compatíveis com ODK. Sempre teste na sua plataforma de destino.
Tags HTML suportadas
Formatação de texto
| Tag | Resultado |
|---|---|
<strong>texto</strong> ou <b>texto</b> | Texto em negrito |
<em>texto</em> ou <i>texto</i> | Texto em itálico |
<u>texto</u> | Texto sublinhado |
<br> | Quebra de linha |
<span style="...">texto</span> | Estilização inline |
Links
<a href="https://exemplo.com" target="_blank">Clique aqui</a>
Abre em uma nova aba. Use para documentos de referência, diretrizes ou recursos externos que o entrevistador deve consultar.
Cores
Use <span> com estilos inline:
<span style="color: red;">Atenção: o valor está fora do intervalo</span>
<span style="color: #009688;">Seção concluída</span>
Variáveis de tema de cores
O rtSurvey suporta tokens de tema de cores que se adaptam ao tema configurado do aplicativo. Use a sintaxe __COLOR_THEME_NAME__:
<span style="color: var(--color-theme-primary);">Texto na cor primária</span>
Ou usando o atalho de token no texto do rótulo:
<font color="var(--COLOR_THEME_PRIMARY)">Nota importante</font>
Isso é automaticamente convertido para o <span> equivalente com uma variável CSS no momento da renderização.
Rótulos em múltiplos idiomas
Envolva o conteúdo em tags de idioma para suportar múltiplos idiomas em uma única célula de rótulo:
<en>Enter the household size</en><vi>Nhập quy mô hộ gia đình</vi>
O rtSurvey extrai o conteúdo correspondente ao idioma atual do aplicativo. Se nenhuma tag de idioma correspondente for encontrada, a string completa é exibida como está.
Exemplos em campos de nota
Instrução de seção com negrito e quebra de linha
| type | name | label |
|---|---|---|
| note | section_intro | <strong>Seção 3: Uso da Terra</strong><br>Faça todas as perguntas desta seção apenas ao chefe do domicílio. |
Resumo dinâmico com referência de cálculo
| type | name | label |
|---|---|---|
| calculate | total | |
| note | summary | Total de membros do domicílio: <strong>${total}</strong><br><span style="color: gray;">Adultos: ${adults} · Crianças: ${children}</span> |
Aviso em vermelho
| type | name | label | relevant |
|---|---|---|---|
| note | age_warning | <span style="color: red;"><strong>Atenção:</strong> Idade inserida (${age}) é incomumente alta. Por favor, verifique.</span> | ${age} > 100 |
Link para um documento de referência
| type | name | label |
|---|---|---|
| note | guidelines_link | Consulte as <a href="https://docs.example.com/guidelines" target="_blank">Diretrizes de Campo</a> antes de iniciar esta seção. |
Tags HTML especiais do rtSurvey
<webbox src='url' title='título'>...</webbox>
Incorpora um botão que abre uma URL em um modal dentro do formulário. Veja Webbox para detalhes completos.
<delete-repeat-current>rótulo</delete-repeat-current>
Renderiza um botão dentro de um grupo de repetição que exclui a instância de repetição atual quando tocado.
<delete-repeat-last>rótulo</delete-repeat-last>
Renderiza um botão que exclui a última instância de repetição.
Exemplo de uso em um grupo de repetição:
| type | name | label |
|---|---|---|
| note | delete_btn | <delete-repeat-current>Remover este membro</delete-repeat-current> |
Práticas recomendadas
- Use HTML com moderação — rótulos excessivamente formatados são mais difíceis de ler, não mais fáceis.
- Prefira
<strong>para negrito e<em>para itálico em vez de<b>e<i>depreciados. - Mantenha o uso de cores significativo — use vermelho para avisos, não para decoração.
- Sempre teste a renderização HTML tanto no aplicativo móvel quanto no formulário web, pois a renderização pode diferir ligeiramente.
- Evite tags
<table>dentro de rótulos — elas raramente são renderizadas bem em telas de dispositivos móveis. - Não use JavaScript (
<script>) — ele será removido ou causará erros.
Limitações
- HTML complexo (tabelas, formulários, scripts) não é suportado e pode quebrar a renderização.
- Alguns clientes móveis mais antigos podem exibir tags HTML como texto literal — teste em todos os dispositivos de destino.
- Links
<a>abrem em um navegador ou WebView — o entrevistador sai do formulário, o que pode ser disruptivo no celular.