Different font sizes in the same question

[jventayol]

Hi!

I’m trying to highlight part of a question label by increasing the font size. I checked the documentation but ### method only works at the beginning of the label so all the label is affected.
I also tried with but it only works in web browser but it’s not working in KoboCollect.

This is how is seen on the browser:

And this is how is seen in KoboCollect:

And this is the XLSForm
aSvPk3aqodPMqZMBynPxZE (10).xlsx (9.0 KB)

Is there any way that the KoboCollect app is shown like the web browser?

Thanks in advance for the help

[Kal_Lam]

Welcome to the community, @jventayol! Pinging @Xiphware for a better response to your query on why the Collect Android App not supporting the same when Enketo supports.

[Xiphware]

The KoboCollect Android app and Enketo web client use a slightly different rendering engine to display labels, and so each may display some markup differently, or not at all! In this case, as you observe, Collect only applies header markdown to the entire (single) line of the label; so you cant, say, use it to vary the font size in different parts of the label:

Warning

If a Markdown header is used, the label or hint can only be one line of text. Line breaks in the XLSForm cell will break the header styling.

I note that you tried to use inline html to do it instead via a font-size style, which (apparantly) the Enketo renderer happily supports:

label = 'Introduce el peso de los núcleos <span style="font-size: 200%">${Diam_hilera},${Hilera}</span>'

Which, as you observed, Enketo will nicely display as

Unfortunately, the KoboCollect label renderer does not support or recognize this style; it only supports color and font-family. From collect/collect_app/src/main/java/org/odk/collect/android/utilities/HtmlUtils.java at master · kobotoolbox/collect · GitHub

        // throw away all styles except for color and font-family
        private String sanitizeAttributes(String attributes) {

            String stylesText = attributes.replaceAll("style=[\"'](.*?)[\"']", "$1");
            String[] styles = stylesText.trim().split(";");
            StringBuffer stylesOutput = new StringBuffer();

            for (String style : styles) {
                String[] stylesAttributes = style.trim().split(":");
                if (stylesAttributes[0].equals("color")) {
                    stylesOutput.append(" color=\"" + stylesAttributes[1] + "\"");
                }
                if (stylesAttributes[0].equals("font-family")) {
                    stylesOutput.append(" face=\"" + stylesAttributes[1] + "\"");
                }
            }

            return stylesOutput.toString();
        }

Other than perhaps recoloring and/or bolding the desired text to make it stand out better, I dont believe there is a way you can selectively increase font size (eg via a ### header markdown) of just a subset of the label in KoboCollect, without it being applied to the entire line.

[jventayol]

Hello @Xiphware

Thank you very much for your illustrative answer. It’s a pity it can’t be done in KoboCollet. I hope it will be implemented in the future.
I will try to find a combination of bolding/recoloring in order to highlight those parameters.

Thabk you again for your time

[Xiphware]

If this is something that you would like to see appear supported in KoboCollect someday, then I might suggest posting a feature request to the relevant ODK Forum; KoboCollect is a fork of ODK Collect, so it would be most likely need to be merged upstream first.

Perhaps something along the lines of requesting ODK Collect to support font-size HTML styling, as Enketo does. And give some examples and rationale, much as you have done here.