Adding spaces in notes for KoboCollect App

I am trying to create a note, and have a very specific appearance needed which includes larges spaces between words. Are there any work arounds that work on the kobo collect app in which you can create larger spaces or change text/underscores to white so they are not invisible and it appears there is a larger space?

Thanks in advance!

Hi, @salomegass this is an interesting topic. I like the underscore workaround to the solution.

What happens if you try this:

<span style="color:#FFFFFF">_ _ _ _ _ _ _ _ _</span>

#FFFFFF being the HEX code for white
You can check reference on styling here - XLSForm Docs

I have just tested this in enketo and it works see below

image

TIP :bulb: Adding many underscores might not work as this might be taken for markdown format, so try spacing them.

1 Like

Thank you so much for your help!

I used the following code: Vaccinations _ _ _ _ _ 0 (birth) _ _ _ _ _ 1 (week 6) _ _ _ _ _ 2 (week 10) _ _ _ _ _ _ 3 (week 14)

On the web platform I get this:

However on the app only the first space is visible as shown below:

Do you have any ideas?

I also tried the same with my example on a mobile app and it produced the same issue. I noticed that the mobile app renders HTML differently from how the browser does it.

Another possible fix would be to use non-breaking spaces (&nbsp;) to create the spaces in between. So in my case it will look like so;

Full name <span style="color:#FFFFFF">_ _ _ _ _ _ _ _ _ _ _ _ </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;large space&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Something there&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;another

This worked on the collect-app.

PS: I don’t think this is the best way to do but it works :upside_down_face:

1 Like

Collect and Enketo handles HTML tags differently. ODK has a document with differences between Collect and Enketo

I had a similar issue using line breaks. Using <br /> works for collect, using 2 spaces and then 2 newlines works for enketo, but gives an extra newline in collect.

This is a screenshot of the content of the label cell of a note, I copied it to Notepad++ for easier editing and to show the non-printing characters. You can see 2 spaces after each variable, and then 2 CRLFs.
14c903ffa5e87b1bf953423bdf3304276693eae6

This is the screenshot of the note in enketo, showing correctly
6c7ed14fa0961be5f583a645938d0d4464403ae5

This is the screenshot of the note in collect, showing an extra empty line each time.
1b6a6b3c1450222c294d1a432db68d68fe7871c7

So basically, if you are going to use both Enketo and Collect, maybe create questions/notes with relevant condition to show based on the deviceid, to check if the form is used with Collect or Enketo.

2 Likes