Large Single Character Emoji/Text Display

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:

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



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.

1 Like

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.

1 Like

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.

@ahblake, have you used SVGs for response images (IE in the image column of a choice list for selects) or just in the image-map field? If so, I'm just wondering if there is anything you can do to control the SVG display size.

I found this: https://github.com/twitter/twemoji/tree/master/assets/svg which looks like it is no longer being supported but there, are a boat load of SVGs of Emojis.

No, I haven't used SVGs against choices for image.

I did try SVGs as big-image but because "everything" under big-image is opened with the same system designated app, and there is no single app that is good at opening jpg/png/pdf/svg, this isn't workable. (If Collect could use different apps for different filetypes under the big-image action, that would be really interesting as device gallery could be used for rasters, Acrobat or similar for PDFs, and ... something... for SVGs (I also didn't find a great SVG viewer).)

I suppose an SVG emoji as a choice would be more lightweight than a PNG, but still heavier than just using device font and a unicode emoji ref that showed up as an XXL choice label.