Skip to content

Automargin breaks with dir=rtl #6837

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
alexcjohnson opened this issue Jan 5, 2024 · 3 comments
Open

Automargin breaks with dir=rtl #6837

alexcjohnson opened this issue Jan 5, 2024 · 3 comments
Labels
bug something broken P3 backlog

Comments

@alexcjohnson
Copy link
Collaborator

As found by @saber1440 in plotly/react-plotly.js#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 alexcjohnson added bug something broken P3 backlog labels Jan 5, 2024
@alexcjohnson
Copy link
Collaborator Author

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

plotly.js/src/components/drawing/index.js

Lines 1244 to 1255 in 9664ca9

drawing.makeTester = function() {
var tester = Lib.ensureSingleById(d3.select('body'), 'svg', 'js-plotly-tester', function(s) {
s.attr(xmlnsNamespaces.svgAttrs)
.style({
position: 'absolute',
left: '-10000px',
top: '-10000px',
width: '9000px',
height: '9000px',
'z-index': '1'
});
});

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.

@MinnML
Copy link

MinnML commented Jan 6, 2024

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
Copy link

MinnML commented Jan 6, 2024 •
edited
Loading

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.

@gvwilson gvwilson self-assigned this Jul 12, 2024
@gvwilson gvwilson removed their assignment Aug 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug something broken P3 backlog
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@gvwilson @alexcjohnson @MinnML