Hello all,
I’m glad to share with you something that has not been addressed yet (I believe): the fact that emojis are rendered differently on several OS, browsers, etc.
Twemojis are already used by Streamlit but only for the favicon ! All other emojis are rendered using the OS/Browser emojis and in some versions of Windows, those are DAMN ugly !
I think there should be an option in set_page_config to force the use of Twemojis everywhere in your streamlit app.
In the meantime, here’s the code you can insert (tested with v1.23.1) to automatically replace all the default emojis with those of Twitter. Unfortunately it uses a timeout of 1second (change this to your needs) because I did not find a way to trigger the whole page “load” event. If someone has a suggestion to fix this, that would be great !
Code inspiration is in the comments of the snippet. Hope you’ll like this.
from streamlit.components.v1 import html
# https://blog.pagesd.info/2022/09/20/replace-windows-10-emoji/
# https://github.com/jdecked/twemoji
html("""
<script src="https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/twemoji.min.js" crossorigin="anonymous"></Script>
<script>
window.addEventListener("load", (event) => {
// https://gist.github.com/Armster15/db063ab0dc5be699ae07a067a7333752
// Parses the document body and
// inserts <img> tags in place of Unicode Emojis
window.frameElement.parentNode.setAttribute("style","height:0")
setTimeout (function() {
twemoji.parse(window.frameElement.getRootNode(), { folder: 'svg', ext: '.svg' }); // This is to specify to Twemoji to use SVGs and not PNGs
}, 1000);
})
</script>
""", height=0)
st.markdown("""
<style>
img.emoji {
/* Since we are using SVGs, you have to change the width using CSS */
width:1.5em;
/*
This is to make the emojis feel like actual emojis to
the user and they won't act like images. This makes the emojis
non-reactive to any mouse events such as dragging,
hovering, clicking etc. Makes it feel like its actual text.
*/
pointer-events: none;
}
</style>
""", unsafe_allow_html=True)
