rtl-styling

rtl-styling copied to clipboard

Hi there!

Back to RTL topic, I'm currently implementing RTL in chaarts and decided for some kind of charts to not flip them. Here're my thoughts:

• for circular charts (pie, radar, etc.) keep them as in LTR: legends should be flipped, but the overall look stays the same. Most of the time, such charts are read clockwise.
• other charts are flipped, especially date-relative data charts.

FWIW, there're some edge cases regarding RTL in CSS which are bit weird to me, mostly clip-path and transform which keeps referring to top left as a starting point. There might be others, as well.

If you have any insight regarding this, I'd be pleased to know :)

Hello hello! :)

The charts is an interesting topic to be covered on RTL Styling 101. I agree with your point on the circular charts, no need to flip them. But for the data-relative (like tables), flipping is needed.

FWIW, there're some edge cases regarding RTL in CSS which are bit weird to me, mostly clip-path and transform which keeps referring to top left as a starting point. There might be others, as well.

Would you share an example? If I got your point, that means that in a chart that uses clip-path, top-left needs to be flipped in RTL.

Here's an example in chaarts: https://ffoodd.github.io/chaarts/line-charts.html (WIP so might change or not work).

FWIW the simplest way to handle clip-path I could find is to use transform: scale(-1). Works fine in my case!

I suppose JS-based SVG charts can handle this in different ways, though.

Totally agree. Using scale(-1) is a good fix and it works perfectly with CSS.

Thanks for shedding the light on this topic! I will research more and try to include it in a future update.