zesik / react-splitter-layout

A simple split layout for React and modern browsers. https://zesik.com/react-splitter-layout
MIT License
428 stars 131 forks source link

RTL not supported #35

Open nironater opened 5 years ago

nironater commented 5 years ago

I did a quick test to see if right to left (RTL) languages are supported by going to the demo page and adding dir="rtl" as follows:

image

While the layout was correct, dragging the splitter on the horizontal splitter moved the splitter in the opposite direction. This is a "NO GO" for many who wish to support RTL languages and it's a shame because the fix can be an easy one so it's worth it.

That asid - Good job 👍

zesik commented 5 years ago

Thanks for reporting this.

A (hacky) way to fix this is adding a CSS rule like this:

[dir="rtl"] .splitter-layout:not(.splitter-layout-vertical) {
  flex-direction: row-reverse;
}

I don't quite like this because I feel this could be counter-intuitive for RTL language speakers. So I also did an experimental implementation in rtl branch. Check that out to see if it helps.

Any suggestion is welcome.