Are you using HTML in Markdown? Tell us why!

The documentation still says “Also note that unsafe_allow_html is a temporary measure and may be removed from Streamlit at any time.”

Has this decision been made yet? I think it’s important to keep ‘allow_html’.

I would like to change text direction to right to left ‘RTL’. Does Streamlit markdown support something like that?

Thanks

Awesome! I was wondering if I am the only one using folium. I am wondering could you change the size of map box. Thanks a lot

Hi @Yang_Zhang ,

Check here:
https://python-visualization.github.io/folium/modules.html

You can pass width and height either as a pixel int or percentage string (default: ‘100%’).

1 Like

Thank you~

I have user texts in my data that may or may not contain line breaks, sometimes two in a row. It seems that the markdown processor does something strange when this happens. Only the first paragraph is enclosed in the HTML tags:

st.markdown(f'<div style="font-size: small">{document}</div>',unsafe_allow_html=True)

renders to

<div class="markdown-text-container stText" style="width: 698px;">
  <div style="font-size: small;">This is paragraph 1 text.</div>
  <p>This is paragraph 2 text.</p>
  <p>This is paragraph 3 text.</p>
</div>

All I really want is some way to have the text stand out, be word-wrapped, and respect line breaks in the original text. I wanted to use markdown blockquote but the prepending a “>” to the document only blockquotes the first paragraph. What’s the best way to do this?

1 Like

Created a whole issue on this topic - Using streamlit for an STT / TTS model demo?

I wonder if I should create a feature request?

I do, because of <sub>subscriptsts</sub>

1 Like

I’m curious what your application for directly specifying RTL would be. I’ve been able to create text in RTL languages using st.write without any special markup around them, relying on browser detection only.

If you mean you are trying to reverse an LTR language, I’m not sure there’s a solution for that even in HTML. :slight_smile:

Since this is a thread asking “what are you using HTML for”, I’m wondering how far you can get in Streamlit without using HTML for what you are doing @mzeidhassan.

1 Like

Hey @arminp,

As a workaround for file download support, here’s a Gist that demonstrates patching Streamlit to allow static file downloads: https://gist.github.com/tconkling/1e5ead87c796a82de7fa71fcc4a74777.

Hi @mschmill – I’ve reproduced your bug and filed it on GitHub. I agree that this is unwanted/unexpected behavior!

1 Like

I work a lot with geo-annotated data so I render a LOT of maps.
deck_gl_chart on streamlit is nice but it’s still extremely limited so I’m still using folium, an awesome mapping library.
I’m able to embed folium maps on streamlit using

m = folium.Map(location=[45.5236, -122.6750])
st.write(m._repr_html_(), unsafe_allow_html=True)
3 Likes

Is it possible to inject Javascrpit into streamlit? I was trying to add google analytic to track the traffic but seems it does not work with unsafe_html_allow=True

Hi,

I’m using streamlit right now to replace a complex react app (that might be potentially unsafe ;-)).

I think having a very close look at what people want to do with html markdown would be a great driver for key features.

For now I use it to integrate various media objects into the context of dataframes - clickable images (i would love to trigger python though…), videos, links (that then run into triggering other services/processes). Also freely formatting tables is just great (I can turn a dataframe with a couple of string merges into something that does not resemble a table but portrays data in a meaningful way to the user).

I would certainly miss the feature for flexibility and this thread is a great case of how that opening enables creativity / possibility.

1 Like

Thank you @nthmost for your useful feedback and follow-up. I appreciate it. I will give it a try.

I managed to get something similar working, but I noticed that the text direction gets distorted if there are 2 new lines (\n) in the text. Not sure why though. I will try your tip and see.

As you said, Arabic and its bidirectionality is not easy, and without HTML support, it will be extermely difficult. I am happy to see that it’s now on Steamlit’s road map. So, I hope it will be available soon.

RTL native support doesn’t only include text direction. For example, the whole layout should be a mirrored version of English. So, for example, the left side panel should be on the right. Checkboxes, SelectBoxes, bullets, etc. should also be on the right side, not on the left side.

A native RTL support in Streamlit would be great indeed to support languages such as Arabic, Farsi, Urdu, and Hebrew.

1 Like

I would like to inject javascript scripts in order to explore the awesome SlickGrid. But all the tags are removed.

For some examples see

https://mleibman.github.io/SlickGrid/examples/

st.markdown(
"""
<link rel="stylesheet" href="https://mleibman.github.io/SlickGrid/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="https://mleibman.github.io/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
<link rel="stylesheet" href="https://mleibman.github.io/SlickGrid/examples/examples.css" type="text/css"/>
<table width="100%">
  <tr>
    <td valign="top" width="50%">
      <div id="myGrid" style="width:600px;height:500px;"></div>
    </td>
    <td valign="top">
      <h2>Demonstrates:</h2>
      <ul>
        <li>basic grid with minimal configuration</li>
      </ul>
        <h2>View Source:</h2>
        <ul>
            <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example1-simple.html" target="_sourcewindow"> View the source for this example on Github</a></li>
        </ul>
    </td>
  </tr>
</table>
<script src="https://mleibman.github.io/SlickGrid/lib/jquery-1.7.min.js"></script>
<script src="https://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="https://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="https://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<script>
  var grid;
  var columns = [
    {id: "title", name: "Title", field: "title"},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete"},
    {id: "start", name: "Start", field: "start"},
    {id: "finish", name: "Finish", field: "finish"},
    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
  ];
  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
  };
  $(function () {
    var data = [];
    for (var i = 0; i < 500; i++) {
      data[i] = {
        title: "Task " + i,
        duration: "5 days",
        percentComplete: Math.round(Math.random() * 100),
        start: "01/01/2009",
        finish: "01/05/2009",
        effortDriven: (i % 5 == 0)
      };
    }
    grid = new Slick.Grid("#myGrid", data, columns, options);
  })
</script>
""", unsafe_allow_html=True)
1 Like

Hey @Marc!

I think the ultimate solution for that will be plugin support, but it seems like you already guessed that since you just posted in that issue :smiley:

1 Like

That’s interesting, thanks for mentioning this. I’m adding this observation to a bug recently filed about styling in Markdown, as it may be related.

And yes, internationalization is an important feature to us! Feedback from people who are actively developing in RTL languages will be especially important as we go forward. Please keep us informed on your experiences and use cases.

1 Like

Thank you so much @nthmost for filing that bug. I think it’s the same issue I am having. I have subscribed to that github issue. :+1:

2 Likes

One of the things I’d like to be able to do is specify a div class for st.write, st.image, etc. and then specify specific styles for that class. Concretely, I have a list of images being rendered by st.image, but I want all them to be contained by a scroll box so that the entire app doesn’t extend down thousands of pixels on the page.

3 Likes

The use case I have for HTML embedding is that I’m creating a quick app to filter through my liked tweets for specific content. The tweets usually have links and it would be better if those links were clickable and able to redirect you to the blog post that the tweet is linking to.

Since all html is escaped when rendering streamlit dataframes and tables, I’ve managed to get around it by doing st.markdown(df.to_html(escape=False), unsafe_allow_html=True)

Also some of the apps I create also link to other apps locally, so being able to highlight link that link to localhost: based apps would also be another use case.

Still a great tool in general though!

1 Like