Large Single Character Emoji/Text Display

[Tyler_Depke]

1. What is the issue? Please be detailed.
I would like to use a single emoji to get a similar display for selects responses like the one @Aly_Blenkin posted regarding using icons shown below:

@Aly_Blenkin

Tip 2: Use icons to simplify options

• Use open source libraries to find a cohesive set of icons (more details below)
• Ensure the icons are large enough to recognize and understand
• Pick distinct icons so users can tell them apart
• Use icons with high color contrast and test in both light and dark modes

The example above looks awesome, but I would like to use Emojis to get a similar display INSTEAD of using icons. When I say similar display, I essentially mean having an emoji centered and filling the entire contents of a tile/box. Another option would be to let the user change the font size. In messaging Apps a single emoji will display quite large compared to normal text like the screenshot below:

Is there a way to get a single character Emoji/Text to become larger than normal text? If so, what is the biggest it can become? I thought changing the font size in the XLSForm would be preserved into ODK Collect, but I guess not.

2. What steps can we take to reproduce this issue?
See the attached form for examples.

3. What have you tried to fix the issue?
I have a form below with many select multiple questions with about a dozen responses with three sets of responses and changing appearances. Each response contains a single emoji in the label, or a header "#" and then the emoji. It seems as though changing the text size and the header doesn't do anything.

4. Upload any forms or screenshots you can share publicly below.
Random Tests.xlsx (187.1 KB)

XLSX File in Excel

ODK Collect Screenshots

[seadowg]

Changing the font size of text in Excel (or whatever XLS editor you’re using) will not have an effect on the form as far as I’m aware.

Using # is working here as far as I can see, but the font size increase you get with that isn’t that large. Here’s a header and then non-header emoji as a comparison:

You can format options using some basic CSS (https://docs.getodk.org/form-styling/#fonts-and-colors), but I don’t believe that font-size is supported in either Collect or Enketo/Web Forms however.

@Aly_Blenkin could you recommend a good icon pack for emojis here and add it to the linked form design tips? That should at least give you the same visuals, even if it’s less convenient for form design.

[ahblake]

Combined with # you could also change the project settings to increase the font size (Settings - User interface - text font size --> Extra large), but this will affect all text in the form - may be ok or not.

[Aly_Blenkin]

I haven’t used this icon pack for emojis myself, but it looks promising https://openmoji.org/library/. If others have suggestions please let me know and we will add it to our resources.