Streamlit: st.markdown + HTML: some styling only applies to first block prior to 2+ breaklines.

[nthmost]

Summary

When styling a multiline string of text that contains 2 or more breaklines in a row for st.markdown, the <div style=”whatever”> only ends up applying to the block of text prior to the first double breakline.

Some style propagates all the way, e.g. changing the font color. Other styling, e.g. changing the font size, gets washed out and defaulted.

Steps to reproduce

Run a streamlit script similar to the following:

```import streamlit as st

document = open('/Users/nthmost/epilepsy_set.txt').read()

st.markdown(
f'

{document}

',
unsafe_allow_html=True)
```

The top section of the example file, epilepsy_set.txt, looks like this:

Expected behavior:

All text wrapped by the style tag should retain all desired font styling.

In the example, all nonlink text should all be green and a smaller size than default.

Actual behavior:

Only the top block of text before the first double-breakline retains all desired font styling.

In the example, all nonlink text is green, however only the top paragraph retains the small-size font.

Is this a regression?

No

Debug info

• Streamlit version: 0.49.0
• Python version: 2.7.17 / 3.7.4
• Using Conda? PipEnv? PyEnv? Pex? pipenv
• OS version: OSX
• Browser version: Chrome, Safari

Additional information

A user (mschmill) described this problem in the Streamlit forum here.

[nthmost]

Possible related: while displaying RTL language text, user reports that "text direction gets distorted if there are 2 new lines (\n) in the text."

https://discuss.streamlit.io/t/are-you-using-html-in-markdown-tell-us-why/96/44?u=nthmost

[mzeidhassan]

Hi @nthmost
Any update on this issue?

I have an app that outputs Arabic text. When I apply RTL style, it only shows the first paragraph in RTL, but the rest is LTR.
When there is English text within Arabic, the whole text is messed up. Please see screen shot attached.

Thanks!

[nthmost]

Hi @mzeidhassan,

Apologies for the delay in response, I am just coming back from vacation.

At the moment there are some issues with our current Markdown library that are difficult to work around; we will need either to choose a new JS markdown library to run with (a several-week undertaking to ensure quality), or to produce our own fork of the current library (which is no small decision, maintenance wise).

For now, you should be able to mitigate this problem by splitting up your input by breaklines into a list of strings, iterating over them so that you end up doing one st.write per line. For example:

full_text = "stuff\nwith\nbreaklines"
for line in full_text.split("\n"):
    st.write(line)

Let me know if this approach doesn't work for you and we'll see what we can do.

Good internationalization is important to us, and I'm sorry that the markdown processor we're using has such a deleterious effect on RTL languages in particular. Thanks for bearing with us!