damianavila / RISE

RISE: "Live" Reveal.js Jupyter/IPython Slideshow Extension
Other
3.67k stars 414 forks source link

Right-to-left style gets ignored in slides #588

Open johann-petrak opened 3 years ago

johann-petrak commented 3 years ago

I have a notebook that embeds some HTML that is generated by python code. That HTML uses a style to show the content of one div as RTL text and when I look at the cell output this works just fine.

However when I show the same cell as a slide, the text gets shown LTR and the RTL style gets ignored.

To reproduce this, simply create a Notebook with a slide that has the following content:

from IPython.display import HTML, display
html = """
<div style="direction: rtl;">
برلين ترفض حصول شركة اميركية على رخصة تصنيع دبابة "ليوبارد" الالمانية
</div>
"""
display(HTML(html))

The output of this cell is shown RTL as expected in the Jupyter notebook, but LTR in the slide.

parmentelat commented 3 years ago

I suggest you start using your browser's develop tools aka inspector to see which css rule is in effect to remove the effect of your property setting, and where that rule comes from

ps: it's a little odd because setting a property this way through a style= attribute is supposed to win over any other setting, but who can be quite sure about that...

johann-petrak commented 3 years ago

Does not work even with "!important":

from IPython.display import HTML, display
html = """
<div style="direction: rtl !important; color: blue;">
برلين ترفض حصول شركة اميركية على رخصة تصنيع دبابة "ليوبارد" الالمانية
</div>
"""
display(HTML(html))

This shows the text in blue in both the notebook and the slide, but still RTL only in the notebook and NOT in the slide

When I look at the element setting in Facebook, all the settings including !important are shown. I am not an expert on CSS/HTML I suggest somebody who knows more about this looks at the example code, it should be easy to reproduce by copy/paste.

ss_rtl1 ss_rtl2

damianavila commented 3 years ago

Thanks for pushing the example, we will take a look.