Streamlit Latex Auto-Wrapping/Responsive Layout?

Has anyone else discovered a way to get latex to “auto-wrap” or adhere to the responsive layout in Streamlit? The below code runs but extends far off the browser width to the right.

st.latex(“a + b + a + b + a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b”)

Hey @theimposingdwarf

I dont think we can split latex but one hack that I use is to make the .katex .base scrollable.for very long equations somewhat like this.

import streamlit as st

st.markdown("""
<style>
    .katex .base {
        width: 100%;
        overflow: scroll !important;
    }
</style>
""", unsafe_allow_html=True)
x = "a + b + a + b + a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b +a + b + a + b"

st.latex(x)

It will look something like this,


Hope it helps ! :slight_smile:

2 Likes

@ash2shukla Thanks! It’s good to know that this functionality exists as an alternative. Unfortunately, to provide the user experience I want, I’m trying to get away from horizontal scrolling and alway have the content responsively resize to the device size. I wonder if there is more to the configuration you’ve shown that might enable the line wrapping functionality I’m seeking. Or add additional behaviors beyond what is currently allowed . It seems like there are a number of katex functions not supported, especially as we get into fonts, font sizes, and formatting. For example, these all appear to do nothing. Screen Shot 2020-12-14 at 11.28.58 AM

I’m not a super big fan of the way that greek letters are looking using the default font so I was trying to make it look better than the default shown at right: Screen Shot 2020-12-14 at 11.32.19 AM

The direction I ended up going is to stop using $$LATEX$$ and instead use only $LATEX$ but break my math into separate segments where I feel comfortable splitting it. For example $LATEX PART 1$ $LATEX PART 2$ $LATEX PART 3$ etc. This way, if all three parts fit onto one line, the web browser will do so, otherwise, it will separate each segment onto its own line. I then use Safari’s responsive design mode to make sure that segments are the right size to look good on an iPhone SE (no easy task, the screen is tiny), larger iPhone, and at regular desktop width. The only downsides are that everything is left aligned rather than centered and anyone with a phone smaller than SE is going to have to scroll, but at the point, you’re hopefully not trying to read math on a phone.

3 Likes