fix: tooltip misplaced in RTL documents

[jony89]

plotly breaks when inserted in a documented with RTL direction

as can be seen here :

[etpinard]

Thanks for the PR @jony89 ! This looks good, but I'm no RTL expert.

Can anyone help out?

[alexcjohnson]

@jony89 so this change says that even though the document is RTL, we override plots to use LTR. Is that common and accepted behavior in such cases? I also notice that in your image the numbers are handled in a peculiar way, with the digits in LTR order but the minus sign moved to the right side. And then it seems like anything that's center-aligned (ie the X axis labels) is positioned correctly, but anything left-aligned (hover text) or right-aligned (Y axis labels) goes the wrong way from the anchor point.

So the question is: What would people in RTL locales expect to see? Would they be satisfied with us flipping to LTR inside the plot, or would they prefer us to leave it RTL and fix the alignment instead - and if so, is there anything ELSE we need to fix, like this minus sign positioning? Is the answer to this question even consistent across RTL locales?

So I'll repeat @etpinard's question: Can anyone help out?

[jony89]

@alexcjohnson

so this change says that even though the document is RTL, we override plots to use LTR. Is that common and accepted behavior in such cases?

If you expect within Plotly to have LTR doc, then yes. we got to scope it to Plotly.

I also notice that in your image the numbers are handled in a peculiar way, with the digits in LTR order but the minus sign moved to the right side.

my PR fixes this as well.

What would people in RTL locales expect to see

there is no difference between RTL and LTR, signing and alignment wise. (we expect to see -5 and not 5-)

Is the answer to this question even consistent across RTL locales?

Yeah, I'm pretty sure.

Another approach is to create fix per defect, so for the hover number to add direction: ltr. for the class that represent the axis numbers to add this style as well. this way we won't affect anything else.
Yet I've tried to change the title to RTL language with that fix and it seems ok.

[alexcjohnson]

Yet I've tried to change the title to RTL language with that fix and it seems ok.

Hmm, this is the part I'm worried about, and I'm confused about how it could be OK if we switch to LTR inside the plot. You can include arbitrarily long and complex text in the plot - in the plot title, axis titles, trace name (for the legend), annotations... won't it all be written backward? For instance what would this one look like RTL: https://plot.ly/~alex/455.embed

The fix I would imagine - though it would be a good deal more involved than this - would be to leave the direction RTL inside the plot, detect this, and flip the signs of all our alignments to put the text in the right place.

[jony89]

Yup I was afraid of it as well, yet I did test it. with your example too. and it seems ok.

you can see here example of me overriding the plotly css in order to work : math

In addition, other than testing, your example just emphasizes that plotly require to be LTR. because for RTL language, the images should be on the right, and the text should be on the left.
And see just what happends when you append direction: rtl; to the body in your example. that's truly messed up.

Also, lets not forget that one can always override Plotly css and fit it to his needs. Either way Plotly totally breaks in this case, more than just the signs of the numbers.

[alexcjohnson]

Alright @jony89 if you're happy I'm happy! I think we should merge, seems to me unlikely anyone using plotly.js in an RTL environment has implemented a workaround that would conflict with this, and in case someone wants to do the more complicated thing I'm imagining (to preserve RTL direction inside the plot but fix the alignment) we can discuss further at that time.

@etpinard I'll let you merge if you agree with this assessment. 💃

BTW I changed the title to include RTL, to make this PR more discoverable later on.

[jony89]

I think we should merge, seems to me unlikely anyone using plotly.js in an RTL environment has implemented a workaround that would conflict with this, and in case someone wants to do the more complicated thing I'm imagining (to preserve RTL direction inside the plot but fix the alignment) we can discuss further at that time.

That sounds good to me. and I agree with the env statement.

[etpinard]

Thank you for your time and efforts on this issue @jony89 and @alexcjohnson

I'm ok with @alexcjohnson's conclusion. 💃