plotly.js icon indicating copy to clipboard operation
plotly.js copied to clipboard

Published 20 hours ago • verified publisher icon plotly

Automargin breaks with dir=rtl

Open alexcjohnson opened this issue 1 year ago • 3 comments

As found by @saber1440 in https://github.com/plotly/react-plotly.js/issues/334, automargin fails if you use plotly.js on a page with <body dir="rtl">:

https://codepen.io/alexcjohnson/pen/gOErOzO

Anyone aware of a workaround for this? Related: #2390

alexcjohnson avatar Jan 05 '24 21:01 alexcjohnson

I'm worried that this may be related to the off-screen but in-DOM tester element:

https://github.com/plotly/plotly.js/blob/9664ca9253829bf2ecb70599765baa29e2eb3e5a/src/components/drawing/index.js#L1244-L1255

But <svg> elements don't support the dir attribute so it doesn't work to for example add a rule like: #js-plotly-tester {dir: ltr}. We could wrap it in a <div> with that attribute, perhaps that would fix it.

alexcjohnson avatar Jan 05 '24 21:01 alexcjohnson

I tried wrapping it in a div with that attribute. It didn't work. Interesting, the dir attribute in the <body> element, affects automargin for x-axis too.

MinnML avatar Jan 06 '24 02:01 MinnML

As a workaround in react, I am avoiding document.body.lang = i18n.resolvedLanguage; and setting dir='auto' for the highest level parent div. @alexcjohnson, Thanks for the help debugging this and coming up with a workaround.

MinnML avatar Jan 06 '24 13:01 MinnML