How to define as default the direction: RTL;

Hi,
I run the app locally, and want to set direction to RTL.

Currently every page has markdown
Following form:
st.markdown(β€œβ€"

p, div, input, label {
# unicode-bidi:bidi-override;
direction: RTL;
text-align: right;
}

β€œβ€, unsafe_allow_html=True)

The problem is that slower, and if you move between pages it flips for a second LTR and then returns.

Hello @Ido_Lapid,

To minimize the delay in applying RTL styles, ensure your CSS is among the first things Streamlit processes. While this won’t entirely eliminate the flicker, it might reduce its duration.

st.markdown("""
<style>
body, html {
    direction: RTL;
    unicode-bidi: bidi-override;
    text-align: right;
}
p, div, input, label, h1, h2, h3, h4, h5, h6 {
    direction: RTL;
    unicode-bidi: bidi-override;
    text-align: right;
}
</style>
""", unsafe_allow_html=True)

Hope this helps!

Kind Regards,
Sahir Maharaj
Data Scientist | AI Engineer

P.S. Lets connect on LinkedIn!

➀ Want me to build your solution? Lets chat about how I can assist!
➀ Join my Medium community of 30k readers! Sharing my knowledge about data science and AI
➀ Website: https://sahirmaharaj.com
➀ Email: sahir@sahirmaharaj.com
➀ 100+ FREE Power BI Themes: Download Now

3 Likes

First of all, thanks for the reply.
The question is whether there is a way to set this as a default on all pages without calling the function on each page.
Maybe in config

1 Like