Superscripts and Subscripts

Dash Python
1

I am using dash to produce an app. I need to write a sentence or two explaining the app. I am using code like this

dcc.Markdown(dedent('''
## Plot of  Y_p vs. x_i, z_j shows blah blah blah
''')),

this produces the sentence shown, number of hashtags determine size of font

What I need to do is write subscripts and superscripts instead of for example x_i, I for it to output an actual subscript. Is this possible in the DC markdown? Is there another solution?

PS: I already tried 'x_i' , r'x_i' ,text/etc…

Any suggestions appreciated. I should mention that I was able to get subscripts and superscripts to work in html.Div() , by inserting html.Div([‘z’,html.Sub(‘j’)]), and I was able to get the subscripts to show in my actual plot by using text. These methods did not work in dcc.Markdown

2

Dash uses React Markdown to render the markdown: https://github.com/rexxars/react-markdown

It provides a live way to test your markdown: https://rexxars.github.io/react-markdown/

The Markdown spec itself does not provide subscript or superscript: https://spec.commonmark.org/0.28/

And so most Markdown implementations fallback to HTML tags when you need further formatting features, including React Markdown, on their live demo this works:

Plot of  Y<sub>p</sub> vs. x<sub>i</sub>, z<sub>j</sub> shows blah blah blah

But as you can see there are different HTML escaping procedures, it seems dcc.Markdown defaults to “escape” mode. Now it has an argument called dangerously_allow_html so I would assume this would work:

dcc.Markdown(
    dangerously_allow_html=True,
    children=dedent(
        '''
        Plot of  Y<sub>p</sub> vs. x<sub>i</sub>, z<sub>j</sub> shows blah blah blah
        '''
    )
)

But when I try it seems to use the “skip” html mode, not the “raw” html mode. So what I would say you have here is a bug in dcc.Markdown, I suggest you report it here with an example: https://github.com/plotly/dash-core-components/issues

It might be a regression from 0.39 to 0.40 as well, I would check the version of Dash you have. Later tonight I will check both versions.

1 Like
3

This solution worked perfectly. Thanks @Damian !

4

What version of Dash are you on?

5

I am on version Dash 0.38.0

1 Like
6

Okay! Looks like it broke between 0.39 and 0.40, I will report a bug later tonight!

Edit: Never-mind, I created 3 environments at home, 0.38, 0.39, and 0.40, and the only one it correctly works on for me it 0.40. So I’m very confused but as long as it works for you I’m glad!

8

Anyone has an explanation how to use superscript/subscript in 2024?

9

Dunno if it helps but if yo uadd annotation, for instance, adding yourtext around your text is enough

                        fig.add_annotation(
                            showarrow=False, font=dict(color="orange", size=10),
                            xref="paper", x=0.069, xanchor="left",
                            text="<sup>3</sup>"
                        )

You could also enable mathjax and use

text=r"$\text{}{\ddagger\ddagger}$", valign="middle"

For instance. Never tried with markdown, though

10

Here’s an example of using mathjax with dcc.Markdown:

Also, this might be helpful:

2 Likes