HTML-stilsättning
rtSurvey stöder HTML-taggar i etiketter och tips, vilket möjliggör rik textformatering, länkar och dynamisk färgtemaläggning.
rtSurvey renderar etikett- och tips-text som HTML i webbformulär. Det innebär att du kan använda standard-HTML-taggar för att formatera text, lägga till radbrytningar, skapa länkar och tillämpa färger. Detta är särskilt användbart för notefält, sektionsinstruktioner och dynamiska sammanfattningar.
HTML i etiketter renderas i webbformuläret och rtSurvey-mobilappar. Det kanske inte renderas i alla ODK-kompatibla klienter. Testa alltid på din målplattform.
HTML-taggar som stöds
Textformatering
| Tagg | Resultat |
|---|---|
<strong>text</strong> eller <b>text</b> | Fetstil |
<em>text</em> eller <i>text</i> | Kursiv text |
<u>text</u> | Understruken text |
<br> | Radbrytning |
<span style="...">text</span> | Infogad stilsättning |
Länkar
<a href="https://example.com" target="_blank">Klicka här</a>
Öppnas i en ny flik. Använd för referensdokument, riktlinjer eller externa resurser som räknaren bör konsultera.
Färger
Använd <span> med infogade stilar:
<span style="color: red;">Varning: värde är utanför intervallet</span>
<span style="color: #009688;">Sektion slutförd</span>
Färgtemavariabler
rtSurvey stöder färgtemattokens som anpassar sig till appens konfigurerade tema. Använd syntaxen __COLOR_THEME_NAME__:
<span style="color: var(--color-theme-primary);">Text i primärfärg</span>
Eller med tokenförkortning i etikettext:
<font color="var(--COLOR_THEME_PRIMARY)">Viktig notering</font>
Detta konverteras automatiskt till motsvarande <span> med en CSS-variabel vid renderingstillfället.
Flerspråkiga etiketter
Omge innehåll i språktaggar för att stödja flera språk i en enda etiketcell:
<en>Enter the household size</en><vi>Nhập quy mô hộ gia đình</vi>
rtSurvey extraherar innehållet som matchar det aktuella appspråket. Om ingen matchande språktagg hittas visas hela strängen som den är.
Exempel i notefält
Sektionsinstruktion med fetstil och radbrytning
| type | name | label |
|---|---|---|
| note | section_intro | <strong>Sektion 3: Markanvändning</strong><br>Ställ alla frågor i den här sektionen enbart till hushållschefen. |
Dynamisk sammanfattning med beräkningsreferens
| type | name | label |
|---|---|---|
| calculate | total | |
| note | summary | Totalt antal hushållsmedlemmar: <strong>${total}</strong><br><span style="color: gray;">Vuxna: ${adults} · Barn: ${children}</span> |
Varning i rött
| type | name | label | relevant |
|---|---|---|---|
| note | age_warning | <span style="color: red;"><strong>Varning:</strong> Angiven ålder (${age}) är ovanligt hög. Vänligen verifiera.</span> | ${age} > 100 |
Länk till ett referensdokument
| type | name | label |
|---|---|---|
| note | guidelines_link | Se <a href="https://docs.example.com/guidelines" target="_blank">Fältriktlinjerna</a> innan du börjar den här sektionen. |
Speciella rtSurvey HTML-taggar
<webbox src='url' title='title'>...</webbox>
Bäddar in en knapp som öppnar en URL i ett formulärmodalt fönster. Se Webbox för fullständiga detaljer.
<delete-repeat-current>etikett</delete-repeat-current>
Renderar en knapp inuti en upprepningsgrupp som tar bort den aktuella upprepningsinstansen när man trycker på den.
<delete-repeat-last>etikett</delete-repeat-last>
Renderar en knapp som tar bort den sista upprepningsinstansen.
Exempelanvändning i en upprepningsgrupp:
| type | name | label |
|---|---|---|
| note | delete_btn | <delete-repeat-current>Ta bort denna medlem</delete-repeat-current> |
Bästa praxis
- Använd HTML sparsamt — överdrivet formaterade etiketter är svårare att läsa, inte lättare.
- Föredra
<strong>för fetstil och<em>för kursiv framför de föråldrade<b>och<i>. - Håll färganvändningen meningsfull — använd rött för varningar, inte för dekoration.
- Testa alltid HTML-rendering i både mobilapp och webbformulär, eftersom rendering kan skilja sig något.
- Undvik
<table>-taggar inuti etiketter — de renderas sällan bra på mobilskärmar. - Använd inte JavaScript (
<script>) — det tas bort eller orsakar fel.
Begränsningar
- Komplex HTML (tabeller, formulär, skript) stöds inte och kan förstöra rendering.
- Vissa äldre mobilklienter kan visa HTML-taggar som bokstavlig text — testa på alla målenheter.
<a>-länkar öppnas i en webbläsare eller WebView — räknaren lämnar formuläret, vilket kan vara störande på mobil.